User login

Creating a Subtheme in Drupal 7

Bear with us, and Drupal 7. There are some non-intuitive steps in the subtheming, but the power, simplicity of modifying, and relative ease of upgrading is worth it.

  1. Make sure the theme you want to base your theme on is present in your Drupal install (a core theme in the themes directory, a contributed theme you have placed in sites/all/themes, a theme available in a profile, or in a valid theme path somehow).
  2. In your custom themes folder, such as sites/default/themes (you may have to create the themes folder here), create a folder with the name you want to give your subtheme. (Combining the base theme name and the site name is good practice, as it is important that you not name your theme the same as a module name, and naming a site-specific custom module after the site name is common.) This name must not contain spaces and should be all lowercase, for instance basethemesitename.
  3. Copy the .info file from your base theme to this directory, and rename it to match the directory you just made. For instance, copy basetheme/basetheme.info as basethemesitename/basethemesitename.info.
  4. Edit this .info file:
    • Delete the engine line (almost invariably, engine = phptemplate), because this is inherited from the base theme.
    • Add a line naming the base theme: base theme = basetheme.
    • Leave all region definitions, except ones you want to remove or modify (corresponding changes of removals, additions, and changes to the system name of regions must be made in the page.tpl.php file, which therefore would have to be copied into your subtheme as well).

  • If you want to use color module, you need to jump through a bunch more hoops:
    • Move the entire color folder into your subtheme.
    • The path to the colorizing css file must be redeclared explicitly in the subtheme. I move it into the color folder to keep everything together and edit color.inc to point to . Again, you must also give the path to color.css in your subtheme's .info file.

    Important: If and when you wish to have any sort of page-something.tpl.php or node-something.tpl.php template override in your subtheme, you must also have a plain page.tpl.php and node.tpl.php, respectively. This is even if you do not want to modify it in any way; you must copy it from the base theme, or if the file is not present there, from Drupal core.

    There is a bug or undocumented feature in which if a subtheme stylesheet has the same name as a base theme stylesheet (even if the path within the theme is different) it overrides the base theme stylesheet. This is intentional in the case of modules to provide an easy way to override an entire stylesheet from a module. (This is why you must namespace your module .css files with the module name, as in mymodulename.css and mymodulename-extra-blocks.css.)

    Ironically, to override a CSS property in the stylesheets we are inheriting from a base theme in the sense of simply undoing it, to revert it, to make it as if that style weren't there in the base theme, we use the CSS value inherit for that property. (or the default value?)

    Most themes meant to be base themes will structure their stylesheets so nothing should have to be unset in this way. In any case, if we find ourselves wanting to touch the majority of a stylesheet, we should copy and replace the whole thing (override via Drupal, rather than try to override in CSS).

    You have to make sure you clear the theme registry.

    You have to make sure you clear the theme registry.

    The page_top and page_bottom regions are automatically hidden (you can't see them on the administer blocks page). You can hide regions yourself by adding regions_hidden[] lines, as in this example

    References

    (features or bugcheck: http://drupal.org/node/753390)

    Searched words: 
    drupal 7 subtheme regions "drupal 7" subthemes sub-theme based themes directory placement

    Comments

    Post new comment

    The content of this field is kept private and will not be shown publicly.
    • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
    • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
    • Web page addresses and e-mail addresses turn into links automatically.
    • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
    • Lines and paragraphs break automatically.

    More information about formatting options

    By submitting this form, you accept the Mollom privacy policy.