Customizing Base Theme in a Sub-Theme

The Approach

In the previous chapter we touched upon the layout and structure of the base OpenPublish 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 openpublish_theme, included in the openpublish distribution. Sub-themes automatically inherit everything from the base theme and then specific aspects can be overriden/further customized.

Some common examples:

Suppressing and Overriding CSS Files

Not all CSS files in the base theme are equally portably 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 a sub-theme and add css definition to the .info file of the sub-theme. When sub-theme is the active theme, OpenPublish will first look in the sub-theme folder and only if 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 html- elements.css: create an empty html-elements.css in the sub-theme and add the following line to the ardi.info:

  • Overriding layot.css - copy the file to sub-theme and modify 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 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 - OpenPublish 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 change path of a css file. You can clear cache by visiting following URL: http://yourdomain.com/admin/content/clearcache (where yourdomain.com is the root of your Drupal installation) or by going to Administration > Content Management > Clear Cache in the admin menu (black menu on your left).

Documentation

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