Creating Joomla Templates : CSS Wireframes
|
This is a very brief run through of how CSS can be used to create and style the wireframe of a Joomla template. The guide is intended for absolute beginners who know little about CSS and are using the HD-Framework to build their first Joomla template.
|
 |
|
The HTML used in the examples below should be placed within the <body> and </body> tags of the template’s index.php file.
The CSS should be placed at any point in the template.css file (or whichever CSS file is referenced at the top of the index.php file).
ID Selectors
The Joomla template is built on a wireframe of divs. Think of these as building blocks. The article is displayed in the “content” div, the top module position is in the “top” div, bottom in the “bottom” div, etc. Any code between the opening <div> tag and the closing </div> tag is the content of that div (in the examples below this is just capitalized text but we will later replace this with Joomla content). An id selector is applied to each div so that it can be referenced in the CSS file. The id selector is always preceded with a hash (#) and the CSS rules follow within curly brackets.
The HTML code is rendered from the top down and a simple wireframe may look like this…
The height and width of each div is specified in the CSS, here we have used percentages but pixel widths can also be used. If you require the divs to align to the left or right of each other you will need to use the float class. This allows the div to stay on the same horizontal level as the previous div.
In the HTML, each floating div is allocated to the class “float” and the direction is declared in the CSS (always either left or right of the prior div). The divs will continue floating until it has reached a maximum width of the wireframe, at which point it will start to float on the next horizontal level. To specify this width you should wrap all the other divs within a main div and then declare the width in the CSS. In the example below the HTML begins with a div called “container”, the closing </div> tag only appears at the end of the code, effectively containing all the other divs inside. The width of the container id is then specified In the css.
At this point you will have to keep an eye on your width totals.
If you are using percentages you will have to ensure that the left (25%), top (50%) and right (25%) widths total 100%.
If you are using pixel widths you will have to ensure that they total the same as the container width.
If this doesn’t add up then either gaps will appear between the divs or the divs will float onto the next horizontal level.
To ensure that the content div floats to the right of the left div we have had to specify that the height of the left div is greater than the height of the top div (otherwise it would simply appear below the left div). The divs will continue floating until it reaches a div without the float class (or with the class “clear” applied instead).
Each div can be styled individually with background colour, background image, border, padding, margin etc. by simply adding the CSS instructions within the curly brackets of the ID selector.
For example if you want to display a background image (stored in the images folder within your template) in the LOGO div change the CSS to…
#logo {background-image: url('/../images/logo.jpg');}
Joomla Content
Finally, we should replace the filler text with your Joomla content from your articles and modules.
To do this simply add the following Joomla code between the relevant divs where you wish to place a module…
<jdoc:include type="modules" name="left" />
Replacing “left” with the module position title of your choice.
And in the position you wish to display your article we include this joomla code…
<jdoc:include type="component" /></p> <p><br /> <br />So the HTML of a simple “left / content / right” wireframe should look like this…</p> <p><img src="http://www.hyde-design.co.uk/images/stories/training/wireframes-4.jpg" border="0" />