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.

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:

Compare this with a header that uses a photo:

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:

• https://www.joomla.org/templates/jw_joomla/images/jos_box_grey_bl.png
• https://www.joomla.org/templates/jw_joomla/images/jos_box_grey_br.png
• https://www.joomla.org/templates/jw_joomla/images/jos_box_grey_tl.png
• https://www.joomla.org/templates/jw_joomla/images/jos_box_grey_tr.png

And here is the code:

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:

and

The CSS used to produce the effect is:

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.

and

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%

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

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
(https://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

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

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.

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

� 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