Step 1: Create a design in HTML
To create a HTML design of your website you can use the files we have created for you.
Download and unzip the file of your choice to an empty folder on your hard drive. When you have unzipped the file you have 2 files, index.html and model.css (in the css sub-folder). There is also a folder where you can save your images. The structure of folders is the same as in your template folder in your joomla installation later. So all the styling you do here, you can copy later to your template.css file.
Print screen of index.html with 2 columns
CSS 2 columns
/* ---------------
Template styles
------------------ *
div#wrapper {
width: 972px;
margin: 10px auto 0 auto;
}
div#header {
padding: 10px 10px 0 10px;
background-color: #ffff00;
}
div#top {
height: 80px;
background-color: #00ff00;
}
div#main {
width: 952px;
float: left;
padding: 10px 10px 0 10px;
background-color: #ccc;
}
div#left {
float: left;
width: 210px;
background-color: #9999ff;
}
div#content {
float: right;
width: 722px;
background-color: #fff;
}
div#footer {
clear: both;
width: 952px;
height: 20px;
padding: 10px 10px 0 10px;
background-color: #00ffff;
}
div#blanc {
clear: both;
width: 952px;
padding: 10px;
margin: 0 auto 0 auto;
height: 300px;
}
The 3 column model has the same file structure as the 2 column model.
Print screen of index.html 3 columns
Note
You will find the CSS statements in the model.css file. You can adjust the CSS to your desired layout. The same goes for the index.html file. The background colours are convenient as long as you are "playing" with the model. In this way you can notice the effects of your styling more easily. Be sure that the background colours will cover the whole div.
div#main CSS float left?
The div with id main has a CSS statement float: left. May be you think that it is not needed here, because the div has a full width within the wrapper and there are no floating elements to the left or right. The float left statement here has the effect that the height of the div#main will be determined by the heights of the subdiv's, so you can use a full background on it. If the div is non floating the div will not cover the area of the sub-div's.
Adjusting the model for the Joomla CSS layout
We now continue with the 2 column model to adjust it for the Joomla CSS layout as an example. When we open the index.html file with Notepad, you will see the following html code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Base model</title> <link rel="stylesheet" href="/css/model.css" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="top">Logo, Topmenu, Search etc</div><!--top--> </div><!--header--> <div id="main"> <div id="left">Left for menus and modules</div><!--left--> <div id="content">Content</div><!--content--> </div><!--main--> <div id="footer">Footerinformation and footermenu</div><!--footer--> </div><!--wrapper--> <div id="blanc">Blanc / Spacer</div><!--blanc--> </body> </html>
First we remove all the content texts. Save the file and preview it on your browser. It should be looking like this.
Create the images from the Joomla CSS design
Now we use a PSD file (Photoshop) of Joomla CSS that was created to design this website and extract the images for the body, header, main and footer of the website.
Print screen of the Photoshop file of Joomla CSS
We have extracted the following images from this file.
- Body background image (bg_body.jpg = 2.000 x 1.300 pixels)
- Header (header.png = 942 x 123 pixels)
- Content (main.png = 942 x 20 pixels)
- Footer (footer.png = 942 x 54 pixels)
The .png images are transparent (transparent shadow around it) and saved as png 24 bits images.
Images (resized to smaller images)
Body
Header
Content
Footer
IE6 Transparancy
IE6 does not support transparent images (png 24 bits), so we have created alternative transparent images (png 8 bits) for IE6. You could use png-fix scripts for IE6, but we don't. Those scripts have limitations, sometimes conflict with other scripts and often make the website loads much longer.
Download the Joomla CSS images
If you want to create this example template as a exercise, you can download the original images here. Just unzip the file and save them in the images folder of your model.
Adjusting the CSS
The CSS file already contains the Reset, Default Font Styles and the General Content styles. For more information about these styles just read the "Read me first" section of this website from the left menu. Every template should use these styles.
We only display here the adjusted template structure styles.
/* ---------------
Template styles
------------------ */
body {
background-image: url(../images/bg_body.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}
div#wrapper {
width: 942px;
margin: 10px auto 0 auto;
}
div#header {
height: 123px;
background-image: url(../images/header.png);
background-position: 0 0;
background-repeat: no-repeat;
}
div#top {
float: right;
width: 600px;
text-align: right;
padding: 78px 40px 0 0;
}
div#main {
float: left;
width: 942px;
background-image: url(../images/main.png);
background-position: 0 0;
background-repeat: repeat-y;
padding: 10px 0 0 0;
}
div#left {
float: left;
width: 250px;
padding: 0 20px 20px 40px;
}
div#content {
float: left;
width: 590px;
padding: 0 40px 20px 0;
}
div#footer {
clear: both;
height: 75px;
background-image: url(../images/footer.png);
background-position: 0 0;
background-repeat: no-repeat;
}
div#blanc {
height: 300px;
width: 100%;
}
Printscreen after applying CSS
Additional styles
You can style the model with more CSS to complete the design. As an example we only fill the page with dummy content to see the effect on the lay out. We replace the General Content Styles with the following CSS statements.
body {
font-size: 12px;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #004678;
}
h1, h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 20px;
font-weight: bold;
margin-bottom: 6px;
}
h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
font-weight: bold;
}
p, ol, ul {
font-size: 12px;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #004678;
}
a {
outline: 0 none;
text-decoration: underline;
color: #004678;
}
a:hover {
outline: 0 none;
text-decoration: none;
color: #0689e6;
}
/* Input, select and button styles */
button, input.button {
padding: 1px 7px 1px 7px;}
/* Unordered and ordered list styles */
ul {
padding: 0 0 0 15px;
list-style: disc;
}
ul li ul {
list-style: circle;
}
ol {
padding: 0 0 0 20px;
list-style: decimal;
}
ol li ol {
list-style: lower-alpha;
}
Print screen after applying CSS
We don't add anymore additional styles here, we leave it up to you.
