This week we are going to work on making the interface of Drupal web sites both distinctive and attractive.
Drupal themes allow you to change the look and feel of a Drupal site. You can use themes contributed by others or create your own to share with the community.
A Drupal theme is a collection of files that defines the presentation layer of your Drupal site.
Drupal themes allow to:
Drupal also allows to create a sub-themes - based on existing themes.
Drupal to enable and disable themes through the Appearance tab (
?q=admin/appearance). Themes can also be customised to some extent through the settings tab (
?q=admin/appearance, then select
By default, you can toggle the display of several Drupal elements, including logo, site name, site slogan, user pictures, shortcut icon and menus.
You can also upload a custom logo and a custom shortcut icon (favicon).
Global settings (unless overridden) apply to all themes; some per-theme settings are also often available.
Drupal themes consist of a set of file that define and control the features of Drupal nodes:
The .info file defines the name of the theme (which is set to the name of the file, excluding extension) and allows to define a number of features, including:
name = Garland description = A multi-column theme which can be configured to modify colors and switch between fixed and fluid width layouts. package = Core screenshot = images/screenshot.png core = 7.x stylesheets[all] = style.css stylesheets[print] = print.css
.tpl.php files are typically used for the (x)HTML markup and PHP code to modify Drupal's appearance.
Each .tpl.php file handles the output of a specific themable chunk of data.
They are optional, and if none exists in your theme it will fall back to the default output.
Default versions for these files are defined in other Drupal (core) modules. For example, the default version for the
comment.tpl.php template, is defined in the comment module.
Commonly defined template files include:
The full list of Drupal core template files includes several dozens of files.
The template.php file is used for conditional logic and data processing. This includes custom functions, overriding theme functions or any other customization of the raw output.
Basing on intended use, Drupal themes can be classified in two categories:
There are a number of popular Drupal themes available to download in the Drupal web site.
To try them, download and enable them on your own Drupal web site (/?q=admin/appearance) or use a Drupal theme gallery, as drupal7themegallery.com
Popular starter themes include:
More starter themes are available in the Drupal web site.
When testing Drupal themes, you may find yourself installing a theme that breaks your Drupal installation.
To solve it, force a default theme by editing your settings.php file and adding a line like this:
$conf["theme_default"] = "garland";
After your web site works again, comment the line by adding a "#" sign in front of it and upload again.
Download, enable and test (/?q=admin/appearance) the Zen theme and other 2 starter themes of your choice.
Customise the themes by setting your own logo and a "Who's online" block in any of the regions defined by the theme.
Download, enable and test (/?q=admin/appearance) at least three End User themes. A list of popular themes is available here.
Customise the themes by setting your own logo and a "Who's new" block in any of the regions defined by the theme. Do not display the "Who's online" block.
The Color module allows to customise the color scheme of the web site, without any coding.
Download and enable the Color module from the Drupal web site, and create a custom color scheme for the Garland theme (/?q=admin/appearance/settings/garland).
Customising an existing theme is easy:
sites/default(if it doesn't exist) and add a folder for your new theme here (no spaces in the name)
The approach just described is not optimal - why?
Creating a Drupal subtheme allows to keep the link between your theme and the original theme.
Your theme will be just overriding (part of) the original theme.
Writing good CSS is the basis of creating good themes. To debug your CSS and/or to identify page elements, you can use the Web Developer Toolbar or Firebug.
Both tools are available for Chrome and Firefox.
The Zen theme is designed to work through sub-themes. Create a new Zen sub-theme, with the same name of your website (no spaces), by following the instructions in the Zen documentation. If you are at home or if you have earphones, you can also follow this screencast (it's based on using a Mac but most of it can be replicated on Windows).
Customise the subtheme by:
Views is one of the most powerful and complex Drupal modules, allowing you to use a graphical user interface to run queries against a Drupal and to manipulate the visualisation of the results.
You can use Views (amongst other things) to:
Views is a powerful module, but doesn't excel in robustness. When using views, you may experience the occasional problem/bug.
If that's the case, it's worth trying a more recent (e.g. development, or git) version or a more stable one.
We will be using the latest development version; if you are reading this page much after April 2014, it may not be any more the best choice.
Download, install and enable the Advanced Help module and download and install the Views module (Development version).
After the installation, open the Modules page and look for the Views module. You will see that the Views module has a dependency on a module that is not part of Drupal core.
You will have to download, install and enable that module before you can enable Views.
All views rely on a conceptual framework that includes:
Following the Views documentation, create a page to list users by role. The documentation doesn't match exactly the version of Views - so some steps might be slightly different from how they are described.
Step 8 is optional; please note:
Before proceeding with this activity, you need to have a Drupal site with some content and a vocabulary.
Use the Views module to create a View (based on cloning the Tracker view) that will display only nodes that have 2 different taxonomy terms.
This is achieved by using the filtering feature of the Views module.
Use the Views module and edit the front page view to display only nodes from a selection of authors.
Drupal Panels are a way to create complex pages by combining nodes and/or views in a single page.
Download and install the Panels module. Enable all the modules in the Panels category, and the Page manager module.
Panels elements include:
Here is an example of using Panels to create a complex home page.
Create a landing page including an appropriate selection of widgets, suitable to be used as home page.
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License