Structure of OpenPublic's Original Base Theme

Now that we have mentioned, in passing, where some of the theme files are located, it is useful to explain the structure of the openpublic_theme folder in general. You will never be modifying any files in this base theme, directly (since you should always sub-theme it instead) but your sub-theme will most probably have similar structure and you may often find yourself looking in openpublic_theme for reference, so let's see how it is built. On the highest level, following is the structure of the folders in the theme: 

Accordingly, following is the structure of the files and folders in the theme:

  • css folder contains files for all cascading style sheets. In OpenPublic CSS is organized across several files depending on the purpose:** basics.css - CSS styles for common basic use-cases. Included are: [.clearfix|http://www.positioniseverything.net/easyclearing.html] style: an HTML stylist's best friend, .bold, .italic, .img-left, .img-right, many useful CSS definitions for common Drupal markup classes etc.
    • openpublic_theme.css - CSS styles for layout definitions, content types, and everything else.
    • openpublic_theme_ie7.css - IE7 sepecific styles
    • openpublic_theme_ie8.css - IE8 specific styles
    • print.css - CSS styles for print mode.
    • editor.css - CSS styles specific for the WYSIWYG editor.
  • img folder contains image elements used in the theme. It's further sectioned into: 'admin', 'banners', 'buttons', and 'icons' sub-folders.
  • js folder contains any theme-specific javascript files
  • node folder contains tpl theme files for all content types (their detail pages) available in OpenPublic as well as a generic node.tpl.php that captures any content type not themed by a more specific theme file like node--blog-entry.tpl.php
  • page contains four page-level tpl theme files:** page.tpl.php - contains generic layout markup for all pages within a website. You should make this one fairly high-level and flexible since it affects all pages, minus frontpage. In the case of OpenPublic base theme it is defined in a way that columns "collapse" if there is no content in them (content in columns is governed by setting in the Context http://openpublishapp.com/node/28 user interface).
    • page--front.tpl.php - since in the majority of websites, front pages have design very different from all the other pages in a website, Drupal/[OpenPublic]- -allow to override page.tpl.php for the front page using page--front.tpl.php
    • page.header.inc and page.footer.inc. In any website, even when the design of a front page and inner pages are very different, they still share some part of markup at the top and the bottom. Examples of such markup are: HTML head section, logo section, sometimes: navigation, footer links etc. To avoid duplication of these markup elements across page.tpl.php and page-front.tpl.php we extracted those into page.header.inc and page.footer.inc and include those from both page-level tpl files, eliminating any duplication (and possibility for errors).
  • regions contains tpl files for markup that wraps around the content of a specific region
  • templates contains tpl files for the search results
  • logo.png and logo-sm.png is the logo image that gets placed in the header and footer of the theme
  • openpublic_theme.info declares basic information about the theme (it is discussed in more detail on the "Your First OpenPublish (Sub)Theme" page)
  • screenshot.png is a screenshot of a page in your theme to be displayed on the Appearance screen in the OpenPublic administration. For more information about this see: http://drupal.org/node/647754
    * template.php contains PHP code to preprocess the content before it gets placed into the templates. This is useful if you need to alter your content in a more advanced way.

Documentation

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