Modifying an Existing Theme in Drupal 6: Part 2

Exclusive offer: get 50% off this eBook here
Drupal 6 Themes

Drupal 6 Themes — Save 50%

Create new themes for your Drupal 6 site with clean layout and powerful CSS styling

$23.99    $12.00
by Ric Shreves | August 2009 | Drupal Open Source

Read Part One of Modifying an Existing Theme in Drupal 6.

Adapting the CSS

We've set up Tao as a subtheme of the Zen theme. As a result, the Tao theme relies upon a number of stylesheets, both in the Tao directory and in the parent theme's directory. The good news is that we do not need to concern ourselves with hacking away at all these various stylesheets, we can instead place all our changes in the tao.css file, located in the Tao theme directory. Drupal will give precedence to the styles defined in the theme's .css file, in the event of any conflicting definitions.

Precedence and inheritance

Where one style definition is in an imported stylesheet and another in the immediate stylesheet, the rule in the immediate stylesheet (the one that is importing the other stylesheet) takes precedence.

Where repetitive definitions are in the same stylesheet, the one furthest from the top of the stylesheet takes precedence in the case of conflicts; where repetitive definitions are in the same stylesheet, nonconflicting attributes will be inherited.

Setting the page dimensions

For this exercise, the goal is to create a fixed width theme optimized for display settings of 1024 x 768. Accordingly, one of the most basic changes we need to make is to the page dimensions. If you look at the page.tpl.php file, you will notice that the entire page area is wrapped with a div with the id=page. Open up the tao.css file and alter it as follows. To help avoid precedence problems, place all your style definitions at the end of the stylesheet.

Let's modify the selector #page.

#page {
width: 980px;
margin: 0 auto;
border-left: 4px solid #666633;
border-right: 4px solid #666633;
background-color: #fff;
}

In this case, I set page width to 980 pixels, a convenient size that works consistently across systems, and applied the margin attribute to center the page. I have also applied the border-left and border-right styles and set the background color.

We also need to add a little space between the frame and the content area as well to keep the presentation readable and clean. The selector #content-area helps us here as a convenient container:

#content-area {
padding: 0 20px;
}

Formatting the new regions

Let's begin by using CSS to position and format the two new regions, page top and banner.

When we placed the code for the two new regions in our page.tpl.php file, we wrapped them both with divs. Page top was wrapped with the div page-top, so let's create that in our tao.css file:

#page-top {
margin: 0;
background-color: #676734;
width: 980px;
height: 25px;
text-align: right;
}

The region banner was wrapped with a div of the same name, so let's now define that selector as well:

#banner {
background-color: #fff;
width: 980px;
height: 90px;
text-align: center;
}

Setting fonts and colors

Some of the simplest CSS work is also some of the most important—setting font styles and the colors of the elements.

Let's start by setting the default fonts for the site. I'm going to use body tag as follows:

body {
background: #000;
min-width: 800px;
margin: 0;
padding: 0;
font: 13px Arial,Helvetica,sans-serif;
color: #111;
line-height:1.4em;
}

Now, let's add various other styles to cover more specialized text, like links and titles:

a, a:link, a:visited {
color: #666633;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
}
h1.title, h1.title a, h1.title a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #666633;
font-size: 200%;
margin: 0;
line-height: normal;
}
h1, h1 a, h1 a:hover {
font-size: 140%;
color: #444;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0.5em 0;
}
h2, h2 a, h2 a:hover, .block h3, .block h3 a {
font-size: 122%;
color: #444;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0.5em 0;
}
h3 {
font-size: 107%;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h4, h5, h6 {
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#logo-title {
margin: 10px 0 0 0;
position: relative;
background-color: #eaebcd;
height: 60px;
border-top: 1px solid #676734;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #676734;
}
#site-name a, #site-name a:hover {
font-family: Verdana, Arial, Verdana, Sans-serif;
font-weight: normal;
color: #000;
font-size: 176%;
margin-left: 20px;
padding: 0;
}
#site-slogan {
color: #676734;
margin: 0;
font-size: 90%;
margin-left: 20px;
margin-top: 10px;
}
.breadcrumb {
padding-top: 0;
padding-bottom: 10px;
padding-left: 20px;
}
#content-header .title {
padding-left: 20px;
}

After you have made the changes, above, remember to go back and comment out any competing definitions that may cause inheritance problems.

Drupal 6 Themes Create new themes for your Drupal 6 site with clean layout and powerful CSS styling
Published: September 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

After you have made the changes, above, remember to go back and comment out any competing definitions that may cause inheritance problems.

Formatting the sidebars and footer

The left sidebar is unused in this theme, but the right sidebar region is essential, as it contains the main navigation and several blocks. The way the CSS is written, the style definitions for left and right sidebar are combined; we'll maintain that for convenience.

#sidebar-left .block, #sidebar-right .block {
padding-bottom: 15px;
margin-bottom: 20px;
}

The titles of the blocks in the sidebar are controlled by the h2 tag. Let's add a definition for the h2 tags that appear inside the right sidebar region:

#sidebar-right h2 {
background-color: #676734;
display: block;
color: #eaebcd;
font-size: 110%;
font-weight: normal;
font-family: verdana;
line-height: 1.5em;
padding-left: 10px;
}

I want the footer in this theme to anchor the page and to mirror the look and feel of the page top region we created earlier. The footer region is wrapped with a div of the same name, so I need to modify #footer in my stylesheet, as follows:

#footer-wrapper {
margin: 0;
}
#footer {
background-color: #676734;
color: #FFF;
margin: 0;
font-size: 100%;
height: 25px;
}
#footer a {
color: #fff;
}

Formatting the menus

The top and footer menus require a horizontal presentation, while the main nav in the right column requires a vertical orientation. In all three cases, we also need to make sure the menu style matches the rest of the site.

Creating the horizontal menu

First, let's set up horizontal presentation for the primary links menu, which appears at the top of the page. I want the links to appear in a horizontal line, aligned to the right:

#page-top li {
display: inline;
float: right;
padding: 5px;
font-size: 14px;
font-weight: bold;
padding: 5px 10px;
}
#page-top li a {
color: #fff;
}

Next, let's do the same for the navigation inside the footer region, again, with right alignment:

#footer li {
display: inline;
float: right;
font-size: 14px;
font-weight: bold;
padding: 5px 10px;
}

Formatting the vertical menu

I want to control the styling of the menu in the right sidebar (our Navigation menu), so I will add the following:

#sidebar-right ul.menu {
border-top: 1px solid #676734;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #676734;
background-color: #eaebcd;
color: #676734;
font-weight: bold;
font-family: verdana;
font-size: 14px;
line-height: 22px;
}

Formatting the search box and syndicate button

The search box formatting needs to be modified to fit our new theme. #search-box handles the formatting and is located in the layout-fixed.css, so let's kill the old selector and substitute ours. Let's set the position:

#search-box {
position: absolute;
padding: 0;
top: 20px;
right: 20px;
}

Next, let's adjust the colors to match our new color scheme:

#search-box .form-text, #user-login-form .form-text {
color: #444;
border: 1px solid #000;
padding: 2px;
}
#search-box .button,
#search-box .form-submit,
#user-login-form .button,
#user-login-form .form-submit {
background-color: #676734;
color: #fff;
font-weight: bold;
border: 1px solid #000;
padding-left: 20px;
padding-right: 20px;
}

The syndicate button will appear on both the right column and the left bottom corner. Let's open some space around it by adding this definition:

.feed-icons {
margin: 20px;
}

Formatting the comments form and output

We enabled the comments functionality earlier, let's now set the look and feel. The comments in the default Zen theme are shaded a light blue, consistent with the Zen color scheme. For Tao, we want to make things a little more conservative, a little more somber, so we will change that to a light gray and also apply our font selections.

Make the following changes to the selectors, below:

.comment {
margin: 0 0 10px 0;
padding: 10px;
background: #f1f1f1;
}
.comment h3.title, .comment h3.title a {
font-size: 122%;
color: #666;
font-weight: normal;
font-family: Verdana, Arial, Sans-serif;
margin-bottom: 3px;
margin-top: 0;
padding-left: 0;
}
.comment .new {
color: #FFC600;
font-weight: bold;
font-family: Arial, Verdana, Sans-serif;
}

If what you see on your screen at this point is not largely similar to the image at the end of the article, odds are you skipped a style definition or have missed commenting out a selector; go back and check the stylesheets to make sure you deleted or commented out any potential inheritance problems.

Adapting the themable functions

We don't really need to make a large number of changes to our themable functions to achieve our goals, but we will make some minor modifications to bring more consistency to the new look and feel.

Overriding a themable function

The Zen theme includes a themable function for handling the breadcrumb trail. The function is located in the zen/zen/template.php file and looks like this:

function zen_breadcrumb($breadcrumb) {
$show_breadcrumb = theme_get_setting('zen_breadcrumb');
$show_breadcrumb_home = theme_get_setting('zen_breadcrumb_home');
$breadcrumb_separator = theme_get_setting('zen_breadcrumb_
separator');
$trailing_separator = (theme_get_setting('zen_breadcrumb_trailing')
|| theme_get_setting('zen_breadcrumb_title')) ? $breadcrumb_separator
: '';
// Determine if we are to display the breadcrumb
if ($show_breadcrumb == 'yes' || $show_breadcrumb == 'admin' &&
arg(0) == 'admin') {
if (!$show_breadcrumb_home) {
// Optionally get rid of the homepage link
array_shift($breadcrumb);
}
if (!empty($breadcrumb)) {
// Return the breadcrumb with separators
return '<div class="breadcrumb">' . implode($breadcrumb_separator,
$breadcrumb) . "$trailing_separator</div>";
}
}
// Otherwise, return an empty string
return '';
}

I want to add a label to help clue people into the function of the breadcrumb. To do this, I must first copy the original function from the Zen directory and paste it into my tao/template.php file. I need to also rename the function to reflect my theme name (from Zen to Tao). The modifications look like this:

function tao_breadcrumb($breadcrumb) { 
$show_breadcrumb = theme_get_setting('zen_breadcrumb');$show_
breadcrumb_home = theme_get_setting('zen_breadcrumb_home');
$breadcrumb_separator = theme_get_setting('zen_breadcrumb_
separator');
$trailing_separator = (theme_get_setting('zen_breadcrumb_trailing')
|| theme_get_setting('zen_breadcrumb_title')) ? $breadcrumb_separator
: '';
// Determine if we are to display the breadcrumb
if ($show_breadcrumb == 'yes' || $show_breadcrumb == 'admin' &&
arg(0) == 'admin') {
if (!$show_breadcrumb_home) {
// Optionally get rid of the homepage link
array_shift($breadcrumb);
}
if (!empty($breadcrumb)) {
// Return the breadcrumb with separators
return '<div class="breadcrumb"><strong>You are here: </strong>' .
implode($breadcrumb_separator, $breadcrumb) . "$trailing_separator</
div>";
}
}
// Otherwise, return an empty string
return '';
}

Remember to clear the Drupal cache each time you change a themable function or template.

Modifying a default template

Our new theme Tao is intended as a blog theme, so let's look at adjusting the formatting of the blog node. To do this, we are going to create a template file to control the output of the blog node; a template file is more specific, and hence preferred over the Zen's default node.tpl.php.

First, duplicate the file zen/zen/node.tpl.php. Paste the file into our tao directory and rename it node-blog.tpl.php; this file will now be used by the system to handle the formatting of the blog node in our theme. Note that you will also need to copy the base template into the theme directory. Suggestions only work when they are in the same directory as the base template. In this case, it means we need to copy into our tao directory Zen's node.tpl.php file. We will not make any changes to the node.tpl.php file, nonetheless it must be in the directory for the suggestion to work properly.

The following variables are available in the node.tpl.php file:

 

Variable

Purpose

$content

Node content, teaser if it is a summary.

$date

Formatted creation date.

$directory

The directory where the theme is located.

$id

The sequential ID of the node being displayed in a list.

$is_front

True if the front page is currently being displayed.

$links

Node links.

$name

Name of author.

$node

The node object.

$node_url

Link to node.

$page

True if the node is being displayed by itself as a page.

$picture

HTML for user picture.

$sticky

True if the node is sticky.

$submitted

Author and creation date information.

$taxonomy

Array of HTML links for taxonomy terms.

$teaser

Only returns the teaser rather than the full node text.

$terms

HTML for taxonomy terms.

$title

Title of node.

$zebra

Alternates between odd/even in a list.

 

Drupal 6 Themes Create new themes for your Drupal 6 site with clean layout and powerful CSS styling
Published: September 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Ric Shreves

Ric Shreves is a web applications consultant and tech author. He’s been building websites since the mid-90s and writing about tech for almost as long. Ric specializes in open source content management systems and has written texts on each of the big three: WordPress, Joomla! and Drupal.

Ric is the founding partner of water&stone, a digital agency that focuses on new media and online marketing. He works with clients on digital marketing strategy and supervises the SEO implementation team. Ric lives in Bali and divides his time between the island and Singapore.

Books From Packt

Drupal 6 Site Blueprints
Drupal 6 Site Blueprints

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

Magento 1.3 Theme Design
Magento 1.3 Theme Design

Expert Cube Development with Microsoft SQL Server 2008 Analysis Services
Expert Cube Development with Microsoft SQL Server 2008 Analysis Services

Asterisk 1.4 – the Professional’s Guide
Asterisk 1.4 – the Professional’s Guide

LWUIT 1.1 for Java ME Developers
LWUIT 1.1 for Java ME Developers

Drupal 6 Content Administration
Drupal 6 Content Administration

Flash with Drupal
Flash with Drupal

 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
N
5
e
1
r
W
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software