Blocks and themes
Themes are a very important aspect of every website as they create the look and feel and are expected to convey a very intuitive and user friendly presentation of the underlying functionality.
Drupal's theme layer is very flexible and powerful, among many things it is composed from a collection of web assets like CSS, JavaScript, images, and of course the HTML template layouts.
Blocks
When looking at a website, it is often very common to notice a sort of pattern that emerges in the overall website's layout. Taking the US government's white house website (http://whitehouse.gov) for example, we can break it's layout into the following parts:
- The header which is at the top has to the left of it the White House's title, if so to say, along with a logo at the middle and some useful links to the right like contacting them
- The horizontal menu is the main navigation area of the website, right after the header line
- The middle top parts wins with image rich content and even wraps around a search area
- Then the main content area is divided into two columns, the left side has several blocks of content like popular topics and others beneath it and to the right of the content area there's an automatically updating feed of news, tweets and others as shown in the following screenshot:
In Drupal, these so called parts which we have just dissected, are called regions and have been introduced back in Drupal 4. They enable a site builder to place different kinds of content in the site's layout.
By the way, whitehouse.gov is a website powered by Drupal.
Understanding block regions
Let's look at our Drupal 7 site, can you tell which regions are used?
If you've identified at least the header, left side bar, right content area, and the bottom footer then you've done a great job!
As we've introduced themes before, they are very powerful, flexible, and possibly very different from one another. One of these differentiating aspects is the fact that each theme defines its own content regions and its main content area.
Blocks are Drupal's way of describing units of content and through the use of blocks we assign content to the different regions (you may also know blocks named as widgets for example in other frameworks but the concept is the same).
To understand which block regions are available for us, let's navigate using the top administrative bar to Structure | Blocks (/admin/structure/blocks) and the blocks settings page shows up. Click on the link Demonstrate block regions (bartik) at the top and you will now see the regions highlighted within the theme as shown in the following screenshot:
Only now, we realize the potential of the default theme. Some ideas to utilize these regions are as follows:
- Use the top Featured region for placing an image like the White House website's, or maybe even a full slideshow of images
- The three columns Triptych region can be used for placing contents of short blocks with images
- The four columns Footer area is commonly used for breaking apart the website's navigation into different sections
To go back to the blocks settings page click the top left link Exit block region demonstration.
Assigning blocks to regions
Looking at the main blocks settings page we can learn several things:
The top-right tabs of this page show the block settings for each enabled theme and the main page lists the available blocks and the regions they apply to. If we take a careful look we can see that the page is split, at the top there are all the regions listed with the enabled blocks in each of them, and at the very bottom of this table we see a list of disabled, yet more available blocks.
Let's go ahead and enable one of these blocks. The Who's new block sounds interesting so to enable and assign it to a region we'll choose one of the options, specifically the sidebar first option, from the select box in the REGION column. Upon choosing it the block has been immediately moved in the UI to the sidebar first region and should be visually noticeable using a highlighted bar. Moreover, let's reorder the blocks in that sidebar, as it contains more than one, and place our Who's new block at the top.
The blocks settings should look something like the following screenshot:
To finish we'll click on Save blocks at the bottom of the page and closing this configuration page we can immediately see the new block applied in our website's layout as shown in the following screenshot:
Creating blocks
Sources for these blocks may be many, such as other modules that we've downloaded and installed, which introduce new blocks content. Blocks themselves may have been created via programming code, or they may have been created by the Views module. It's even possible to create very generic and simple blocks through the user interface in the blocks settings.
We'll start by adding a static content block, for example, our contact information which is very common, and we can then place it in the footer.
Navigating to Structure | Blocks we'll click on the link for Add a block above the blocks listing. The Title and Body fields of the block are those which set the title of the block (if the theme chooses to make use of that in its presentation layout) and the body field is used to display the content for the block. Adding our contact information, it should look like as shown in the following screenshot:
You may have noticed the Text format select-box which offers the filtered HTML as a default formatting. In later chapters we will learn how to use a rich text editor and then we'll be able to format the contents of this block better, such as adding a mailto address link and using bold or italic markup.
Note
It is possible to enable a PHP Filter module which adds the capability of hard-coding PHP code in the blocks content area (among other places as well) which seems to provide you with more dynamic content, although this method is often frowned upon and is not recommended due to many reasons, some of which are: mixing up programming code with the presentation layer, security aspects, managing of such code blocks inside Drupal's CMS, and internal database handling. Also, due to the fact that PHP code resides inside Drupal's logic this way (as opposed to being programmed using the module development facilities), it is being evaluated by Drupal on the fly which means that it does not get cached using OP Code caches like APC or others.
In the REGION SETTINGS we can set right there in the creation of the block page which region this block will show up on for each theme. The default theme shows up first and we'll choose the Footer option for that.
At last, we can fine tune who this block will be visible for in the Visibility settings field set, which adds the option to control who sees this block, and where with the following options:
- Pages: Defines either a whitelist (only the listed pages) or a blacklist (all pages except those listed) of page URLs, including the use of a wildcard character to control visibility
- Content types: When viewing a specific node content type, deciding whether to display this block or not
- Roles: Defines which roles this block content will be visible for
- Users: Provides the ability for users to configure whether they want this block visible or not, and the default visibility of this block for users which didn't yet customize this option
We will leave the defaults as they are (although feel free to experiment with this) which means that the block is always visible, to all users, in all pages. Once you're ready, click on Save block and return to the homepage to see the newly created block in the footer.
Themes
By default, Drupal 7 is shipped with several themes, out of which Bartik and Seven themes are enabled (if you're wondering why both are enabled we'll find out soon enough).
In essence, themes are a bundle of web assets like CSS and JavaScript but they also maintain their own settings, like regions which we learned about earlier. To find out which themes we have, as well as to configure their settings we'll navigate to Appearance (/admin/appearance) from the top administrative bar.
We can enable as many themes as we'd like and use them in different contexts. One use case for that is that Drupal 7 by default enables the Bartik theme as the default front-facing user theme and the Seven theme as the administrator's theme, which is the theme that you see when viewing administration pages (those popup dialogs which Drupal calls overlays). To change the administrative theme scroll to the bottom of the Appearance page and select a different theme.
While theme settings exist as site-wide default we can override these with each theme, depending on the provided theme's flexibility. To change the default Bartik theme we'll go ahead and click on it's Settings link in the ENABLED THEMES listing (or we can navigate via the tabbed interface and click on Settings | Bartik). as shown in the following screenshot:
Some of Bartik's theme featured customizations are as follows:
- Color set: It provides a color theme to choose from. The previous screenshot shows the Firehouse option selected which already sets the preview as well as the different color elements of the theme already such as border, background, and text color.
- Toggling on/off the logo, site name, and site slogan. User pictures in posts and other themed elements which are reflected across the site's theme.
Tip
Themes for frameworks
Just like module development in Drupal has a common structure, so do themes. This structure organizes and streamlines theme development to create a solid ground for themers (theme developers) to further build and extend, much like in object-oriented programming.
Base themes, as they are called in Drupal, mandate such theme structure which enable developers to avoid starting from scratch and use a common convention to build on. This effort then results in what is known as sub-themes. By using sub-themes, developers can customize the site's look and feel and benefit from provided templates for nodes and blocks, re-using CSS classes, cross-browser compatibility, and more, all without breaking compatibility which will allow upgrading the base theme and stay up to date with current versions.
While it's possible to make use of base themes as the default site theme this is mostly not the case, nor the intention, but rather sub-themes are provided as default site theme and are required to be enabled along with the base theme.
Installing a new theme
Never let the defaults disappoint you. You're probably not really blown by Drupal's default theme and it's "sleek" user interface. That's ok, it's just a default out of tens of thousands out there for you to enjoy.
The official Drupal's website (http://drupal.org/project/themes) is one place to find your future theme, among many other free as well as paid resources on the Internet.
Zen, Omega, and a few other themes have made a name for themselves already as leading Drupal themes but you can find one more option, such as AdaptiveTheme, which became another great theme project aimed for modern HTML5 applications and responsive design.
AdaptiveTheme (http://drupal.org/project/adaptivetheme) is a base theme so enabling and setting it as the default theme is not enough and might actually break the UI. It has more than a few free, open source, and decent sub themes available and we'll go with Corolla (http://drupal.org/project/corolla). Download the latest recommended release of both of these themes (remember to match the minor version, that is, if you're downloading 7.x-3.x of AdaptiveTheme make sure to download the 7.x-3.x of Corolla too).
Once downloaded, unpack to sites/all/themes directory and navigate to Appearance settings, in which both themes should now be listed at the bottom with the rest of the disabled themes. Enable the theme called AT Core, and then click on Enable and set default for the Corolla theme. Then click on the Settings link for the Corolla theme.
As opposed to Bartik theme settings, Corolla's enormous settings page might be overwhelming to take all at once and shows how many theme tweaking options exist, especially with such professional and well-build themes. You can probably notice some interesting configuration options there like mobile related theming with the tablet and smartphone layouts. Even for the standard layout (which basically means a desktop browser resolution) we can define the columns sidebar positions and each column's width. We will visit many of these characteristics of modern HTML5 in following chapters.
While we can spend a week tweaking these layout options, for now we will configure images alignment in teaser view to show up to the left of text instead of having no alignment at all. You can find this option in the Extensions section under the Image Settings vertical tab and make this change. We're only making this change so we're done, click on the Save Configuration button at the bottom to visit your site's home page which should now resembles this screenshot:
Template engines
When presenting content, the actual content like a block or view's output is rendered into a template file (which may be wrapped by other template files).
In older days of PHP and web development in general, one could find program code and HTML markup together in one file which was bad practice in so many levels like separation of concerns, tightly coupling the view of a page with server-side code, harder maintenance and so on. Sometimes it's referred to as spaghetti-code but since then, design patterns and programming practices has evolved and methodologies like Model-View-Controller (MVC) have found themselves more and more employed by programmers and their frameworks and that goes for Drupal too. In turn, the presentation layer is indeed separated from the business logic and Drupal does it with the help of a PHP library called PHPTemplate which is shipped with it by default.
One of the values of using such MVC structure is that a developer who is working on writing a Drupal module can focus on the relevant programming without worrying how a block of content will be designed, which colors will be used etc, and the themer whose job is to work on styling the user interface can focus their work on CSS, JavaScript and HTML code for designing the website's look and feel and they can treat the underlying content with placeholder variables like $content without caring how this content is being produced (this is the developer's job).
Drupal's template engines are placed in themes/engines directory.