There is a thin dotted line on each example to show spacing for each object. Format this however you would like using .example.

FORMS SETTINGS

.button: The link buttons used in Joomla!; Example
.inputbox: All form input boxes.
.search: Formatting the form which holds search items: inputbox, search button.

NAVIGATION/MENU SETTINGS

a.mainlevel, a.mainlevel:link, a.mainlevel:hover, a.mainlevel:visited

This styling is for the items in the default MAINMENU. Note: it isn't advisable to keep main menu as horizontal or vertical list. Make it a flat list and style it as a unordered list.

Example

#active_menu

Current page id for highlighting on main menu.

Example

ul#mainlevel-nav, ul#mainlevel-nav li, #mainlevel-nav a:link, #mainlevel-nav a:hover, #mainlevel-nav a:visited

Style for the default TOPMENU. Links are an unordered list.

Example

a.sublevel, a.sublevel:link, a.sublevel:visited, a.sublevel:hover

This styling is for menu items that has a parent.

Example

.pagenavbar

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

<< Start < Prev 1 Next> End >>

.pagenavbar:link, .pagenavbar:visited

Style for the footer navigation ("<< Start < Prev Next > End >>") when they become hyper links.

<< Start < Prev 1 2 Next> End >>

.pagenav

As the name implies, this is for formatting texts for those "<< Start < Previous 1 Next > End >>" links.

Example

a.pagenav, a.pagenav:visited, a.pagenav:hover

Links within .pagenav.

Example

.pagenav_prev

Style for the PREV button. Link is in a th in a table.

< Prev

.pagenav_next

Style for the NEXT button. Link is in a th in a table.

Next>

a.readon, a.readon:link, a.readon:hover, a.readon:visited

Style for the "Read More" link that is displayed for large content items

Example

h2.componentheading

Title of component when using directly in content (Example: Using URL menu item directly to component). Still researching every area this is used in.

Example

.contentitem h1

Title on content items.

Example

.contentheading

Title of the content, article, etc. being displayed. There is a rumored h2.contentheading somewhere, but I couldn't find it.

Example

.contentpane

Table that holds all non-article information (components, category lists, contact forms, etc). FAQ in default install is wrapped in this.

Example

.contentpaneopen

Table that holds the actual text for an article.

Example

.contentpagetitle

Title of articles.

Example

a.contentpagetitle:link, a.contentpagetitle:hover, a.contentpagetitle:visited

Title of articles when appeare as links.

Example

.contentdescription

Formating the "DESCRIPTION" of sections, categories (News/Weblinks/Latest news...).

Example

table.contenttoc

Formating the table of the Tables of Contents for multiple pages content or article.

Example

table.contenttoc td

Same as above, used to format the td and table cells.

Example

table.contenttoc th

Same as above, used to format the th of "Tables of Content" ( normally Article Index).

Article Index

table.contenttoc td.toclink, a.toclink:link, a.toclink:visited, a.toclink:hover

Same as above, used to format toc link texts.

Example

JOOMLA! SECTIONS LISTINGS

.sectiontableheader

This is for styling the section table headers on a SECTION's page. Example: table header of "Date", "Item Title", "Author" and "Hits"?

Date

.sectiontableentry1

Example

.sectiontableentry2

Example

JOOMLA! MODULES FORMATTING

A quick note about Joomla! modules. There are 4 settings for Joomla! modules from within the template:
-1 strips out all wrapper code including the title leaving only your module content.
-2 surrounds the module content with a div and places an h3 tag around the title (standards compliant!)
-3 is the same as -2 except that it wraps it with three additional div tags so that you can style custom module backgrounds and borders.
-4 Makes the entire module a table and places the title within a th tag.

table.moduletable

[-4 style] Formatting the module wrapper. If you are having any issues styling then write it as table.moduletable.

Example

table.moduletable th

[-4 style] Formatting the module header, and the module titles.

Example

table.moduletable td

[-4 style] Formatting the table cells of the module table.

Example

.moduletable div, .moduletable div div, .moduletable div div div

[-3 style] Outer div wrapping for all modules using -3 style.

Example

.moduletable h3

[-2 & -3 styles] Module titles.

Example

.moduletable ul li

Style for lists within modules. Example: Polls.

Example

MISCELLANEOUS

.createdate

For styling the date the content/articles are created under contents title.

Monday, 30 April 2007

.modifydate

Formating "Last updated on" text at the end of articles/contents.

Monday, 30 April 2007

.small

Formating "Written by:...." text.

Example

.smalldark

Found in poll result page, for " Number of Voters".. text.

Example

.pathway_text

Div that wraps the pathway.

Home

span.pathway a

Text link within pathway.

Home

span.pathway

Text within pathway.

Home

.pollstableborder

Set the border properties of the polls voting table (not sure why border isn't showing!)

Example

.poll

Format the poll container.

Example

.pollstableborder

Set the border properties of the polls voting table (not sure why border isn't showing!)

Example

a.category, a.category:link, a.category:hover, a.category:visited

To format the link's titles under the "Weblinks" section on the frontend. There is mention of a a.weblinks class, but I believe it has been retired. This is also used for listing news categories.

Example

.newsfeedheading, .newsfeeddate, .fase4rdf

I can't find any place that these are being used.

.searchintro

This is for formatting the box with "Search Keyword: test returned 4 matches" box that appears after you have entered a search value It appears on the mainbody with the search results. Text within it is wrapped in a b tag.

Search Keyword Joomla
Total 13 results found. Search for [ Joomla ] with Google

span.highlight

Highlighted words that match your search word(s).

Example

JOOMLA! TABBED FRONTEND ADMIN INTERFACE
The CSS below defines how the frontend admin interface when logged in.
Must be logged into the front end to view these styles.

#overDiv

Pop-up box giving details in front-end. This will change depending on your css. My css generally is like this to make it look right: #overDiv {font-size:.5em; margin: -21em 0 0 -27em;}

Example can't be included due to the absolute path needed for the javascript. Mouse over any edit button to see overDiv.

#toolbar

The id of the table which contains the SAVE, ACCEPT, CLOSE icons.

a.toolbar

Styling the SAVE, ACCEPT, CLOSE icon area.

.tab-row

Div that wraps tabs

Example

.dynamic-tab-pane-control, .tab-page, #content-pane

The classes and ID's that make up the bar that holds the tabs for IMAGES, PUBLISHING, and METADATA

Example

.tab

For styling of the "Tab" buttons when editing contents through the frontend as admin. This .ontab is the styling for the tab when it is active or after its "clicked".

Example

.tab .selected

For styling of the "Tab" buttons when editing contents through the frontend as admin. This .ontab is the styling for the tab when it is active or after its "clicked".

Example

.tab page #images-page table.adminform

Styles the tabbed page area under the selected tab.

Example

.ontab, .offtab, .tabpadding, .tabheading, .pagetext

There have all been mentioned before, but I haven't found any instance of them in the current Joomla!

Thanks to: http://www.technoboy.co.uk/webdesign/htmlcss/48-joomlastyles

Login to your account

Joomla Styles

Example

Example

Example

Example