How to Give Your Site a Makeover - Part One
This article takes you behind the scenes on how to change the look of your website with simple CSS modifications, based on the changes that we have been making to ezsystems.ca. The article is based on the assumption that your website is built with eZ Publish and based on the standard ezwebin extension, known as the Website Interface.
The instructions here assume the reader's knowledge of CSS and basic eZ Publish editing capabilities.
First Steps
Before proceeding with the customization process below, be sure to read my previous article on Setting Up An Efficient Environment For Working With eZ Publish. It guides you through the development and testing process when customizing a site. It talks about some handy tools for your design work, like Firefox add-ons Firebug and FireFTP, as well as how to upload your customized CSS code.
After installing Firebug in Firefox you'll see a little green icon with a check mark in the bottom right corner of your browser. Click on it to open Firebug window, which helps you to examine the code of the site.
Click on "Inspect" and "CSS" to see 6 different stylesheets that are linked from your web page:
We will be working only with the last two of these files:
- classes-colors.css overwrites the styles defined by content.css for all the content-related styles
- site-colors.css overwrites the styles defined by pagelayout.css for all styles not related to content but to the global pagelayout
Both files are empty by default and located in the eZ Publish installation under this folder:
var/storage/packages/ez_systems/ezwebin_design/files/default/file/
If you have the access to your site's server, then you can download those files and upload them back after adding your custom styles. Open the files in your favourite HTML (or a text) editor, and proceed with the coding steps. Otherwise simply create two new files in your editor and save them as classes-colors.css and site-colors.css. After adding your custom style, you can prepare and upload your style package via the Administration Interface as described here.
Make sure to save all your design-related images in a subdirectory "images". Use the following path to refer to those images from your CSS code: url(images/imagefilename.jpg). Afterwards you can upload those images to the server either via FTP or as a part of your style package.
Coding steps
1. Customizing the global pagelayout
So to show you how this site went from looking like the regular demo site to what it is now first we'll start by changing the size of the main page area. Open Firebug and click on the Inspect menu, then click on the <body> tag triangle to expand it. The page style is defined with the id="page". Click on the <div> tag to see the existing CSS in the Style section of Firebug. You can edit the CSS code right there to preview the results immediately. Once you are satisfied with the changes, copy them to your CSS file.
In the case with the "page" id, the current style is defined as:
div#page {
margin:0pt auto;
text-align:left;
width:770px;
}
If all we want to change is the width of the page area then we need to overwrite only one line and define it in our site-colors.css as follows
div#page {
width: 808px;
}
The rest of the style will be inherited from the default style in pagelayout.css.
By following the same principles we modify the look of the top menu that's defined with the id="topmenu" for the <ul> tag. Here we replace the existing background image with a new one, and change the height of the menu as well.
div#topmenu ul {
background-image:url(images/mainmenu-bg.gif);
background-repeat:repeat-x;
height: 21px;
}
div#topmenu ul, div#topmenu li{
height: 21px;
}
The following code will change the style of the <a> tag - an important step, since each text in the menu is a link.
div#topmenu li a {
background-color:transparent;
color:#4F5241;
display:block;
float:left;
height:15px;
line-height:10px;
border-right:none;
padding:2px 15px 0pt;
text-decoration:none;
}
div#topmenu li.selected {
background-image:url(images/mainmenu-bg.gif);
}
div#topmenu li {
background-image:url(images/mainmenu-bg.gif);
border-right:1px solid #C3C4B6;
}
div#mainmenu a:hover, div#mainmenu li.current a:hover, div#submenu a:hover, div#mainmenu li.current a.menuhover:hover, div#mainmenu a.menuhover:hover, div#mainmenu li.current li a:hover {
background-color:#F15E22;
background-image:none;
color:#FFFFFF;
}
div#topmenu li a:hover {border-bottom: none;
background-color:#F15E22;
background-image:none;
color:#FFFFFF;
}
As usual, try your custom changes in Firebug by inspecting every part of the page that you want to modify, then copy the custom code to site-colors.css.
In Part Two I will show you how to customize the content style and modify the structural layout of your site's Frontpage.
Comments