One of Drupal’s greatest strengths is its robust and flexible architecture. With the exception of a very few critical aspects of core, you can override just about everything in Drupal. Its architecture provides a reliable way of doing so, as you have seen with the sites folder, which can contain folders for your own themes, modules, and libraries. By providing you with a place to put your customizations, many people find that they never need to touch Drupal’s code. If you do need to write code, you write what you want and place it in your sites folder where it is separate from Drupal’s code. However, Drupal uses code from the sites folder if it finds it, so the link between your customizations and Drupal’s code is clearly defined without you actually touching Drupal’s code.
As Drupal has evolved, many people have modified the code and added modules and themes to Drupal using this structure. Those modifications have focused on two areas: new functionality (such as the contributed modules described in this book) and improvements to Drupal’s usability for its users who are building websites.
Drupal is now at a time of transition as the increases in usability have made Drupal available to people with no skill or interest in writing PHP code (and who may also not be interested in studying thousands of pages of documentation or figuring out how things work by reading the code and experimenting with it). If you think back on the topics covered in this book—polls, shopping carts, user-contributed content, dynamic views, panel pages, RSS feeds, and the rest, it is truly amazing that they are all available to you without writing any code. This is one of Drupal’s greatest strengths compared to traditional handcrafted HTML. Think of how you would create an HTML-based website with those features and without writing code.
This hour is the closest you will come to code, and the “code” here is not programming code. Like many websites and systems today, Drupal uses Cascading Style Sheets (CSS) to modify the appearance of its pages. You can customize the CSS for your site so that it looks exactly as you want it. Many people make the mistake of thinking that they need to create custom themes for their Drupal site. Although that is true for some sites, it is not true for all of them. In fact, starting from a basic theme (either one of the themes distributed with Drupal or a contributed theme), you can achieve amazing customizations using two simple techniques:
• CSS— Customize the CSS. CSS files are designed to be modified. Sitting down to write a CSS file can be daunting for someone who has not done it before. But, most people do not do that. The most common way of working with a CSS file is to modify it by changing fonts, colors, and dimensions. That is a much less complex task than starting from scratch.
• Background images— Nothing customizes a theme more than a background image of your own. You can easily do that with CSS.
This hour walks you through the basic and highly effective ways of customizing your site.
Files distributed as part of Drupal are located in the themes folder. Themes you download should be placed in your sites/all/themes folder (you may need to create it). Each theme consists of a folder containing all its files. The key file you need to be aware of is the info file. It includes the theme name so that, for example, the Garland info file is garland.info.
The info file contains a summary of the theme; the section you may need to modify relates to CSS files.
A number of Drupal themes are specifically designed for customization. One of them is Zen, which provides step-by-step comments to help you customize particular aspects of your site.
Here is the Drupal 7 version of garland.info. If you compare it to the list of themes displayed in Drupal, you will see that the description is what is shown on that page. Two CSS files are listed: style.css is used as the default, and print.css is used for print media. (The media type is the key in the first set of brackets.) By default, a file named style.css is the file that is used, but you can rename or replace it.
The first few lines of the file with the ID, name, description, and version information not for you to modify, and the final lines, which have been added automatically by the Drupal packaging script, are also not for you. You worry only about the lines between; in Garland, those are the two style sheets lines.
If you want to customize the Garland CSS file, here is the simplest and safest way to do so.
Acquia Slate is a free downloadable theme from Top Notch Themes. It is shown in Figure 24.1.
It is much more complex than Garland, but even so, the acquia_slate.info file is not long and follows the same basic structure as that of garland.info.
Again, it is the style sheets lines that you care about. You can see where the theme’s regions are defined, and you can see that the theme exposes its options, such as whether to display the logo or the name. These are of interest, but all you need to do is locate the style sheets lines:
Of the three stylesheets lines, the third one is commented out with the semicolon at the beginning of the line. This theme uses a slightly more structured approach to your customization than does Garland and some other themes. It includes this commented-out line so that you can easily uncomment it.
There also is a local_sample.css file as part of the theme’s files. It is an empty shell. Copy it, change its name to local.css, and you have the file to match the uncommented style sheets line. Because CSS files are applied in order, by having this file as the final one, its settings will override the CSS files that precede it. Thus, your local.css file needs to contain only your customizations.
Nothing changes the look of a theme more than its images. These images are used for buttons and icons as well as sometimes for background images. If you keep your replacement images the same size, you minimize your work (and maximize the effect).
In the case of a background image, start from a theme that already has an image of the size and shape that you want. Most downloadable themes ship with a stock image (if there are any images at all), so make your choice based only on size and shape of the background image. By picking a theme with the right size and shape for the image, you minimize your work.
Try It Yourself: Replace a Background Image
After you locate a theme with a background image of the right size and shape, you can download and install it and then replace the image. Explore the theme sufficiently; it may have several versions of the image. For example, there may be a large version on the front page and smaller versions on interior pages.
- Locate the background image or images that ship with the theme. Many themes use an
imagesfolder, and some have a subfolder for background images. In the case of the Acquia Slate theme used as an example in this hour, the background images are located inimages/cropped. The front page image isseascape.jpg, and the smaller one for interior pages isseascape-header.jpg. - Open each of the images in an application, such as Preview or Photoshop. Note the exact size of each image.
- Adjust your image (or images) to be exactly the same size as the corresponding stock image. Check that the resolution matches so that you are not accidentally downloading an enormous file.
- Give the images new names and place them in the folder with the stock images. (You can place them anywhere you want, but this is usually easiest.)
- Locate the code that places these images. The easiest way to do this is to use the existing CSS files and search for the image name. For example, in Acquia Slate’s style.css file, you will find this code to place the large image on the front page:
Here is the code to place the smaller image at the top of content pages:
- Create a file for your CSS overrides. In the case of Acquia Slate, it will be
local.css, as described in the previous section. - Add to that file the code you located in step 4. Change the names to the names of the new files. Here is what your override file might look like now:
- Go to (D6:
admin/settings/performance; D7:admin/config/development/performance). Click Clear Cached Data (D6) or Clear All Caches (D7). Click Save Configuration. - Check your site.
Adding your own graphics and images to your website is the fastest way to give it a totally customized look. As you have seen in this hour, it is easy to do this kind of customization.
One of the criteria that you should use in selecting themes for your site is the ease of this type of customization. Check that themes use the standard file structures and naming conventions so that you can make changes just by modifying the info file and customizing or overriding a CSS file.
Q. In addition to modifying CSS and images, what other major design changes to a Drupal site are easy to do?
A. Explore the Charts module (project/charts) if you have quantitative data. Look through Drupal modules for wrappers to mapping services. Consider adding a CCK image field to your primary node types so that your site is less text heavy, if that is a problem.
Q. What are the laws about using copyrighted images as background images?
A. They vary. You can license stock images that you can use without worrying. However, most people find that the simplest way to get customized background images is to take them yourself. If people are present, you may need a model release from them so that you can use their likenesses.
Q. If I want to use different size images, how difficult is that?
A. This depends on how different they are. The simplest way is to try one or two to see if there is collateral damage from an image that may not fit into the space on the page allotted for it. In many cases, there are few problems. As long as the center of interest in the image is in the center, slight cropping of the edges is often not an issue.
Q. I like the transparent effect. How hard is that to achieve?
A. The effect itself is easy to achieve with CSS. The challenge is creating an image that works with transparency. Look at background images that have type laid over them, and you will often see that one part of the image (usually top or bottom) is lighter or darker than the rest. This lets you place dark or light type on top of this area and have it be readable. You may have to work backward from the overlaid text to find the type of image that works best behind it.
1. How do I determine what CSS files are used on my site?
2. In addition to checking the size of new images, what else should I check?
3. What are those rtl CSS files?
You have considered all the major aspects of developing a Drupal site. The only activities left are contributing to the Drupal community. This may mean contributing themes and modules, or it may mean volunteering to help with testing.
There are frequent conferences of Drupal developers, and you may want to participate in these. You can go to groups.drupal.org to find groups of people who may be interested in the same type of projects you are working on.
As Drupal moves into its next phase, there are increasing opportunities for Drupal users who are not interested in writing code for themes and modules to share experiences and advice in the development and maintenance of Drupal sites.