Joomla 1.5 template design with YAML CSS Framework
I usually start with a Yaml scaffolding when I make a new template for Joomla. When I use Yaml I know the basic structure of the HTML document is the best possible, and the CSS will work for IE6 out of the box. Yaml has been created by far more design and CSS savvy people than me and I trust them completely.
The process usually works like this:
1.) I select a base template from the Yaml examples that fit my needs most.
2.) I copy it and the Yaml core to the Joomla template folder, in this step I also have to change some paths in the CSS files to correctly reflect the new structure. Usually it’s just a matter of replacing a few ../../ with ../ to account for the fact that I have moved files up from the examples folder. Setting <files> <filename>index.php</filename> </files> and not much more in templateDetails.xml enables me to install the fresh template.
3.) The modifying work can start; mostly it’s a matter of changing the CSS and inserting <:jdoc blabla > where I want them.
Usually that is all there is to it but in one particular instance we just had to have a horizontal menu with buttons instead of text as links. Setting the images in the Joomla admin module is no problem, the problem is that the system then treats them as some kind of bullet graphics which is not what I wanted in this case and it’s impossible to save menu items with a null text value. Simply put: The texts end up to the side of the the images causing displacements. However, setting font-size:0px for the class that styles the div that contains the menu solved the problem, in firefox.
Not in ie6 of course, in ie6 there was a visible gap between each menu element where the text would have been. I don’t about you but for me 0 is 0, it’s nothing, not so for some poor soul at Microsoft apparently. Setting font-size to negative values in the patch file for ie6 didn’t help either. I had to set the menu texts to a single character in the Joomla backend, not a major hassle since you have the slugs to guide you as to what is what anyway back there. I also had to set the right margin to -1px in the ie6 patch file for the class that controls each menu element. The need to constantly have to make use of negatives is a prime example of how insane ie6 is. I think I spent over 2 hours on ie6 related problems setting up this template, I put it on Steve’s bill.