- What Is a Joomla! Template?
- The Localhost Design Process
- W3C and Tableless Design
- Creating a Simple Template: CSSTemplateTutorialStep1
- Using CSS to Create a Tableless Layout: CSSTemplateTutorialStep2
- Making a Real Joomla! 1.5 Template: CSSTemplateTutorialStep3
- Advanced Templating Features: CSSTemplateTutorialStep4
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Making a Real Joomla! 1.5 Template: CSSTemplateTutorialStep3
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, you will be using the Bold template, kindly donated by Casey Lee, the lead designer from Joomlashack (www.joomlashack.com), and you can see it in Figure 9.8.
)
Figure 9.8 A design comp from Joomlashack.
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 is probably a whole book in itself. To get a sense of how to slice up a design, you can look at the source PNG file in Fireworks for the template and you'll be able to see the slices.
Setting Up Module Locations
The Bold template will have some specific locations for specific modules, slightly different from the standard Joomla installation. To make sure the modules are correctly set up as you work through this template, you need to designate the following positions:
- User1 for the search module
- User2 for the top menu
- Top for a newsflash or custom HTML module
Nothing else should be published in these locations. (Quickly scan position assignments in the Module Manager and reposition or disable modules as necessary.)
Header
The header image has a faint swish 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 will show up on the black background.
You will also use another background image for the search box. You need to make sure to target the correct input by using CSS specificity. You can also use absolute positioning inside a relatively positioned element to place the search box precisely where you want it. The image will not scale with text resizing using just a single image. That would require a top and bottom image and what's known as the sliding doors technique—and that's another exercise for you!
Here is the CSS we must add to style the header:
#header {
color:#fff;
background:#212121 url(../images/header.png) no-repeat;
position:relative;
}
#header h1 {
font-family:Arial, Helvetica, sans-serif small-caps;
font-variant:small-caps;
font-stretch:expanded;
padding-left:20px;
}
#header input {
background:url(../images/search.png) no-repeat;
border:0;
height:22px;
width:168px;
padding:2px;
font:1em Arial, Helvetica, sans-serif;
}
#header .search {
position:absolute;
top:20px;
right:20px;
}
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 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 a fluid column: sliding doors.
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.
You have to use a technique called sliding faux columns, with which you essentially create two wide images that will slide over each other. You need to create two new containers to hold the backgrounds. Normally, you could apply one to the #wrap div that contains our entire page content, but here we use an extra (and wasteful) container for illustration purposes.
For a full description, you can check out these two guides:
In this case, the maximum width is 960 pixels, so you start with an image of that width. In the image source files, it is slidingcolumns.png. You then export two slices (you can use the same slice and just hide/reveal the side images), one 960 pixels wide with a 192-pixel image for the column background on the left, and one 960 pixels wide with a 196-pixel image for the column background on the right.
NOTE
The left image needs to have a white background for the "long tail" to the right, and the right needs a transparent background for the "long tail" to the left. You can modify the color of the backgrounds as you export the images from the source file.
Where does 192 pixels come from? It's 20% of 960 (because the columns are 20% wide).
You use the background-position property to place the images in the correct place. Here, you are using condensed CSS format, so they are part of the background property:
#leftfauxcol {
background:url(../images/leftslidingcolumn.png) 20% 0;
}
#rightfauxcol {
background:url(../images/rightslidingcolumn.png) 80% 0;
}
In your index.php file, you simply add an inner container inside the wrap:
<div id="wrap">
<?php if($this->countModules('left')) : ?>
<div id="leftfauxcol">
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
<div id="rightfauxcol">
<?php endif; ?>
<div id="header">
You also need to put a conditional on the closing divs:
<?php if($this->countModules('right')) : ?>
</div><!--end of rightfauxcol-->
<?php endif; ?>
<?php if($this->countModules('left')) : ?>
</div><!--end of leftfauxcol-->
<?php endif; ?>
</div><!--end of wrap-->
You must also put a background onto the footer and bottom modules/elements; otherwise, the column background would be shown:
#footer {
background:#212121;
color:#fff;
text-align:right;
clear:both;
}
#bottom {
background:#333;
color:#666;
padding:10px 50px;
}
You need to clear the floats so that the float container (the faux columns) will extend to the bottom of the page. The best method for doing this is to use the property :after (see www.positioniseverything.net/easyclearing.html). But with the release of Internet Explorer 7, this method will not work completely.
A couple of solutions have been found (see www.quirksmode.org/css/clearing.html and www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/). You can use the float (nearly) everything option (see www.orderedlist.com/articles/clearing-floats-the-fne-method/).
Thus, you add a simple clear:both to the #footer, and you add floats to the fauxcol wrappers.
/*Compass Design ie6only.css CSS*/
#leftfauxcol {
float:left;
width:100%;
}
#rightfauxcol {
float:left;
width:100%;
}
#footer {
float:left;
width:100%;
}
NOTE
This won't work completely for IE6, but IE6 doesn't understand our min/max widths anyway and so will break the layout by trying to be fluid.
Flexible Modules
Let's dig more deeply into adjusting the appearance of modules by setting display options and talk about the concept of chrome. Chrome is the nickname for giving content a stylized appearance, and Joomla has some built-in features that help you both eliminate tables from the layout and style in some shiny chrome. In your design, at the top position, you have a large initial module block. You don't know how tall the text that is needed will be. To solve that problem, you put the module jdoc:include statement in a containing element and give it a background of the same color as the image. This is the same strategy you used for the header:
<?php if($this->countModules('top')) : ?>
<div id="top">
<div class="inside">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php else : ?>
<div id="top"> </div>
<?php endif; ?>
NOTE
This code uses a conditional else statement to put in noncollapsing placeholder content, a nonbreaking space, so that if the top module location has no content, the full-size orange teaser image normally generated by the module will also not be there. What will be there is a nearly empty container that will contain a little of the background image and 20 pixels of vertical padding. This is purely for aesthetics.
The CSS needs to use CSS specificity for the .top module styles to override the generic moduletable styles defined earlier. These new styles specifically affect elements with the class moduletable that are descendants of the div with the id of top and would override any contrary settings for these style attributes set more generally for elements with the class moduletable:
#top {
background:#ea6800 url(../images/teaser.png) no-repeat;
padding:10px;
}
#top .moduletable h3 {
color:#fff;
background:none;
text-align:left;
font:2.5em Arial, Helvetica, sans-serif normal;
padding:0;
margin:0;
font-stretch:expanded
}
#top .moduletable{
font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0;
border:0;
}
Now let's focus on some of the typography.
Typography
Many of the links will need to be white, so you can define them as such globally and then modify the color for the center column:
a:link,a:visited {
text-decoration:underline;
color:#fff;
}
a:hover {
text-decoration:none;
}
#content60 a:link,#content60 a:visited,#content80 a:link,#content80
a:visited,#content100 a:link,#content100 a:visited {
color:#000;
}
The design has a stylized button. You create this by using a background image from the comp. It's a thin slice that is tiled horizontally:
.button {
border:#000 solid 1px;
background:#fff url(../images/buttonbackground.png) repeat-x;
height:25px;
margin:4px 0;
padding:0 4px;
cursor:hand;
}
For tables, such as a list of FAQs, you can add an easy background by repeating the use of the image you used for the teaser:
NOTE
Reusing the image saves on image download, making the pages load faster.
.sectiontableheader {
background:url(../images/teaser.png);
padding:5px;
color:#fff;
font:1.2em bold Arial, Helvetica, sans-serif;
}
The modules need just a simple redefinition and adjustments to the padding and margins:
/* Module styling */
.moduletable {
margin-bottom:1em;
color:#fff;
font-size:1.1em;
}
.moduletable h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}
Menus, as always, need a lot of style CSS. Here, you should keep it as simple as possible. You can slice a single image that includes both the bullet and the underline. Note that you turn on the styling by applying the module suffix menu to any menu modules that you want this look applied to:
/*Menu Styling*/
.moduletablemenu {
margin-bottom:1em;
}
.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}
.moduletablemenu ul {
list-style:none;
margin:5px 0;
}
.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}
.moduletablemenu a:link,.moduletablemenu a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}
.moduletablemenu a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
}
Last is the Tab menu at the top right. As an accessibility advocate, you want to set this up so that the tabs will scale as the font is resizing. Fortunately, a technique has been developed to do this; it's actually the same principle you use for our columns: the sliding doors again (see www.alistapart.com/articles/slidingdoors/)!
You can also try to do some speed optimization for the template and use just a single image for the left and right sides of the "doors," as well as the on and off states. This is known as using sprites (see www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites).
The CSS is not too difficult; you just have to fiddle around with the vertical position of the image background for the on state:
/*Tab Menu Styling*/
.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.moduletabletabs ul {
list-style:none;
float:right;
margin:0;
padding:0;
background:#212121;
width:100%;
}
.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}
.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
text-decoration:none;
margin:0;
padding:7px 18px 5px 9px;
}
.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}
.moduletabletabs #current a {
color:#fff;
background:url(../images/tabs.png) no-repeat 100% -84px;
}
You also need to add the module suffix tabs to the module for the menu you are using.
If you look back at the original design, you will notice that there are icons on these tabs. Because you are already using two background images, one on the li and one on the link, you need a third element on which to place the icon background. You could do this by having a span, but because this is advanced CSS Jujitsu, I'll leave it as a homework assignment.
NOTE
Because the XML file for the template uses folders for CSS and images, you don't need to edit it to add these new files you have created because they will be automatically picked up and installed.
The finished template should look as shown Figure 9.10.
)
Figure 9.10 An advanced template with typography.
The Least You Need to Know
Creating a production Joomla template is more a question of graphical design and CSS manipulation than some special Joomla knowledge.
CSSTemplateTutorialStep3
You now have a template based on a comp (or design). Some simple typography has been added, but more importantly, you have created a pure CSS layout that has dynamic collapsible columns and a slick tabbed menu.
I have created an installable template that is available from www.joomlabook.com: CSSTemplateTutorialStep3.zip.
Now that you have the basics done, let's start delving into some of the advanced features that are possible with Joomla 1.5 templates.