Customizing Drupal Theme- CSS in detail

From ThemesWiki

Customizing Drupal Theme

Official Page

Project Documentation

Download

Source Book Drupal: Creating Blogs, Forums, Portals, and Community Websites ISBN 978-1-904811-80-0 Publisher Packt Publishing Author(s) David Mercer

With respect to building your site's interface, experience is very important. There are three main technologies that you need to spend some time working with: HTML, CSS, and PHP. In this tutorial we will look at CSS in some detail before setting about modifying the style sheet supplied with our chosen base theme.

Contents 1 CSS 2 Themes 2.1 Choosing a Base Theme 2.2 Configuring Your Themes 2.3 Customizing Your Theme 2.3.1 Images 2.3.2 Colors 2.3.3 Page Modifications 3 Additional References 4 Source

[edit] CSS

The pages in a Drupal site obtain their style-related information from associated style sheets, which are held in the site's theme. Using style sheets gives designers excellent, fine-grained control over the appearance of web pages, and even allows you to produce some great effects. The appearance of pretty much every aspect of the site can be controlled from within a theme, and all that is needed is a little knowledge of fonts, colors, and style sheet syntax.

Before we go any further, it will make life easier if you have a readymade list of the type of things you should look at setting using the style sheet. The following is a list of the most common areas (defined by HTML elements) where style sheets can be used to determine the look and feel of a site's:

• Background
• Text
• Font
• Color
• Images
• Border
• Margin
• Padding
• List

As well as being able to change all these aspects of HTML, you can also apply different effects depending on whether certain conditions, like a mouse hovering over the specified area, are met this will be demonstrated a little later on. You can also specify attributes for certain HTML tags, which can then be used to apply style-sheet styles to those specific tags instead of creating application-wide changes. For example, if you had one paragraph style with a class attribute set, like this:

you could specify this type of paragraph in your style sheet explicitly by saying something like:

p.center { color: green; }

Analyzing this line highlights the structure of the standard style-sheet code block, which appears in the form:

• Selector: in this case p.center
• Property: in this case color
• Delimiter: always :
• Value: in this case green

Note that all the property/value pairs are contained within curly braces, and each is ended with a semi-colon. This introduction to CSS has been very brief, and there are plenty of excellent resources available. If you would like to learn more about this (and it is highly recommended), then visit:

• CSS Discuss: http://css-discuss.incutio.com/
• HTML Dog: http://www.htmldog.com/

[edit] Themes

The use of themes makes Drupal exceptionally flexible when it comes to working with the site's interface. Because the functionality of the site is by and large decoupled from the presentation of the site, it is quite easy to chop and change the look, without having to worry about affecting the functionality at all. This is obviously a very useful aspect because it frees you up to experiment however you please knowing that, if worst comes to worst, you can reset the default settings and start from scratch.

You can think of a theme as a template for your site, which you can modify in order to achieve the look and feel you want. Of course, different themes have wildly varying attributes; so it is important to find the theme that most closely resembles what you are looking for in order to reduce the amount of work you need to do.

Accordingly, the first task we need to complete is

[edit] Choosing a Base Theme

By default, Drupal ships with a few default themes and there are quite a few more available in the Downloads section of the Drupal site.

Looking at what's already present on the themes page in Drupal, we can see the following:

You might be wondering why it is possible to enable as many themes as you like, yet select only one as the default. The reason for this is that if you enable more than one option, then these options are available for users (assuming they have sufficient permissions) to select by editing their Theme configuration preferences on the edit tab of the my account page as shown here:

In this case, bluemarine, chameleon, and marvin have all been enabled, with bluemarine selected as the default. Users can then themselves select their preference for how they wish to view the site.

Back to the list of available themes! Enabling the pushbutton theme, and setting it as the default, causes the site, which has been presented in the standard bluemarine theme up until now, to look something like this:

This is a fairly vast change from the previous look provided by the bluemarine theme; however, you should be able to spot the fact that the generic layout hasn't changed much there are still three columns, there is a heading section containing the site name and logo, there is a navigation section and various boxes, and so forth. What have changed are the fonts, colors, and a few images notice in particular that there is now a background image in the heading section of this theme.

That is not the end of the story, because the Drupal site also has a whole bunch of themes for us to explore, so let's head on over to the themes page at http://drupal.org/project/Themes and select the relevant version tab to bring up the themes that are available for your installation of Drupal. Please make note that some of these themes require you to download a theme engine the Box_grey_smarty contribution is an example of a theme that requires the Smarty theme engine in order to function.

You have already seen how to download and install other modules, and the process for installing themes is no different simply download and extract the contents of the desired theme to your themes folder. For example, the box_grey theme was downloaded, and provides us with two new options in our list of themes, as shown here:

Enabling the box_grey option and setting it as the default causes the site to look like this:

You now have a bunch of default themes to choose from as well as a couple of contributed ones to look over. Once you have decided on one you like, there are a few things to contend with before moving to the next phase. As you might have expected, we can configure the theme by simply clicking on the configure link on the themes page, so let's take a look at that here.

[edit] Configuring Your Themes

Clicking on the configure tab at the top of the themes page brings up the global theme options, which will influence each theme regardless of which one is being used useful if you know that you always want certain features enabled (it's also easy enough to navigate between global and theme-specific settings using the links given at the top of the configure page).

We will concentrate on the global settings page here as this is representative of all the theme configuration pages, so you won't have any problems working on each one individually. Remember that you can override these settings by working on the configure page of a specific theme.

The first section allows you to either use the default logo supplied with the theme, or alternatively, specify a path to your own logo or upload a new logo to the site:

In the case of the demo site, we will be making use of a background image to display the logo and name; so this can be unchecked. If you have a site logo, or plan to have one, then simply upload it here.

Drupal also provides us with the ability to specify which content types require post information to be displayed. Now, we have already seen that there are certain types of pages for which we don't need to display this type of information for example, the about us page should be presented as is without informing users precisely who created it.

The reason for the settings as shown in the last screenshot is that it is important to identify a blog posting with the person who posted it, and likewise for forum topics. However, when it comes to things like polls, pages, book pages, or stories, it is less important to do so often because these sorts of things will be handled by site administrators anyway. For the moment, I have left the page type as the only type to forgo post information.

Please bear in mind that you need to think about what makes sense for your site and apply the settings that reflect your specific needs. For example, it may well be important to identify who has contributed certain book pages so that the authors can be contacted in case there is a need to query or modify content on the book page (especially since books are generally collaborative efforts).

The following section allows you to specify Logo image settings and an icon that will be displayed in the site's address bar and in any bookmarks. Once again, what you use here is really up to you. For the purposes of our site, we need not create a specific icon, and we don't yet have a logo to upload; so we can leave things blank for the moment.

The rest of the configure page looks like this as a result:

As you might have guessed, everything has been left blank because we are not specifying anything new and we don't want the default logo or icon to display.

[edit] Customizing Your Theme

Up until now, any settings or changes you have made have been fairly generic. Things are about to change as we begin to implement some more radical modifications that will require amendments to the style sheet in order to get things just right. In the case of the demo site, I have chosen to work with the box_grey theme as this most closely resembles the look that is envisaged and has features that are suitable for learning purposes.

Here is some information about box_grey, from their readme file:

box_ is intended to be relatively easy to modify for those that aren't competent in CSS positioning. Instead of using entirely CSS for layout it is a so called hybrid layout it uses CSS combined with very simple tables.

It is a standard three-column layout using a table for the central three columns with a header above the table and a footer below. This reduces accessibility and adds a little code bloat but has certain advantages:

• The content columns won't overlap if a user inserts wide content.
• The content appears in the template (page.tpl.php) in the order it appears on the page.
• You can add any sized logo image; the header should expand to fit.

These features are useful from the point of view of learning how to work with style sheets and this will not only give you an effective means of customizing the look of your site, but also build a platform from which you can attempt some more advanced customizations on other themes when you are ready.

Navigate to the themes folder in your Drupal installation and make a copy of the box_grey folder, naming it box_grey_dev. This allows us to work on a development version of the theme without putting the original files at risk. Go back to themes in your Drupal administer section and enable the new box_grey_dev theme, setting it as the default. It is important you do this so that you know that you are viewing the correct theme when you check to see what effect any changes you make have on the look of the site.

Now, opening up the box_grey_dev folder, you will notice that there are a few .tpl.php files, namely:

• node.tpl.php
• page.tpl.php
• image_gallery.tpl.php

which are responsible for the layout of their namesakes. For example, a snippet of the code in page.tpl.php looks like this:

<table id="content">
  <tr>
  <?php if ($sidebar_left != ""): ?>
  <td class="sidebar" id="sidebar-left">
  <?php print $sidebar_left ?>
  </td>
  <?php endif; ?>
  <td class="main-content" id="content-<?php print $layout ?>">
  <?php if ($title != ""): ?>
  <h2 class="content-title"><?php print $title ?></h2>
  <?php endif; ?>
  <?php if ($tabs != ""): ?>
  <?php print $tabs ?>
  <?php endif; ?>
 
  <?php if ($mission != ""): ?>
  <div id="mission"><?php print $mission ?></div>
  <?php endif; ?>
 
  <?php if ($help != ""): ?>
  <p id="help"><?php print $help ?></p>
  <?php endif; ?>
 
  <?php if ($messages != ""): ?>
  <div id="message"><?php print $messages ?></div>
  <?php endif; ?>
 
  <!-- start main content -->
  <?php print($content) ?>
  <!-- end main content -->
  </td><!-- mainContent -->
  <?php if ($sidebar_right != ""): ?>
  <td class="sidebar" id="sidebar-right">
  <?php print $sidebar_right ?>
  </td>
  <?php endif; ?>
  </tr>
 </table>

As you can see, this uses HTML to create a table that defines the content of each page. It uses a bunch of PHP if statements to check whether or not, for example, to display things like the left‑hand sidebar or even the mission statement. The PHP code is embedded within HTML tags, which have certain attributes associated with them like id="mission" or id="message". Don't worry about how these PHP variables are populated; we don't want to alter the way in which the site functions, we are simply looking at how it is laid out.

But why have they bothered to set the class and id attributes for different sections of the HTML page? This is where the power of CSS comes into play. We already know that we want to create a consistent look for our site. What this means is that every type of related content should have the same look and feel in other words, the content of each page should be presented in a similar manner. This being the case, we can classify a class or id of content to be of a certain type, and then, using that attribute tag, specify how it should be laid out within the style sheet.

You should be asking for proof, and here it is

Open up the style.css file in the box_grey_dev theme and search for the snippet of code that reads:

 body {
  color: #000;
  background: #fff;
  font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
  font-size: 84%;
  padding: 0;
  margin: 0;
 }

Change this to:
 body {
  color: #000;

background: #8E6C63;
  font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
  font-size: 84%;
  padding: 0;
  margin: 0;
 }

Save these changes, and refresh the view of your Drupal site in your browser. You should now find that the content on your page has changed so that your pages look something like this:

A single change to the body tag in the style sheet has changed the background color throughout each and every page of the whole site. This is quite a powerful and useful property of style sheets, and is precisely why everyone uses them so much nowadays. You can change this back to your original setting or leave it as is it makes no difference at the moment since it will no doubt change once you have decided on a color scheme for your site.

Now that you know how to implement a change and view the effects of this change on your site, you are ready to continue with modifying the style sheet to reflect how you want the site to look. In the sections that follow, we will discuss several different types of modifications, without grinding through each and every one and there are a lot of different properties associated with web pages, believe me! Once you have the hang of making changes in one area, it is easy to apply that knowledge somewhere else, so you should find the coverage here sufficient to get you up and running with confidence.

One of the first tasks required for the demo site is to create and upload an image that will serve as the logo and title in the header section of the site.

[edit] Images

Images and background images can be tricky to work with because they are generally a fixed width in length, unlike web pages, which can be resized. It can look quite awful if an image stops short of the page size or is in the wrong place, and so we need to work out how to make our images blend into the site so that viewers working on different screens don't end up seeing un-neat images.

In the case of the demo site, I wanted a rough and fairly evocative scene in nature, and what better to use than a sunset shown through African bush (notice that the site's name/logo is actually part of this image, which is why we have done away with the standard site name and logo):

In order to present this on the site, however, we need to do a bit of work with the style sheet. Also, we want this to be presented right up against the top left-hand corner of the page so this will effectively be our site's logo image. Adding this as the site's logo is a simple matter of uploading it in the theme's configure page as shown here:

and ensuring that the Logo option is enabled for this particular theme. Since you have access to the file system, you could also copy the image directly to the files folder and then reference it from the Path to custom logo text box directly above the Upload logo image box:

You could also simply save the new logo image over the old original one, and it will display as normal too.

If you find that you are having problems with viewing this image, then it is most likely that your File system settings in the settings section of the administer menu are at fault. Check them to ensure that you are saving files to the correct places and that you are then attempting to access them from the correct place.

With that done, we can now take a look at the site to see the effect this has had:

Oh dear! This doesn't look very good at the moment, because if you look carefully, the new image is offset to the right (as well as downwards, even though this may not be so noticeable in the screenshot). In order to rectify this we will need to take a look at the cause of the offset. To do this, we need to find out which code is responsible for displaying this area of the page.

Looking near the top of the page.tpl.php file we see the following:

<div id="header">
  <?php if ($search_box): ?>
  <form action="<?php print $search_url ?>" method="post">
  <div id="search">
  <input class="form-text" type="text" size="15" value="" name="edit[keys]" /><input class="form-submit"
 type="submit" value="<?php print $search_button_text ?>" />
  </div>
  </form>
  <?php endif; ?>

<?php if ($logo) : ?>

<a href="<?php print url() ?>" title="Index Page"><img src="<?php print($logo) ?>" alt="Logo" /></a>

<?php endif; ?>

The highlighted code at the bottom of this snippet is responsible for displaying the site's logo (depending on $logo ). As you can see this section uses header as the id attribute for the <div> tag, so we should be able to find out what's going on by looking this up in the style sheet. Sure enough, we find the following two header-related tags, which affect our image's position:

 #header {
  position: relative;
  padding: 1em 0 0 0;
  margin: 0;
 }
 #header img {
  margin: 0 0.75em 0 1em;
  float: left;
 }

Both of these can be modified to remove the padding and margin that cause the unwanted offset, as follows:

 #header {
  position: relative;

padding: 0 0 0 0;
  margin: 0;
 }
 #header img {

margin: 0 0.75em 0 0;
  float: left;
 }

With these changes saved, you will find that the image is displayed in the desired position. Obviously, you could add padding or change the margins associated with the image as you please.

It is important to realize at this point that changes like this might not be limited only to the area you intend. It may so happen that making a change meant to correct one area actually harms another area in this case, the loss of padding might have caused images in other areas of the heading, if we were using any, to look bad. How can this problem be resolved? You already know that we can add certain attributes to certain tags on a page. To solve this problem, you would add your own custom tag to the area to be altered, and reference it from the style sheet, giving it the properties you require.

Of course, you might want to add a background image to your site too. If you do intend to use background images, make sure that they don't affect the usability of the site. Don't distract or hinder the user in any way from viewing the content. If you are sure that your background image won't be detrimental in any way, then the use of the background property is the way forward.

For example, I modified the body block in the style sheet as follows:

 body {
  color: #000;
  font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
  font-size: 84%;
  padding: 0;
  margin: 0;

background: url(http://localhost/drupal/files/block_background.png) no-repeat top;
 }

From this you can see that the background attribute can actually do far more than specify the color to be used we are not even specifying a background color at the moment because we will deal with colors shortly. In this case, it also sets an address where the background image is to be found. It forces the browser not to repeat the image (we don't want a busy pattern of repeated images in the background cluttering up the site), and finally tells the browser to render the image at the top of the body area. Assuming you have in fact created an image that you want to use (in this case the image is entitled block_background.png ) and have ensured that it is small, you would end up with something like this:

As you can hopefully tell, this background image is fairly unobtrusive and doesn't make it particularly difficult to read any of the content, although, quite clearly, it not the same color as the background yet. Of course, you aren't limited to adding background images to the body of the site you can add them in other places too. Just check which HTML tags support the background or background-image options first.

Before we move on to look at colors, it is important to realize that there is an unfortunate problem with the way things have been done here. Can you spot it? Think about will happen when these changes are deployed to your live site. What is the URL of that domain going to be? It is certain that it will not be http://localhost/drupal ; so when the time comes for your style sheet to go off in search of your background image by looking for http://localhost/drupal/files/ block_background.png , it is going to fail.

( Note - Consider adding all theme-related images to the actual theme folder and not simply uploading them to the standard files folder. )

Let's try this out by creating an images folder under box_grey_dev. Insert your background image into this folder and then change the absolute URL http://localhost/drupal/files/ block_background.png to the relative URL images/block_background.png and confirm that you get the expected result.

Now, when the time comes to deploy your site, you won't have the problem of losing images, because the relative URL paths are conserved it is the absolute paths that change.

[edit] Colors

With the new images in place, you might have noticed that neither fits well with the rest of the site because it is currently white by default. In order to rectify this, we are going to change the background color of the site's body tag to the following color:

 body {
  color: #000;

background: #BEBEBE url(images/block_background.png) no-repeat top;
  font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
  font-size: 84%;
  padding: 0;
  margin: 0;
 }

The site now looks a little better with that modification. The background image integrates seamlessly and the header image now fades into the correct color so that there is a natural transition between the image and the rest of the page as users expand the width of their browsers.

With the change in background color, however, a host of changes need to be made to other colors, especially the colors used for hyperlinks. Of course, it's not even necessary to change the background color! I could have always blended the header image with the default color, or made the background of the background image transparent, but let's continue on with some more changes to get an idea of what can be done.

Now, there can be as many or as few changes as you like to your site's colors. You have already seen that changing the color of an attribute such as background or color is simply a matter of inserting the new color code into the correct place; now we will make a list of the more interesting changes as follows.

''Hyperlinks'':
 a, a:link { color: #3A3730; }
 a:visited { color: #111111; }
 a:hover, a:focus { color: #888888; }
 a:active { color: #444444; }
 .sidebar .block a:hover { color: #444444; }
 
#primary a:hover { color: #777; }
 ''Sidebars'':
 .sidebar .block {
 background: #E5E5E5;
  border: solid 1px #999;
  margin: 0 5px 5px 5px;
  padding: 0 5px 5px 5px;
 }

''Input'':
 input, textarea {

background: #E5E5E5;
  color: inherit;
  border: 1px solid #777;
 }

''Footer'':
 #footer {
  color: #666;

background: #E5E5E5;
  border-top: solid 1px #777;
  padding: 1em 1em 1em 1em;
  font-size: 0.9em;
  text-align: center;
 }

''Primary'':
 #primary {
  font-size: 1.2em;
  border-top: solid 1px #999;

border: solid 1px #999;

background: #E5E5E5;
 }

Once all the color changes have been made, a standard page might look something like this:

The site as it now stands is easy to use, and hopefully you will agree that the color co-ordination is at least easy on the eye. Remember when making your own adjustments that there are plenty of color-related settings in the style sheet, so you really need to go through your site with a fine-tooth comb to ensure that there are no nasty surprises when links disappear because they are very similar in color to the background and so on.

[edit] Page Modifications

It's entirely possible that the actual layout of the page is not to your liking. In this case, there are two options open to you when it comes to effecting change. The style sheet can be used for limited numbers of change. For example, if you found that the sidebars were too narrow for the site, they can be broadened (or narrowed if required) to a fixed width in pixels, by altering the following block:

 td.sidebar {
  vertical-align: top;
  padding: 0;

width: 200px;
 }

But what if you needed some more drastic alterations to the site? Let's say, for example, that you wanted to add an extra column to each page in order to insert some advertising in the hope that you could generate some revenue from the site. In order to do this we need to look at the page.tpl.php file, since this is where the layout of each page is controlled. Depending on how adventurous you are, you could add some conditional PHP code in order to display the column with its advertising only at specific times. For our purposes, it is enough to simply add the new column.

Incidentally, the advertising we will use for the demonstration comes directly from the Amazon associates site, and if you are interested in using this type of advertising, make sure you check out the various Amazon-related contributions on the Drupal site. For the moment, the important bit is seeing how to add the column you can take a look at the contributions or Amazon associates at your leisure.

Let's say we want the column to appear on the far right-hand side of the page, after the right sidebar, so that it doesn't really impinge on the use of the site in any appreciable way. If this is the case, we need to find the spot in the code where the right sidebar is added, and add the new column in there. Look for this snippet of code in the page.tpl.php file:

  <td class="sidebar" id="sidebar-right">
  <?php print $sidebar_right ?>
  </td>

As you can tell, this is responsible for adding a table cell that contains the right sidebar. Simply adding another cell after this should do the trick, so let's go ahead and try that. Make the following changes to the file:

  
<?php if ($sidebar_right != ""): ?>
  <td class="sidebar" id="sidebar-right">
  <?php print $sidebar_right ?>
  </td>
  <?php endif; ?>

<td valign="top" width="120">

<iframe src="http://rcm.amazon.com/e/cm?t=**************&o=1& p=11&l=ez&f=ifr&f=ifr" width="120" height="600" 
 scrolling="no" border="0" frameborder="0" style="border:none;"></iframe>

</td>
  </tr>
 </table>

There are several important points to note here. Firstly, the new cell, enclosed by <td> tags, was placed after the PHP if statement because we don't want it subjected to the same conditions as the right sidebar (it should simply display on every single page).

Secondly, as well as content being vertically aligned at the top of the cell, the width of the cell is given as 120 pixels because we know from the Amazon code that the width of the advertisement is always 120 pixels (this is because we have selected the ad to be of a specific dimension). Finally, the advertisement code that has been added is provided by Amazon, and if you wish to obtain ads like this, then at some stage you will need to register with Amazon to obtain your ID (blanked out in the previous code with * symbols).

Taking a look at the site now shows that the advertisement is displayed as expected:

Of course, there are plenty of different things you may want to achieve on your pages, so spending some time playing around with the code will help you out later on when you need to make more serious changes to the site. You might even want to add banner ads in the header section. Recall that we cheated slightly by turning the site's logo space into the whole header. Doing this means that there is still space allocated for other things within the header (even though this is not visible) and as an exercise you might want to see if you can make use of this space.

This reminds me to reiterate...

Testing your layout goes deeper than simply checking if everything is in the correct place. It is important that you ensure CSS and HTML is valid and correct, and resources to achieve this are available automatically in box_grey. Simply scroll down to the bottom of the page until you see this:

Once your site is up and running on the Internet at a public domain, clicking on these links will help you ensure that your layout code is valid. If any problems are reported, then it is up to you to ensure that your site complies as closely as possible. Unfortunately, if you try this from your development machine you will more than likely receive an error message because these services will only work on public domains.

[edit] Additional References

• For instructions on building Drupal themes, click here
• For instructions on installing Drupal, click here

[edit] Source

The source of this content is Chapter 8: Drupal's Interface of Drupal: Creating Blogs, Forums, Portals, and Community Websites by David Mercer ( Packt Publishing, 2006).