media 65
Home | Login | Register | Order Products | Password Reset |

Media 65 Technologies
User Name:  Password:

Password Reset
Close

Home › Joomla! › Joomla Template Kits Tutorials › Joomla Template Kit 3.X Manual





Joomla Template Kit 3.X Manual

CSS

 

Joomla's CSS is one of the most confusing parts of Joomla for beginners and pros alike.
I have tried to make this as easy as possible by adding a new tool called J CSS Designer

Dreamweaver has a bad habit of writing all the CSS styles to the HTML document itself and for most people its fine.
But when you start designing CSS with a little meat on it's not a good choice.

Now back to Joomla for years people have been asking what is Joomla's default styles?

  1. Component styles.
  2. Module styles and something called module suffixes.
  3. Some Plug-ins have styles as well.
  4. Navigation styles AKA the default menus etc.
  5. Your own styles class names layout etc.


Which all can fit into the template.css file.

New to the Joomla Template Kit 3.X.
I added J CSS Designer which does a few things first an foremost it breaks down the template.css into parts that are easier to ID because there grouped.
So you don't have to hunt down thru a large file to edit a class.


Secondly it gives you a super powerful visual map of the styles used in Joomla in sections, components and modules etc.
The CSS Class ID names are highlighted in blue right next to the effected item plus the HTML that it effected by the style.


This works hand in hand with the Dreamweaver CSS editor. You ID the class name on the J CSS Designer
and on your right float bar you open the DW CSS editor and edit the Class.
The changes are in real time.

The J CSS Designer has a Jump menu which you can Jump to a section of the J CSS Designer in your browser.
By clicking the JCSS Preview button to see any rollover effects to your styles like the default menu etc.


I think now your starting to see the Power of the J CSS Designer.

The flow is easy once you map your site.
Make a base Joomla Template folder with our wizard.

1. Open the index.php page and click on the JTK tool > CSS Switcher: "Add local" button to add the CSS local view styles in DW.
2. Click JTK tool > CSS Switcher: "Open JCSS Designer" button to open the J_CSS_Designer.html page
3. Once the the J_CSS_Designer.html page is open select it and click on the JTK tool > CSS Switcher: "Add local" button to add the CSS to the designer.
4. Save all files JTK tool > Preview: "Save All" button.


Designing with the J CSS Designer is done in two stages.
1. Design your templates framework aka layout and add Joomla Template code.
2. Design your templates inside content template framework style with the JCSS designer.

First Stage:
Add your layout to index.php page and Joomla code tags to index.php page and save your work.
if your using table-less layout add the rules to the layouts.css file for easy de-bugging.

Second Stage:
Open the J_CSS_Designer.html and start to ID and edit the CSS classes to see your inside content styles.
content styles, module styles, sections, categories and components effected in one page instead of having to go back and fourth in the browser.

See Tutorials for design flow.

De-bugging is made easy because all the styles are link together from the template.css with an import rule.
So if you need to De-bug a style you can comment out the import CSS file.

template.css imports


layouts.css:
If your going to use div table-less layouts this is a good place to keep them.

components.css:
This style sheet has all the default core Joomla 1.5.X classes use in all the components with commented descriptions.

modules.css:
This style sheet has most core classes of modules in Joomla 1.5.X  but the Menu which have been moved to the Navigation.css
most are commented even if they don't have styles.

navigation.css:
This style sheet stores Joomla's core Menu CSS and should be used for any third party CSS if possible
to keep track of menus.

misc.css:
This style sheet miscellaneous styles quote marks etc. blank by default.

forms.css:
This style sheet stores most of Joomla form elements even components and or modules forms elements
a lot of these classes are used thru out many components and modules that have form elements in them and are very generic.

browserhacks.css:
This style sheet can be used for browser hacks etc.
 It's not linked to the template.css sheet because its a hack need's to be called only for a special browser detected.

The J CSS Designer visually out the styles for you.

The second half of this page I will discuss modules and module class suffix's.
I have mentioned in the What is a Module? > Module Chrome page module Chrome or Wrapper.
In the chart you can see that are six default styles that one can add to the Module position call style parameter.



  1. None
  2. Table
  3. XHTML
  4. Rounded
  5. Horizontal
  6. Outline


[

Parameter style name

Example chrome wrapper HTML output

none


table

mod_style_code2

horz

mod_style_code3

xhtml

mod_style_code4

rounded

mod_style_code5

outline

mod_style_code6

Custom

Add your Chrome Wrapper see How To section.



The module or modules called by the module position can have there own HTML formatting to control the data layout that are hard coded into the module itself.
Then depending on the module style parameter set in the module position call in the template every module assigned to that module position gets a chrome wrapper.
That can be any in the above chart by default.Now the output of the chrome wrapper can be nothing or a table or single DIV tag or many DIV tags that surround the
module data.

Now the question is what CSS style or styles that effects the module style chrome wrapper?
There are two classes

".moduletable"
The ".moduletable" class effects the module position parameter styles table and horz.
If you look at the output of the HTML code you see that Class parameter is set to ".moduletable" class and there is a underscore and the *Suffix I'll get to the suffix part later on.
Now it makes sense that the class name is called ".moduletable" because both wrappers are tables.
Now this not a lesson on CSS but you can now build on the class using CSS code that deals with table elements.

".module"
The ".module" class effects the module position parameter styles xhtml and rounded.
If you look at the output of the HTML code you see that Class parameter is set to ".module" class and there is a underscore and the *Suffix I'll get to the suffix part later on.
Now it makes sense that the class name is called ".module" because both wrappers are DIV's. Now this not a lesson on CSS but you can now build on the class
using CSS code that deals with DIV elements.

What's a Module Suffix?
A module suffix is like a last name so if the class name was ".Brian" the suffix is the last name of a person in my case Diaz.
So the class would look like this ".Brian_Diaz". So how does this help with Joomla styles? Well I'm not the only ".Brian" in the world.
There can be ".Brian_Dias" we share the same first name the last name makes us different.

There are two main module chrome wrappers styles ".moduletable" for table element styles and ".module" for DIV element styles.
Now we can have many modules on a template as many as you like. But where going to run into a design problem soon why?
Because there are only two CSS styles class for us to use! ".moduletable" & ".module"

So here is where module suffix come in just like a last name it changes who the person is.
But keeps the same first name ".moduletable" for tables or a ".module" for DIV's.

If you added a module include tag for a module in the template with module parameter Style=xhtml output would be "<div class="moduletable">".

If the suffix is not set it will not print out the "_*Suffix" part just the ".moduletable" part which would give you the default style set in the modules.css style sheet.
The module suffix is set via the Joomla module manager.

 

 ".moduletable" class with a suffix to the modules.css file



You would get a red background on that module Chrome Wrapper with the "_Diaz" suffix on it and everything else the uses the ".moduletable" class would have a white
background.

So you can add as many module suffixes to your style sheet as you like to give your template modules a different look.
Just remember to build on the default module classes.

A another question that maybe asked is why the underscore with the suffix name?
Well it does not have to be an underscore but needs to be a character that's not a letter or number. A "-" dash or underscore work best it easier to ID the class.

Lastly for this suffix discussion I mention above that  ".moduletable" was for module position parameter
 styles tables and that ".module" class was for Div elements.

This is not all the way true.
I believe that it was a design mistake made by the Mambo CMS and was then carried over to Joomla.

If you notice that module parameter Style=xhtml style class is ".moduletable" not ".module". and its outputs are div tags.
I think of xhtml markup as div's tags etc. as most designers do.

So the module parameter Style=xhtml style class should be ".module" but it's not.
I just wanted to point that out so you don't start emailing about a typo but something that's been there from the Mambo days.

Another major part of the CSS in Joomla is the menu system.
It can not be explained in one quick paragraph see the Joomla Menu System for more information on the CSS styles and menu system itself.
Just keep this in mind the Joomla default menus are tied into the module system.

Every menu has at lease one module and as a module the module chrome wrapper rules apply to menus as well.
Menus are called just like any other module but have another layer of style control based on  Menu Style parameter set in the Module Manager.
 
^Top