Like many newbies, I found one of the hardest aspects of Drupal and web design was theming and css. I dipped my toe in by taking an existing theme (Garland) and tweaking it slightly with varying degrees of success.

However I soon needed to create a very different front page and found it hard to start from scratch and wanted an easy way to work out what was going on. Thanks to Drupal user Sym , I was able to get my foot on the ladder and offer this quick tutorial to other that are still staring up at the bottom rung!

 

First take a test site with Garland theme and in the theme folder create two new files page-front.tpl and page-front.css. Type in the text opposite or copy/paste from here.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print
$language ?>" xml:lang="<?php print $language ?>">
<head><title><?php print $head_title ?></title><?php print $head ?><?php print $styles ?><?php print $scripts ?>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?></script>
<link type="text/css" href="/themes/garland/page-front.css" rel="stylesheet"/>
</head>
<body>
toplefttopleft text
topcenter topcenter text
topright topright text
middleleft middleleft text
middlecenter middlecenter text
middleright middleright text
bottomleft bottomleft text
bottomcenter bottom centre text
bottomright bottomright text
<?php print $closure ?></body></html>

* {
margin:0pt;
padding:0pt;
}
body{
color:#000000;
font-family:verdana,helvetica,arial,sans-serif
;font-size:62.5%;
}

If you now browse to your home page it should look something like this. Don't worry it hasn't altered your real homepage and deleting or renaming the files above will restore the original. The only styling instructions the page currently has is to have no margin or padding, black text and Arial font.

 

Now we create the main area (<div>) that will hold all the elements of the page and call it "total", in the .php file we wrap the existing text within it and in the .css file we give "total" a background of powderblue, a pink border and a width of 765px. As we are not setting a height it collapses to the height required by the text within it.

Although I would usually use hex values for colours I have tried to use colour names in this tutorial to make it easier to identify and follow. As a useful aside a list of html colours can be found at http://support.blog-city.com/html_colors.htm 



 

Next step is to create the main sections within "total". These are called (helpfully) "top", "middle" and "bottom". Each of these <div>s hold within it the elements that relate to it (in this case just relevant text).

In the .css file we give "top", "middle" and "bottom" different background colours, a full width and a depth of 160px.

The result are the full width pink, yellow and green strips below.

 

Now we come to the subsections which are the ones that will contain the actual content. Starting just with the top section we seperate out the text elements and wrap each one in its own div. All of which is still contained within the original "top" div.

In the css file we give "topleft", "topcenter" and "topmiddle" different backgrounds a width of 255px (765/3) and float each one left to ensure they appear side by side.

To keep thing simple I have not put any borders on. Bare in mind that if you do, you need to reduce the width value accordingly. For example imagine if we wanted a border around each subsection of 5px, therefore left+right borders would equal 10px and top+ bottom borders would also equal 10px together therefore to fit in the new css settings would be:

width:245px;
height:150px;

 

 

We repeat the instructions above with the sub-sections within the "middle" and "bottom" sections.

as before in the css we will give each of the new sub-sections a different colour background to help follow what is happening.

The result can be seen below.

 

Finally we replace some of the holding text with dynamic elements from our drupal site - in this case a listing of the five most recent articles and also the current date.

 

I hope this is of use to those wishing to go beyond the standard themes and I look forward to hearing how you get on.

I apologise to all you Drupal Gods but we all have to start somewhere!

 

best wishes

 

Joe