Start With a Good Base
A great way to ensure minimal template overrides is to define your markup in such a way that it is flexible enough to work in most cases. Think of the major template files like
block.tpl.php, for example, as having two purposes. The first is to provide a container and the second is the actual content, which can include any number of different elements inside it. Drupal does this reasonably well to begin with, but there is always room for improvement, and your needs may vary from site to site depending on the design.
As an example, look at the contents of the
block.tpl.php file, shown in Listing 16–44, which is provided by Drupal’s Block module and can be found in
The resulting code is pretty minimal. In most cases, when creating custom themes, you will not want these to look the same, so you will use CSS to style them differently. It may not be immediately apparent, but there are some potential problem areas to take note of with the default
block.tpl.php implementation. Certain design aspects need more flexible markup. Some examples of this include:
- Grids: You may choose to lay out your blocks within regions using a CSS grid framework. This will prevent you from adding left and right padding/margins directly to the
- Background images: Your design might require adding multiple background images to achieve a design for the block that is content agnostic. Sounds easy enough, right? The top and tiling background image can be declared in
.block, but where can the bottom background image be defined? As soon as you add padding to the
.blockclass itself, you lose the ability to place the second background image on the existing
The previous examples are a small taste of what you might encounter while coding a Drupal theme. You may be tempted to take the minimalist markup approach and deal with problems as they arise, and this is where we would stop you! As mentioned, these main template files are responsible for containing many types of content. You don’t want to create a new template file for every different kind just to modify structural aspects. It’s much more sustainable, not to mention easier to code, to create solid and flexible defaults and deal with exceptions as they arise.
This can be achieved fairly easily by separating structure from content. As shown in Listing 16–46, by simply adding
<div class="inner"> to surround the contents, you can solve many potential problems before they arise. In the example of grids, padding can be applied to the
<div class="inner">. As for background images, the top background image can be applied to
.block, and the bottom can be applied to
.block .inner or vice versa.