- What Is a Joomla! Template?
- The Localhost Design Process
- W3C and Tableless Design
- Creating a Simple Template: 960TemplateTutorialStep1
- Using CSS to Create a Tableless Layout: CSSTemplateTutorialStep2
- Making a Real Joomla! 1.6 Template: 960TemplateTutorialStep3
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Making a Real Joomla! 1.6 Template: 960TemplateTutorialStep3
You need to start with a comp. A comp, short for composition, is a drawing or mockup of a proposed design that will be the basis of the template. In this section, we'll use a design by Dan Cedarholm from his book Bulletproof Web Design (see Figure 9.8). I heartily recommend this book, as it's provides an outstanding foundation in some CSS techniques that are useful in creating Joomla templates. We'll use some of these techniques to build this real-word template.
)
Figure 9.8 A design from Bulletproof Web Design.
Slicing and Dicing
The next step in the process is slicing. You need to use your graphics program to create small sliced images that can be used in the template. It's important to pay attention to how the elements can resize if needed. (My graphics application of choice is Fireworks because I find it better suited to web design—as opposed to print design—than Photoshop.)
This process could probably fill a whole book by itself. To get a sense of how to slice up a design, you can look at the images folder and see the slices.
Header
The header image has a faint gradient at the top. We put the image in as an untiled background and then assign a matching fill color behind it. That way, the header can scale vertically if you need it to (for example, if the fonts are resized). You also need to change the color of any type to white so that it shows up on the black background.
Here is the CSS we must add to style the header#header {
border-bottom: 3px solid #87B825;
background: #B4E637 url(../images/header-bg.gif) repeat-x top left;
}
#header h1 {
margin: 0;
padding: 25px;
font-family: Georgia, serif;
font-size: 150%;
color: #374C0E;
background: url(../images/bulls-eye.gif) no-repeat top left;
}
You did not use a graphical logo here; you use plain text. The reason is mainly because search engines cannot read images. You could do some nifty image replacement, but I will leave that as an exercise for you to do on your own.
The Banner/Message Module
We use our "top" module location from the last template for a message. To give it some styling, we can add
#message {
font-size: 90%;
color: #cc9;
text-align: center;
background: #404530 url(../images/message-bg.gif) repeat-x top left;
}
#message .moduletable {
padding:1px 10px;
}
The header now looks as shown in Figure 9.9.
)
Figure 9.9 Header image background.
Next, you need to implement a technique to show a background on the side columns.
Column Backgrounds
Recall that when you put a color background on the columns, the color did not extend all the way to the footer. This is because the div element—in this case, sidebar and sidebar-2—is only as tall as the content. It does not grow to fill the containing element. This is a weakness of grid-based systems; we would have to use some JavaScript to get a background on the side columns.
There are many scripts out there that calculate the height of columns and make them equal. We'll use one from Dynamic Drive: http://www.dynamicdrive.com/csslayouts/equalcolumns.js.
Note that we must change the columns/elements referred to in the script to match ours. We are also going to add another containing block element, "maincolbck" to hold the yellow faded background for the top of the content in the main column.
Our main content code in the index.php looks like this:
<div id="content" class="container_12">
<div id="maincolbck">
<?php if($this->countModules('left')) : ?>
<div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
<jdoc:include type="modules" name="left"style="xhtml" />
</div>
<?php endif; ?>
<div id="maincolumn" class="grid_<?php echo (12-$leftcolgrid-$rightcolgrid);?>">
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="component" />
</div>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?>
</div>
<div class="clear">
</div>
Let's also put a background onto the footer element while we are adding these. Our added CSS is
#content {
font-size: 95%;
color: #333;
line-height: 1.5em;
background: url(../images/content-bg.gif) repeat-x top left;
}
#maincolbck {
background: url(../images/wrap-bg.gif) repeat-y top right;
}
#footer {
background: #828377 url(../images/footer-bg.gif) repeat-x top left;
padding:1px 0;
}
This now gives us a gradient background for the right column:
#footer {
background: #828377 url(../images/footer-bg.gif) repeat-x top left;
padding:1px 0;
}
Flexible Modules
When designing modules, you need to consider whether they will stretch vertically (if more content is in them), horizontally, or both. Here we use the principles of bulletproof design contained in Dan's book. We use a couple of simple background images to create a module background that stretches in both axes. We place one background on the containing div, and the other one for the opposite corner on the h3 header.
As this design does not have a horizontal menu, we also take care of menu styling as we consider the side modules.
Our CSS looks like this:
#sidebar .moduletable,#sidebar-2 .moduletable {
margin: 10px 0 10px 0;
padding: 0 0 12px 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
background: #fff url(../images/box-b.gif) no-repeat bottom right;
}
#sidebar h3,#sidebar-2 h3 {
margin: 0;
padding: 12px;
font-family: Georgia, serif;
font-size: 140%;
font-weight: normal;
color: #693;
background: url(../images/box-t.gif) no-repeat top left;
}
#sidebar p,#sidebar-2 p,sidebar ul,#sidebar-2 ul {
margin: 0;
padding: 0 12px;
}
sidebar ul li,#sidebar-2 ul li {
margin: 0 0 0 12px;
padding: 0 0 0 18px;
list-style: none;
background: url(../images/li-bullet.gif) no-repeat 0 3px;
}
Now let's focus on some of the typography.
Typography
The CSS for typography is greatly simplified in Joomla 1.6. Earlier versions of Joomla had unique classes for various parts of the output, such as "contentheading". In Joomla 1.6, the output uses more recognized classes like H1, H2, and so on, and is completely tableless.
Let's style these elements:
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, serif;
font-size: 150%;
color: #663;
font-weight: normal;
}
h1 {font-size:2em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:1.5em;margin-bottom:0.75em;}
h3 {font-size:1.25em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.1em;line-height:1.25;margin-bottom:1.25em;}
We can also add some handy icon treatment for special classes that can be applied to content:
p.info {
background: #F8FAFC url(../images/info.png) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #B5D4FE;
border-bottom: 2px solid #B5D4FE;
}
p.warn {
background: #FFF7C0 url(../images/warn.png) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #F7D229;
border-bottom: 2px solid #F7D229;
}
p.alert {
background: #FBEEF1 url(../images/exc.png) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #FEABB9;
border-bottom: 2px solid #FEABB9;
}
ul.checklist li {
list-style:none;
background: url(../images/tick.png) no-repeat 0 4px;
line-height: 24px;
padding-left: 20px;
}
The finished template should look as shown in Figure 9.10.
)
Figure 9.10 An advanced template with typography.