Structuring Drupal Theme & CSS

Structuring Drupal Theme & CSS

While building your new theme, consider that the final product should be one that will be accepted into the Drupal community. This inclusion often requires maintaining your theme’s simplicity and adherence to standards, which will make it easier for others make changes to the theme. Keep in mind that an organized and flexible, yet effective, theme will be sought after.

Keeping Template Files Neat and Standard

Between template files, theme hooks, and style sheets, there are a number of ways to accomplish your theming goals in Drupal. However, this same flexibility also puts your theme in danger of being disorganized and bulky. The purpose of a theme is not only to provide users with a unique and appealing aesthetic, but also to allow developers to shape it with ease to fit their needs.

The easiest way to lose control of your theme is to fail to differentiate between template files (.tpl.php) and theme hooks in your template.php file. Practically, both can be used to the same end. Nevertheless, it is common practice to keep most PHP logic out of template files.

Two important reasons exist for this practice. For starters, you want template files to be as simple and easy to understand as possible. They should primarily be used for markup, which may entail adding classes or a div tag around the content. Secondly, this practice will decrease the number of template files in your theme.

As a simple example, suppose you want your front page to include some unique markup. It is within your right to create a page--front.tpl.php file to include some unique HTML. If you developed in this way each time you wanted to differentiate pages or nodes, though, you would burden yourself with many template files. A better approach would be to use the page theme hook in your template.php file in conjunction with the drupal_is_front_page() function to make the appropriate changes.

Furthermore, your hook functions can equip your template files with variables they create or edit. All you have to do is make changes or add to the $vars array that is passed as an argument to the hook function. You could do this if you want to separate content and assign each to different variables for use in the template file.

You’ll want to include only the basic template files in your theme, keeping them simple and straightforward. If the theme looks too bulky, you should put the code in the theme hook and create a variable if necessary.

Note: When working with the $vars array, it is almost essential to have the Devel module installed. Using kpr($vars) will display an interface in which you can expand sections of the array to find what you are looking for and its value at the time you call kpr.

Even if you intend your theme for personal use only, following these guidelines is important for future reference and updates.

Modifying or Creating CSS

While modifying a theme, be sure to learn how its CSS is organized. If the theme has been built well, you should be able to find what you are looking for rather than having to create your own files or add unnecessary code.

If you are creating style sheets for your own theme, it is important to think about how you want to present all of your styling code. Your first option is to create one main “style.css” file which has a large majority of the CSS that you write; this file is often supplemented by a couple of other files. You may also choose to create many CSS files that work together on a more equal basis to form the style of your theme.

Oftentimes, this decision will depend on the extensiveness of the theme or your own personal preference. However, you should think about the ultimate effects that either choice will have upon future CSS modifications.

The positive side of one styling file is that the developer will only have to look in a single location. It is easy to do a search to find an id or a class. Another reason is that there will be almost no confusion when someone opens your theme to look for style sheets.

However, even when searching, you often have to go through many matches to find the exact location you are looking for. It is also challenging to keep such a huge file neat. Much of the time, this bulkiness will result in someone adding duplicate or overriding CSS at the end of the file rather than in the correct location.

That said, structuring your theme around a larger number of CSS files also has risks. Making too many files puts your theme in jeopardy of causing hurdles for development, which should be avoided. A user might be confused when they first see the layout. It may also foster duplicate code as the developer may be unable to find the relevant code amidst so many files.

While it may seem burdensome at first, this approach can make the long-term development of the theme easier and more coherent. Creating a reasonable number of style sheets that each have a clear direction with an intuitive description will minimize problems. For example, you could have styles sheets for a page, different regions of a page, nodes, and blocks.

If your theme is particularly extensive, you may also consider inserting a readme file in your CSS directory that explains the theme's organization.

Should you decide to create a theme with many CSS files, it is important that you also change performance settings to combine files automatically. You can do this by navigating to Administration > Configuration > Development > Performance. Then, check the “Aggregate and compress CSS files” box to ensure that site performance is not hampered by your CSS organization.