FOLLOW USJoomlashack FacebookJoomlashack TwitterJoomlashack Google +Joomlashack RSS

Joomlashack logo blog
Published on 18 May 2007

Joomla Template Tutorial - Appendix A:Tips and Tricks

Article Index

Appendix A: Tips and Tricks

Variable Page Widths, Rounded Corners, Text Resizers and More

Variable Page Widths

The design discussed here is a fluid page. It will resize with the browser window with a 10% page width margin on the left and right. Even though we have set the column widths to percentages, we can still have a fixed width page by setting #width to an absolute number. Designing in this way means much more flexibility, its possible to change the page width by editing just one line of code.

One aspect to be careful of when working with fluid page design is images. Whichever direction you need to expand in, there always need to be a portion of solid color that can expand. Usually a small piece of the image is sliced and then repeated.

Fluid Image Slicing

As you can see in the example above, there is an area in the middle that can be scaled. The CSS might look like this:

background: url('/../images/FluidImageSlicingMIDDLE.png') 0 0 repeat-x;

Compare this with a header that uses a photo:

Fluid Image Slicing

There is no area here that can be repeated, and so this type of header would not work in a fluid design.

This principle applies to any sort of scaling, vertical or horizontal. There must be a fraction of the image that can be repeated.

Another advantage of having the template use percentage based column widths is the use of a width resizer. By using seperate stylesheets, its possible to dynamically change the page width based on the user's preference. You can see this in action at Compass Design.

Rounded Corners

Probably the most common design look at the moment for modules is using rounded corners for the boxes. The current standard is to use the "-3" module style to produce 3 <div>'s. These three and then the main .module <div> are used to place 4 images round the box.

You can see this in action at www.joomla.org. Here are the 4 images:

And here is the code:

div.module-grey h3, div.moduletable-grey h3 {
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: bold;
color: #333;
margin: -2px -8px 0 -8px;
border-bottom: 1px solid #cdcdcd;
padding-left: 10px;
padding-bottom: 2px;
}
div.module-grey, div.moduletable-grey {
background: url(../images/jos_box_grey_tl.png) 0 0 no-repeat;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
div.module-grey div, div.moduletable-grey div {
background: url(../images/jos_box_grey_tr.png) 100% 0 no-repeat;
}
div.module-grey div div, div.moduletable-grey div div {
background: url(../images/jos_box_grey_bl.png) 0 100% no-repeat;
}
div.module-grey div div div, div.moduletable-grey div div div {
background: url('/../images/jos_box_grey_br.png') 100% 100% no-repeat;
padding: 8px;
width: auto !important;
width: 100%;
}
div.module-grey ul, div.moduletable-grey ul {
margin: 10px 0;
padding-left: 20px;
}

Many techniques exist to produce rounded corners. A couple of sites that have summaries of them are css-discuss.incutio.com and Smiley Cat.

Fixed Width Boxes with Two Images

First developed at Joomlashack, its possible to half the number of images used in a box. This technique will give boxes that scale vertically but not horizontally.

The two images used are:

Two image boxes and Two Image Box

The CSS used to produce the effect is:

.moduletable-box {
margin:0 0 10px 0;
padding:0 0 10px 0;
background:url(../images/bottom.png) bottom left no-repeat;
}
.moduletable-box h3 {
padding:8px 10px 6px 15px;
margin-bottom:8px;
text-align:left;
font:bold 1.1em Arial,Helvetica,sans-serif;
color:#fff;
background: url('/../images/top.png') top left no-repeat;
}

This technique is particulary useful for a number of reasons:

  • The bottom box image can be reused with different colors
  • The H3 heading's background will scale with text resizing (joomla.org technique does not)
  • It is very lean in code
  • Half as many images are twice as fast (roughly) to load

It requires the module $style suffix to be "-2" to work correctly.

Fluid Width and Height Boxes with Two Images

A more advance technique has been developed by Compass Design. It requires the module $style suffix to be "-3" to work correctly. Again, each <div> is used to place the corner of a box, but only two images are used. A module class suffix of -box has been used here.

Left Fluid Box and    Fluid right box

.module-box {
background: url(../images/boxright.png) top right no-repeat;
padding:0;
margin:0 0 10px 0;
}
.module-box h3 {
margin:0;
padding:0 0 4px 0;
border-bottom:#ccc 1px solid;
color: #666;
font: bold 1em Tahoma, Arial, Helvetica, sans-serif;
text-align:center;
}
.module-box div {
background: url(../images/boxleft.png) top left no-repeat;
margin:0;
padding:6px 0 0 0;
}
.module-box div div{
background: url(../images/boxleft.png) bottom left no-repeat;
padding:0 0 0 5px;
}
.module-box div div div{
background: url('/../images/boxright.png') bottom right no-repeat;
padding:0 5px 5px 0;
height:auto !important;
height:1%;
}

This technique will scale vertically and horizontally.

Almost any technique from the two sites given earlier should work. Of paricular interest is 456bereastreet's Flexible box with custom corners and borders. This only uses one image so it would be easy to change colors. The implementation of this technique is left as an excercise for the reader!

Text Resizers

Many size are becoming more accessible and are incorperating text resizers into the design. As a general rule for best cross-browser consistancy, you need to do a few of things for text resizer buttons to work well:

1. in the body tag, define a font size of 76%

body { font-size:76%; }

2. Define all font sizes in "em". This is a relative unit, for example:

p { font-size:1em; }

3. Make all text containers dynamic. An example of this not working is www.joomla.org. If you make bigger, the container for the horizontal menu does not get bigger, if you use FF to go past the size that you can acheive with the buttons (ctrl+ in FF), the layout breaks. You get round it by not putting any fixed heights on containers, you can see this working at www.joomlashack.com.

4. Download joomla.org's font style switcher file
(http://forum.joomla.org/Themes/joomla/md_stylechanger.js)

5. Put that file somewhere in the folder of the template you are using

6. Put A+, A-, and Reset images in your template's image folder

7. Paste the following code snippet somewhere in your template's index.php file

<script type="text/javascript" language="javascript" src="/ /templates/getTemplate(); ?>/____1____">
</script>
<a href="/index.php" title="Increase size" onclick="changeFontSize(1);return false;">
<img src="/<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____2____" alt="" border="0" />
</a>
<a href="/index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
<img src="/<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____3____" alt="" border="0" />
</a>
<a href="/index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
<img src="/<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____4____" alt="" border="0" />
</a>

8. Do all of the following:

  • Replace ____1____ with the location in your template folder where you saved the .js file
  • Replace ____2____ with the name of your A+ image
  • Replace ____3____ with the name of your A- image
  • Replace ____4____ with the name of your Reset image

Thanks to r0tt3n and his FAQ at the Joomla forums for portions of this technique.

Drop Down Menus

For various reasons, SEO and accessibility amoung them, the author is biased against flash and JavaScript. Better to emphasize W3C valid code and lean pages, neither of which is helped by these two approaches. How then to acheive menus that duplicate these effects, like a drop down menu.

Well, there are a number of techniques you can use with CSS to get more visually attractive menus, all of them use unordered lists (bulleted lists) to create the menu. Let�s look at one, a drop down menu.

The menu is what has been coined "suckerfish", its pure CSS, very lean, hack free and just has 12 lines of JavaScript for IE.

You can see a demo here:
www.htmldog.com/articles/suckerfish/dropdowns/example/

You can find guides to how the thing works at a couple of sites:
www.htmldog.com/articles/suckerfish/dropdowns/
www.alistapart.com/articles/dropdowns/

Now, you might have noticed that you need your menu outputted as a good clean list. Well it just so happens that there is a module out there to do this, and we�ll need it. Its called extended_menu, you can find it here:
de.siteof.de/extended-menu.html

It's easiest if you give it a menu and module class suffix. I used "mainnav" for both (you�ll see in the CSS below). A couple of other settings you will need:

  • Menu style: Tree List
  • Expand Menu: Yes
.moduletablemainnav{
position:relative;
z-index:100;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#mainlevelmainnav,#mainlevelmainnav ul{
float:left;
list-style:none;
line-height:1em;
background:transparent;
font-weight:700;
margin:0;
padding:0;
}
#mainlevelmainnav a{
display:block;
color:#f90;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}
#mainlevelmainnav li{
float:left;
padding:0;
}
#mainlevelmainnav li ul{
position:absolute;
left:-999em;
height:auto;
width:11em;
font-weight:400;
background:#36f;
border:#00C 1px solid;
margin:0;
}
#mainlevelmainnav li li{
width:11em;
}
#mainlevelmainnav li ul a{
width:11em;
color:#fff;
font-size:0.9em;
line-height:1em;
font-weight:400;
}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul, #mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
left:-999em;
}
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul, #mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul, #mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul{
left:auto;
z-index:6000;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}

Now, just make sure you have the z-indexes set up properly, also remember to have a z-index, the element needs some sort of positioning, if not absolute then relative.

Last but not least you need to add the JavaScript for IE into the head of the template index.php (or a js file), it does not interpret :hover correctly.

<script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script>

This technique is discussed further at the Joomla forums.

More Tips and Tricks

We will be adding more design tips to this document. If you want to get these updates, make sure you subscribe to our newsletter at www.compassdesigns.net

Joomla template design from Compass Design� 2006 Compass Design/Barrie North.
Barrie creates joomla template designs at his consultancy, Compass Design
Please This email address is being protected from spambots. You need JavaScript enabled to view it. if you'd like to use this article on your site

 

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.

published in Joomla Tutorials

RECENT POSTS