Building a MAYO Sub-Theme

Building a MAYO Sub-Theme

This is a quick summary of the steps I use to make a Sub-Theme for the MAYO theme for Drupal 7. I'm using MAYO 7.x-2.x  here, and the final release will be pretty much like it is now.

  1. Naming it Sub MAYO so created a folder called /sites/all/themes/submayo and put a copy of  the mayo.info file inside. Then I renamed it submayo.info and edited it to like this:
    
    		
    name = Sub MAYO
    description = This is a sub-theme of theme MAYO, made for YourSite.com.
    core = 7.x
    base theme = mayo
     
    stylesheets[all][] = css/style.css
    stylesheets[all][] = css/colors.css
    stylesheets[all][] = css/submayo.css
     
    regions[header] = Header
    regions[help] = Help
    regions[page_top] = Page top
    regions[page_bottom] = Page bottom
     
    regions[menubar] = Menu bar
    regions[submenubar] = Submenu bar
     
    regions[banner_top] = Banner top
     
    regions[top_column_first]  = Top first column
    regions[top_column_second] = Top second column
    regions[top_column_third]  = Top third column
    regions[top_column_fourth] = Top fourth column
     
    regions[highlighted] = Highlighted
    regions[content] = Content
    regions[sidebar_first] = Sidebar first
    regions[sidebar_second] = Sidebar second
     
    regions[bottom_column_first]  = Bottom first column
    regions[bottom_column_second] = Bottom second column
    regions[bottom_column_third]  = Bottom third column
    regions[bottom_column_fourth] = Bottom fourth column
     
    regions[banner_bottom] = Banner bottom
     
    regions[footer_column_first] = Footer first column
    regions[footer_column_second] = Footer second column
    regions[footer_column_third] = Footer third column
    regions[footer_column_fourth] = Footer fourth column
    regions[footer] = Footer
     
  2. Copy screenshot.png and logo.png from the mayo base theme and paste into the /submayo directory. You can edit the screenshot.png to look different if desired.
  3. Copy the entire /color folder from the base theme to the sub-theme for support of the color module options.
  4. Create /submayo/css and copy/paste style.css and color.css from the mayo base theme. Also create a blank submayo.css file in there for your little tweaks later on.
  5. Create /submayo/images and get page-layout-sprite.png from /mayo/images. This is for Layout in Sub Mayo theme settings.
  6. Go to Sub Mayo theme settings and do a "Save"  so it can create a couple of .css files. You might need to clear the cache.
  7. If you need images from the base MAYO theme you will need to copy them over to the sub-them images directory.
  8. Read the referenced drupal.org documentation for many other tips on creating sub-themes in Drupal.