|Joomla Template Tutorial|
|What is a Joomla Template?|
|Localhost Design Process|
|W3C and Tableless Design|
|The Template Components|
|Using CSS to create a layout|
|Appendix A:Tips and Tricks|
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.
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:
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:
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.
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!
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
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
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.
You can see a demo here:
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:
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.
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