Style Only Themes

One of the fantastic features that Drupal offers is the ability to build themes based entirely on one CSS file. The standard themable functions and tpl.php files all serve to generate HTML according to the theme designer's exact wishes, yet HTML is far from the last word concerning how a page will actually look. In terms of web design, the CSS has a far greater impact overall than the mere HTML, which provides structure to the content, but not much else. That is why the ability to reuse the HTML and build multiple themes on top of it is especially helpful.

Top-level themes earn their status as a theme by virtue of the page.tpl.php file, which is the minimum requirement to qualify as a PHPTemplate theme. You create a CSS theme by adding a directory inside a top-level theme like Bluemarine or Pushbutton. Inside the sub-folder, place a style.css file, and you've created a whole new theme! Visit admin/themes to verify its existence.

The new CSS theme will use the HTML generated by the top-level theme and apply the style.css file in the subfolder. The theme will take its name from the name of the subfolder. For example, the file bluemarine/greenmarine/style.css would cause an entire new theme called Greenmarine to register on the admin/themes page. It would be identical to Bluemarine in terms of HTML, but could look completely different, based on whatever rules are found in the bluemarine/greenmarine/style.css file.

This type of CSS theme also has the minimum requirement of having a page.tpl.php file at its disposal; it borrows the file from its parent directory. All of the other tpl.php files, as well as themable function overrides in template.php, will apply to the CSS theme. For an example of this in action, check out the CivicSpace theme available at http://drupal.org/project/ civicspace_theme.

■ Note When adding a CSS theme, you need to visit admin/themes once before Drupal will recognize the new theme.

0 0

Post a comment