Online Joomla Training

Joomla! How-To's: Templates

How to Create a Basic Template - Step 3: CSS

September 25, 2006 | by Cory
Article Index
How to Create a Basic Template
Step 1: Design
Step 2: HTML Markup
Step 3: CSS
Step 4: Joomlafy
Steps 5-9
Sample Template Files
All Pages
Page 4 of 7

Step 3: CSS

This is where we start to see the design elements really take shape. At the end of this step, we will have our basic framework in place. Here is the CSS code:

 
* {
  margin: 0;
  padding: 0;
}
 
body {
  background-color: #fff;
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
 
a, a:link, a:visited {
  color: #900;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: #000;
}
 
h1#sitetitle {
  padding: 100px 0 0;
  background: #fff url('../images/logo.png') center top no-repeat;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #000;
}
h1#sitetitle a, h1#sitetitle a:link, h1#sitetitle a:visited {
  text-decoration: none;
  color: #000;
}
h1#sitetitle a:hover {
  text-decoration: none;
  color: #000;
}
h2#siteslogan {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 10px;
  text-align: center;
  color: #000;
}
 
#sidebar {
  width: 215px;
  margin: 10px 0 10px 10px; 
  float: left;
  color: #000;
}
 
#mainbar {
  margin: 10px 10px 10px 235px;
}
 
/*
 
Joomla Elements Will be added in Step 4: Joomlafy
 
*/