Structure of the OpenPublish 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 openpublish_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 openpublish_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:

  • components - contains different miscellaneous theming templates for things like: AddThis widget, breadcrumb and related terms.
  • css folder contains files for all cascading style sheets. In OpenPublish CSS is organized across several files depending on the purpose:
    • html-elements.css - defines default styles for all basic HTML elements.
    • basics.css - CSS styles for common basic use-cases. Included are: .clearfix style: an HTML stylist's best friend, .bold, .italic, .img-left, .img-right, many useful CSS definitions for common Drupal markup classes etc.
    • layout.css - CSS styles for layout definitions.
    • components.css - CSS styles for various components of a site design.
    • prints.css - CSS styles for print mode.
    • editor.css - CSS styles specific for FCKeditor WYSIWYG editor.
  • general - TPL theme files for core Drupal components like: block.tpl.php, comment tpls and user-profile.tpl.php. Please note that user-profile.tpl.php styles Drupal user pages. If you follow OpenPublish's approach to publishing there's very little chance you will need this page, since in OpenPublish content is authored by a more abstract notion of an Author (a content type in itself) rather than much more limiting notion of Drupal users, so you will most probably be styling Author pages, rather than Drupal user pages, but in case you have a need to style Drupal user pages, the corresponding tpl for it lives under this folder as well.
  • images folder contains image elements used in the theme. It's further sectioned into: 'banner', 'bkg', 'divides' and 'bullets' sub-folders.
  • node folder contains tpl theme files for all content types (their detail pages) available in OpenPublish as well as a generic node.tpl.php that captures any content type not themed by a more specific theme file like node-article.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 OpenPublish 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 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/OpenPublish 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).
  • views folder contains template files for various views (listings of content generated via database queries) organized into sub-folders named corresponding to the view names. Theming Views is way beyond this tutorial so you should refer to appropriate books and/or Drupal documentation if you need more information. OpenPublish tries to simplify views themes as best as possible, to make them more accessible to non-programmers, but it's still highly recommended to have strong understanding of Views system in Drupal before you dive into those theme files.

Documentation

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