TKServer

Joomla! CSS Guide

Reference

admin is testing new CB Author Plug!

I'm always having to tweak Joomla! CSS files.  I've done a lot of "guessing" what some of the CSS does until I found a few good resources.  I decided to post this here so that I can refer to it, but so other people can benefit from this as well.

Overall (default / catch-all) Joomla! CSS settings:

  • body - Style for the body tag of your website.  Controls items such as the page background, etc.

  • div - Default format for all DIV (division) items in your template.  This is a catch-all that only applies when no other style has been defined for an item.

  • hr - Default format for all HR (horizontal line) items in your template.  This is a catch-all that only applies when no other style has been defined for an item.

  • p - Default format for all P (paragraph) items in your template.  This is a catch-all that only applies when no other style has been defined for an item.

  • td - Default format for TD (table data cells) items in your template.  This is a catch-all that only applies when no other style has been defined for an item.

  • tr - Default format for all TR (table row) items in you template.  This is a catch-all that only applies when no other style has been defined for an item.

  • ul - Default format for all UL (unordered list) items in your template.  This is a catch-all that only applies when no other style has been defined for an item.

  • a:link - Default hyperlink styling.  Applies when a link does not have a specific class defined.

  • a:visited - Default style for visited hyperlinks.  Applies when a link does not have a specific class defined.

  • a:hover - Default mouseover behavior for hyperlinks.  Applies when a link does not have a specific class defined.

    * Note: Additional overall styles (such as H1, H2, etc) can be defined for Joomla! as well.

Form settings:

  • .inputbox - Applies to all input boxes (such as the login and search boxes) that appear on your website.

  • .button - Applies to all buttons that appear on your website.

Page navigation (menus, etc):

  • a.mainlevel:link - Controls the hyperlinks in the main (first) level of all menus (becomes the default / initial style for all menu items).

  • a.mainlevel:visited - Style for visited menu items on the main (first) menu level.

  • a.mainlevel:hover - Style for the mouseover effect for the main (first) level of the menu items.

  • a.sublevel:link - Controls the hyperlinks in all subordinate (secondary / sub) menus.

  • a.sublevel:visited - Style for visited menu items in all subordinate (secondary / sub) menu level items.

  • a.sublevel:hover - Style for the mouseover effect for all subordinate (secondary / sub) menus.

  • pagenav - Sets the style for the footer navigation ("<< Start < Prev Next > End >>") when they do not appear as hyperlinks (when only a few articles exist).

  • a.pagenav:link - Style for the footer navigation links ("<< Start < Prev Next > End >>").

  • a.pagenav:visited -Style for visited footer navigation links ("<< Start < Prev Next > End >>").

  • a.pagenav:hover - Mouseover effect for the footer navigation links ("<< Start < Prev Next > End >>").

  • a.readon:link -  Style for the "Read More" link that is displayed for large contemt items.

  • a.readon:visited - Style for visited "Read More" hyperlinks that are displayed for large content items.

  • a.readon:hover - Mouseover effect for the "Read More" link that is displayed for large contect items.

 

Module format definitions:

  • table.moduletable - General styling for all modules.

  • table.moduletable th - Style for all module headings (names).

  • table.moduletable td - Style for all module data areas.

  • .poll -

Content page styles:

  • a.category:link -

  • a.category:hover -

  • a.category:visited -

  • .componentheading - Title of the component being used to display the content.

  • .contentheading - Title of the content, article, etc. being displayed.

  • .contentpane - Table that holds all non-article information (components, category lists, contact forms, etc).

  • .contentpaneopen - Table that holds the actual text for an article.

  • a.contentpagetitle:hover -

  • a.contentpagetitle:link -

  • a.contentpagetitle:visited -

Section listing styles:

  • .sectiontableheader

  • .sectiontableentry1

  • .sectiontableentry2

 

Styles for other information (site title, create date, breadcrumbs, etc):

  • .title - Style for the site title.

  • .pathway - Default styling for the pathway (or breadcrumbs) displayed by the mosPathWay() function.

  • a.pathway:link - Style for hyperlinks in the pathway (or breadcrumbs) displayed by the mosPathWay() function.

  • a.pathway:visited - Style for hyperlinks that you have visited in the pathway (or breadcrumbs) displayed by the mosPathWay() function.

  • a.pathway:hover - Style for the mouseover effect for hyperlinks that are displayed as part of the pathway (or breadcrumbs) displayed by the mosPathWay() function.

  • .createdate - Format of the "create date" displayed for various content items

  • .modifydate - Format for the "last updated" date displayed at the bottom of various content items.

Miscellaneous:

  • .ontab -

  • .offtab -

  • .tabpadding -

  • .tabheading -

  • .pagetext  -

  • .moscode - For modifying {moscode} output. 

  • .message - Text passed with mosmsg url parameter.

  • .small -

  • .smalldark -