Main Menu
Home
Search
Forum
Portfolio
About Me
Contact Me
Downloads
Guest Book
Ben's Blog
Joomla Related
Tutorials
Templates
Modules
Church Related
How to Know God
Prayer Requests
Daily Devotion
Church Directory
Monthly Columns
ADVERTISEMENT
CSS Overview
Written by Ben   
Monday, 18 October 2004
Article Index
CSS Overview
Styling Map 1
Styling Map 2
Styling Map 3
Custom CSS
Credits

Styling Map 1

Click to Enlarge
Click to Enlarge












Collapse All Expand All

A - .sitename

Below is an example of the css code for the styling of the website name when called in a template.

[+]


B - .pathway

Below is an example of the css code for the styling of the pathway. Some people use the default link class for this, but I believe that it is better to have your own class in case the pathway is called somewhere within your template that has a conflicting color. Also notice that the pathway class has four different styles. Default, link, visited, and hover. The link and visited are combined here but can be seperated for better control.

[+]


C - table.moduletable

Below is an example of the default css code for all modules. Notice the tree different styles that are assigned to the modules. First is the overall table that holds the modules. Second is the module header or where the module name appears (th). Second is where the module information is displayed (td). In the case of the image it is the main menu links or the next section which is D.

[+]


D - a.mainlevel

Below is an example of the css code for the main leve menu links. Notice the three different styles. Link and visited which are combined here, but can be seperated for more control and then hover.

[+]


E - .inputbox

Below is an example of the css code for the input box. This applies to all input boxes such as the login and search boxes.

[+]



F - .button

Below is an example of the css code for the buttons. This applies to all buttons that appear on your website.

[+]


G - a:link

Below is an example of the css code for the default link class of the template. Every template has this default class in case there is a link that does not have a specific class defined to it. Notice there are three different styles. Link and visited are combined but can be seperated for more control and hover.

[+]


H - .componentheading

Below is an example of the css code for the title of the component that is being used to display content. This applies to to all components unless the component has a it specified in it's own style sheet.

[+]


I - .contentheading

Below is an example of the css code for the title of the content being displayed. This is the name or title given to the article/content that you create such as 'Welcome to Joomla'.

[+]


J - .small

Below is an example of the css code for the small styling class. This is used for misc. information such as it is used in this template.

[+]


K - .createdate

Below is an example of the css code for the date that content is created.

[+]


L - td,tr,p,div

Below is an example of the css code for the default text for a template. This covers all text that does not have a style already assigned to it.

[+]


M - .modifydate

Below is an example of the css code that displays the date content was last modified.

[+]


N - a:readon

Below is an example of the css code that displays the Read More... link to the rest of the content. Notice the three different styles. Link and visited which are combined and can be seperated for more control and hover.

[+]


O - .backbutton

Below is an example of the css code for the Back button. Some use the default link style for this, but I prefer to use it's own class for better control and a more pleasing visual style.

[+]


P - .polls

Below is an example of the css code for the polls module. This includes the styles for the text and the table itself.

[+]


Q - .sectiontableentry2

Below is an example of the css code that differentiates between the different rows in tables for polls, forums, etc.

[+]


R - .sectiontableentry1

Below is an example of the css code for the alternate row color of the tables for polls, forums, etc.

[+]