Customizing OpenPublic's Original Base Theme Using a Sub-theme

The Approach

In the previous chapter we touched upon the layout and structure of the base OpenPublic theme. To fully leverage the base theme for bootstrapping new theme development, custom themes should be created as a sub-theme of the theme called openpublic_theme, included in the OpenPublic distribution. Sub-themes automatically inherit everything from the base theme and then specific aspects can be overridden/further customized.

Some common examples:

Suppressing and Overriding CSS Files

Not all CSS files in the base theme are equally portable to the sub-themes. While, there's a good chance you may keep some, you may want to override others. To disable a CSS file present in the base theme, all you need to do is create a file with the same name in your sub-theme and add a css definition to the .info file of the sub-theme. When the sub-theme is the active theme OpenPublic will first look in the sub-theme folder and only if the file is not found there, will it check the folder of the base theme. When you re-create a CSS file in your sub-theme, you can either enter new styles in it (overriding) or leave it empty (just suppressing).

Let's look at some examples:

  • Suppressing openpublic_theme.css: create an empty openpublic_theme.css in the sub-theme and add the following line to the ardi.info:

  • Overriding layout.css - copy the file to sub-theme and modify it there. Also add following line to the ardi.info:

Tip: in most cases, location of files in a theme does not matter. You can place files right under your theme folder or in any sub-folder. If the path to the file is indicated in the .info file (like for .css or .js files), you just need to indicate the correct path there. If the path does not need to be indicated in the .info file (e.g. for tpl.php files") you don't even need to do that, OpenPublic will find these files anywhere under the theme folder.

However, if you are overriding a CSS or javascript file, you need to place it in the exact same location as it was in the base theme (e.g. for CSS files: under "CSS" folder) otherwise overriding won't work and both files, from base and sub-theme, will be included, even if they have the same name. Also, two for the sake of consistency, if you are overriding a tpl.php already present in the base theme, we recommend placing it in the same folder structure that it has in the base theme.

Attention: don't forget to clear cache after any significant theme-related operation, like suppressing or overriding or changing the path of a CSS file. You can clear cache by visiting following URL: http://yourdomain.com/admin/config/development/performance (where yourdomain.com is the root of your Drupal installation) or by going to Configuration > Performance in the admin menu at the top of the screen and clicking the "Clear all caches" button.

Overriding template files

Template (tpl.php) files are where the HTML markup lives that build your page. When you want to modify the markup of your page, you need to override the appropriate tpl.php file by copying the file into your theme folder.

Let's look at an example:
Say you want to alter the HTML that renders your Blog Entry content type. Copy the node--blog-entry.tpl.php file from openpublic_theme/node into your theme folder. Make the modifications in the newly copied file. Node-level tpl.php files cover only the HTML that is used to render the content of its node, which means if you want to modify elements of your page that are not specific to the content type, you need to find the appropriate tpl.php file to copy over to your theme.

Once you are done, don't forget to clear the drupal cache.

Documentation

Loading widget...
No files to show
{{node.name}}
({{node.children.length}})
{{node.date}}
{{node.modified}}
{{node.filesize}}
{{node.filename}}