Customizing Themes

Up until now, any settings or changes 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 stylesheet in order to get things just right. In the case of the demo site, I have chosen to work with the Barlow theme, as this most closely resembles the look that is envisaged.

[,-ï ■ ' If you haven't already, now is the time to find a fairly good code editor, as I -v\ .' you will be looking at code les of one sort or another from here on out. I

Opening up the barlow folder, notice that there are a few . tpl. php les, namely:

block.tpl.php box.tpl.php comment.tpl.php comment-wrapper.tpl.php node.tpl.php page.tpl.php template.php

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

<?php if ($breadcrumb && !$is_front){ ?>

<div id="breadcrumb"><?php print $breadcrumb ?></div>

<div id="message"><?php print $messages ?></div> < ?php } ? >

<div id="mission"><span><?php print $mission ?></span></div> < ?php } ?>

<h2 id="title">< ?php print $title ?></h2> < ?php } ?>

<p id="help"><?php print $help ?></p> < ?php } ?>

Chapter 8

<div class="content"> <?php print $before_content ?> <?php print $content ?> </div> </div>

This le uses HTML to create page areas (within the <div> tags) to present content. It uses a series of PHP if statements to check whether or not, for example, to display things like the mission statement. The PHP code is embedded within HTML tags that 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.

Notice that the class and id attributes are set for different sections of the HTML page. Recall that we can classify a class or id of content to be of a certain type, and then using the relevant selector, specify how it should be laid out within the stylesheet. This is a good example of using id to control a unique, individual section of the page (in this case, amongst others, the breadcrumb and mission statement), and class being used to control parts of the page that should appear uniformly, such as the content.

To prove this for yourself, open up the style .css le in the barlow theme and search for the snippet of code that reads:

background: #193 54 7; border: 1px solid #aaa; border-bottom: none;

Change this to:

background: #FF0000; border: 1px solid #aaa; border-bottom: none;

SHING

Drupal's Interface

Save these changes, and refresh the view of your Drupal site in your browser. The content should change so that your pages look something like this (in case it's not obvious in print, the header section has become red):

Recent bI og

Norm FnHin* I

I CltKi COfÇME

UWIIJulv!

Hixiw

Culling takes place for Kituiei elefilinnts

Ëlipti^ifi taM hjnipcrlijd Wlh# Kjjfii i"i.itd L-d ciMtilvMy KCDidjiQlD afcal!

ÎJmitlHïj mUpissanTilt ftC&M 114; Tiqi

. mflGGÙâS L1Û0 Ivj i - i.^lii !. |- ! ■!.:: ■■■ ■

Recent bI og

Ittsti

Mtftnlt

■ '1--Fj"ri iqa>a>^l Ca«ipd rtinl^ MIT ptliiQWK

A single change to the header tag in the stylesheet has changed the background color of the site's header section throughout each and every page of the entire site. This is quite a powerful and useful property of stylesheets, and is precisely why everyone uses them so much. You can change this back to the original setting or leave it as is—it makes no difference at the moment because it will no doubt change once you have decided on a color scheme.

Now that you know how to implement a change and view the effects of this change, you are ready to continue with modifying the stylesheet to reflect the site's intended look. In the sections that follow, we will discuss several different types of modifications, without grinding through each and every one in excruciating detail.

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 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.

Images

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

As it so happens, the particular theme chosen demonstrates this point quite nicely because it can have either one or two sidebars and changes its width accordingly. If you know that you are going to always have one or the other, then you can go ahead and create images tailored for those dimensions—if not, you will have to think about how to cater for the changes.

In the case of the demo site, I wanted a fairly hard-hitting, graphically-rich page title that sticks in the mind without being overly colorful or loud. In this case, the site's name/logo is actually part of the image, so I have done away with the standard site name and logo in the theme settings:

Iftj-fc to tit*

Marfcetfor^T^ood

In order to present this on the site, however, we need to do a bit of work. Adding this as the site's logo is a simple matter of uploading it in the theme's Configure page, as shown here:

Drupal's Interface

...and ensuring that the Logo option is enabled for this particular theme. As you have access to the le 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 Logo image settings box:

the Dflin to the fai ytm n<e to use es yotir kjgo ft* iiii?** onue «ft'sun i^eo

You could also save the new logo image over the old original one, and it will display as expected, but lose the old one irretrievably.

If you are having problems with viewing this image, then it is most likely that the File system settings under Site configuration are at fault. Check these to ensure that les are being saved to the correct place, and that you are then attempting to access them from the same place.

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

IfiSHT i! flta'cmnv/ui-f l

MarKetForjGf T^ood ruuriii h B»<]l

CLLHUIII i,Ihvs piaeo r&t Krusier ou?jiii-uiis

B*f»mMrHi-«IM liJiiiiKifii f.M^llirfrjijFi h^Jl.rjb, ^(j 1:L4iIHI(1II il.-iJi 1

Cnniied iimilirtcf In South Afric.ii

'fiiylfftl ClMrihUbf

^-.'t^ii hirtuif, a;-M if-f CifitifPu'lrt! INI jnHMy in &.! a1 iilb

Rsc#i(i fahftj

PdsU

SaJA Altuj.

It's worth remembering that life is made a lot easier by creating images on transparent backgrounds. This saves time and effort in the event you decide to change color schemes because the image will allow the background color to show through—we'll see a demonstration of this with the site logo, in just a moment, when we change the basic color scheme for this demo.

Chapter 8

Notice that this logo is not affected by whether or not the width of the page caters for one or two sidebars, because it simply blends in with the background color.

Images can also be used to change the look and feel of certain aspects of the site. Often, rounded images are used to break up the sharp, angular look and feel of standard websites, and we shall make use of a couple to delimit blocks in the left and right sidebars.

To display additional images within each block, there is some work that needs to be done to the template les before any changes will be visible. So, open up block.tpl. php and modify it as follows:

<div class="block-top"></div>

<div class="block block-<? print $block->module?>" id="block-<?php print $block->module . "-" . $block->delta ?>"> <div class="block-center"> <?php if ($block->subject) { ?>

<h2 class="title"><span><?php print $block->subject ?></span></h2> < ?php } ?>

<div class="content"><?php print $block->content ?></div> </div> </div>

<div class="block-bottom"></div>

The bolded code here adds a new top and bottom section to each block, and wraps the content within another div tag. The top and bottom sections will house the rounded outline images that will divide up the content in the sidebars into clearly de ned blocks. The images we will use are set height and width as shown here:

We now need to use the stylesheet to tell the browser to display these images in the top and bottom div tags, so open up the style.css le and add the following in:

.sidebar a:hover, .sidebar a:focus {

border-bottom: 1px solid #999;

.block-top{

background: url('blocktop.png') no-repeat bottom center; height: 15px; padding: 5px;

.block-bottom{

background: url('blockbottom.png') no-repeat top center; height: 15px;

Drupal's Interface

.block-center{

border-left: 0px;

border-top: 1px solid #ccc;

background: #fff url(bg1.png) bottom left repeat-x;

In this case, I have named the images blocktop.png and blockbottom.png, and stipulated that the image should not be repeated. Further, they should be displayed in the center of the div, either at the bottom or the top of the region, depending on whether or not we are in the block-bottom or block-top area.

Add all theme-related images to the actual theme folder — don't simply upload them to the standard files folder.

With these changes saved (and the images saved to the relevant theme folder), we can now look at what effect these have had on the site:

Cullhirj tilJtf-S- place fmr Kmcjin c-lu-jïli.inta

E, rrU^ui Tiiit CoHhf

Uiflr login

IKniiumn' '

Cullhirj tilJtf-S- place fmr Kmcjin c-lu-jïli.inta

E, rrU^ui Tiiit CoHhf

EVfc" V 11 irut —il* trb*J»fTWi PKm H»i 1 • >! I0 B* OrfftJ li-JS | iKCOI^ng M rfwilJl

Canned huiitlFig In Soulb Africa

Lif rrMiJiX-i T^fit hafT-fr]

T+Jf OHielt IéS* Ibftl hzff-T*/. Spf C Ihrtrf feUMftf. H, il !■: firit mirtlp n "r!iT'j iBAicji K.i j. u iiî-Î j1- j- jr. m

U - -¿■7::..J T*XIP OiiTH ii SL-N-J.J Trif^mf wn F IW

■ ijSfli'iip i ilpiWlrJ rn-li -iij ¿Of IMP** ■*«» I«IC>J#4 Wi > twi^ ■Wi^-fr*« -rtf* SWf WMtfaftil tUE> tvjrri It ItUrf l^i

Reeeriï btotj f&ite

* CV'-tj rtfcM fit*:m Ay IiiugvF ptffdWfa

C- tftrW jfcntap

saww/awrj

Chapter 8

Now, each block has its own top and bottom bracket that helps separate and define its content. You can continue adding borders by modifying the block_center class in the style.css stylesheet, but I think it looks quite nice as it is. Before we move on, you may have noticed that the borders for the sidebars have been removed here. Can you guess how this was achieved?

There are a number of sidebar settings in the stylesheet and removing the border is a case of changing the 1px width to 0px, as shown here:

.sidebar {

background: #fff;

#sidebar-right {

border-left: 0px solid #ccc;

#sidebar-left {

border-right: 0px solid #ccc;

We aren't quite finished with images yet, because they can be used in any number of different areas of the site. For now though, we will move on to discuss other parts of the theme, using images where appropriate. You should spend some time practicing not only adding images, but actually designing them properly in order to give your site a professional look-and-feel.

Remember, above all, the site needs to be intuitive and easy to use, so don't get too carried away making wild graphics that are going to slow everything down or make it confusing. People should be visiting your site for its content, anyway.

Colors

With a few new images in place, the site is starting to look quite nice. However, it is still fairly similar to the base theme that we chose because the color scheme is much the same. The main background colors (the area around the actual content) are produced using an image for the top half of the page that fades from a dark to a lighter shade of blue and merges at the bottom of the image with the background color.

All of this is controlled from the body tag in the stylesheet:

color: black;

background: #3b617f url(bg.png) repeat-x;

Drupal's Interface

From this, you can see that the image bg.png is repeated along the x-axis and that the background color is set to #3b617f. Let's provide a new image and background color to give the site a new look:

color: black;

background: #fff url(bgnew.png) repeat-x;

bgnew.png, in this case, is a textured image that fades to white (or #fff) towards the bottom:

Looking at the site, we now have:

M^rKMFor^f^^oofl navigation

Ctilling tikes p-laie roi Kiutjfti *l»(iiuijili

Zi rf.Uj I icrrt^ It

Ritint JjJoy ffpili f fiunijUtf*

tX&ttt*

Chapter 8

So far so good, but there is a lot more we can do with colors. All the text on the site can be controlled from the stylesheet, and you should think about what color, for example, hyperlinks are to be presented in. This theme bundles all the various types of hyperlinks along with some headings into the same group:

a, a:link, a:active, a:visited, hi, h2, h3, h4, h5, h6 { color: #3b617f;

If you wanted to give the heading styles their own color, you would simply remove them from the current list and set them separately:

color: #3b617f;

Now, headings that are not also hyperlinks are displayed in their own color. Headings that are hyperlinks are dealt with separately by the stylesheet, and are therefore, not displayed in the new color. Look for the section that reads:

hi a, hi a:link, hi a:visited, hi a:hover, hi a:active, h2 a, h2 a:link, h2 a:visited, h2 a:hover, h2 a:active, h3 a, h3 a:link, h3 a:visited, h3 a:hover, h3 a:active, h4 a, h4 a:link, h4 a:visited, h4 a:hover, h4 a:active, h5 a, h5 a:link, h5 a:visited, h5 a:hover, h5 a:active, h6 a, h6 a:link, h6 a:visited, h6 a:hover, h6 a:active { color: #3b6i7f; border: none

...if you would like to modify these. You can now, in the same way, practice your hand at color coordinating the rest of the site by going through the stylesheet and making changes to taste. Remember, when making adjustments you really need to test changes quite regularly to ensure that there are no nasty surprises (like text being the same color as the background).

Before we look at the next item on the agenda, bear in mind that you can also control the alignment of text, its size and font, and much, much more. It really is worth looking over some of the CSS resources mentioned earlier on in this chapter to get a good idea of what is possible.

Drupal's Interface

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 stylesheets or the template les. The stylesheet can be used for a limited number of changes; for example, broadening (or narrowing if required) the sidebars to a xed width in pixels, by altering the appropriate block in the layout.css stylesheet:

.one-sidebar #wrapper { width: 7 80px;

.two-sidebars #wrapper { width: 97 0px;

#header #logo, #branding, #main, .sidebar { float: left;

#search, #header-additional { float: right;

width: 500px;

padding: 2em 35px 1.5em 35px;

.sidebar {

width: 2 00px;

Of crucial importance here, is that one remembers to alter the width of the page overall to cater for the increased width of the sidebars (either that or decrease the content section). If this is not done, it could have undesired consequences for the layout of the site.

With two sidebars, the site is now nearly 1000px in width, and traditionally, a site should be designed at 800px in width. It is my opinion (and some will disagree) that this is becoming less important as more and more people purchase better quality monitors with higher resolutions, so I would be quite happy with a screen of this width.

But what if you needed some more drastic alterations to the site? If it is a more complex structural change you require, then it's time to go to the .tpl.php les—the actual le will depend on the type of change you need to make.

Chapter 8

Let's say, for example, that you wanted to add an extra row to each page in order to insert some advertising in the hope that some revenue can be generated from the site. In order to do this, we need to look at the page. tpl. php le, because 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 speci c times. For our purposes, it is enough to simply add the new row.

Let's say we want the new row to appear above the content but below the heading—perhaps this could also be used for quick alerts or announcements or even scrolling news. If this is the case, we need to find the spot in the code where the main content is added and insert a new region immediately above. Look for this snippet of code in the page .tpl. php le:

</div> <div id="content"> <?php if ($left != ''){ ?>

<div id="sidebar-left" class="sidebar"> <?php print $left; ?> </div> <?php } ?> <div id="main">

<?php if ($breadcrumb && !$is_front){ ?>

<div id="breadcrumb"><?php print $breadcrumb ?></div> <?php } ?>

This div area is responsible for containing the main content of the site — speci cally, it houses the left and right sidebars as well as the main body of content. To insert a new row, we can do something like this:

<div id="content">

<div class="newcontent">

This is where the new content will appear! </div>

<div id="sidebar-left" class="sidebar"> <?php print $left; ?> </div> <?php } ?> <div id="main">

<?php if ($breadcrumb && !$is_front){ ?>

<div id="breadcrumb"><?php print $breadcrumb ?></div> <?php } ?>

3HING

Drupal's Interface

Taking a look at the site now shows the new message as expected:

i

MarKfctFoc&é

\ûrood

Home Forums

Tins fs where 1lie new content will appear'

Home nif4good

— Administer — Site building Themas

What you actually add within this new section of each page is entirely up to you! In Chapter 9, on advanced topics, we look at how to add some neat Web 2.0 features that you might want to consider. Before you do:

■' It is extremely important that whatever changes are made to a site are I

Testing your layout goes deeper than simply checking if everything is in the correct place. It is important that you ensure the CSS and HTML is valid and correct, and resources to achieve this are available online—try http: //validator. w3. org/.

If any problems are reported, then it is up to you to ensure that the site complies as closely as possible, because errors can damage not only how people browse your web pages, but also how search engines index and rate the site.

Chapter 8
0 0

Post a comment