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.
Title of the component being used to display the content. There are no h tags with this so it will style differently than the next two. It is sometimes wrapped by a table, so if you are having difficulties styling it, try td.componentheading.
Example
h1.componentheading
Title of category when showing catagory titles in content.
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.
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
MISCELLANEOUSDates and Authors
.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.
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.
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.
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.
