Head Foot PDF Print E-mail
Written by Carl Friis-Hansen   
Friday, 15 February 2008 11:01
I have made a few changes to the theme in one of my websites using Drupal.
The theme is called foliage and is pretty similar to any other theme, thus the following example would most likely be helpful in most cases.
The theme directory is: example-com/themes/foliage and in this directory the file style.css is modified.

The style sheet's #header section is changed to accommodate my own sweet image called head.png.
You would probably edit your picture in Gimp or Photoshop cutting it to exactly 960x100 pixel.
#header {
  background-color: #3a6b00;
  //background-image: url('head960.jpg');
  background-image: url('head.png');
  height: 100px;
  border: 1px solid #ccc;
}
The style sheet's #footer section is changed to remove the image down there. I rather wanted something simple with a simple text of my own.
#footer {
  background-color: #3a6b00;
  //background-image: url('foot960.jpg');
  height: 30px;
  border: 1px solid #ccc;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

Remember to ensure -rw-rw-rw- or 666 mode for your images and make sure they are resized/cut to the right size, it makes a better impression.

screenshot-forums.png

It is fun to play with the style sheet and when you get the hang of it, you will find that the syntax is fairly simple. I usually check the final result in a web browser capable of displaying an error console. I can recommend FireFox for this purpose. Microsoft IE is not very suitable in this respect.
Last Updated on Saturday, 05 April 2008 16:18
 

Add comment

To be able to vote and have easier access to write comments, etc., go to Login and register yourself.
Your user name and email will never leave this website.


Security code
Refresh