Beruflich Dokumente
Kultur Dokumente
This tutorial will give you an overview of Joomla / Mambo CSS styling. All of the basic css elements of Mambo is put into
a clean and easy-to-read picture which will help you to remember in a quickest time. The CSS elements here are
updated with the latest version of Joomla / Mambo and I strongly believe that they can be applied in coming Joomla
1.0.X / Mambo 4.5.X releases.
The below diagram displays most basic css elements of the latest Mambo version (4.5.x) using the default template
(rhuk_solarflare_ii).
Each Joomla / Mambo template has a CSS file named " template_css.css" located in
installdir/templates/
|
+- template_name/
|
+- index.php
|
+- template_thumbnail.png
|
+- templateDetails.xml
|
+- css/
| |
| +- template_css.css
|
+- images/
{mosgoogle center}
{mosgoogle center}
By now, you have had an overview of Joomla / Mambo CSS, I list here all the CSS elements of Joomla 1.0.X / Mambo
4.5.X with detail explanation so that you can understand further. This is a blank (no style is set) but totally complete css
file of a standard Joomla / Mambo template.
You can highlight and copy then paste into your text editor or download the sample CSS file (right click >> save target
http://www.joomlart.com Powered by Joomla! Generated: 5 April, 2006, 03:07
Joomla Templates Club - Professional - High quality Joomla template
as). Most of css files of many templates do not include all Joomla / Mambo CSS elements (even the default ones). So my
Mambo standard css file will be a good place for you to start from.
/* STANDARD COMPLETE CSS FOR JOOMLA 1.0.X and MAMBO 4.5.X TEMPLATES */
/* By Dinh Viet Hung (C) http://www.joomlart.com: Free templates and Professional Templates Club */
/* DEFAULT SETTINGS */
/* Below are default settings are used when no other style has been defined.*/
body {}/*Style for the body tag of your website, controls font family page background, etc.*/
p {} /*formatting all (division) items. This is a catch-all that only applies when no other
style has been defined.*/
td {} /*formatting all
items. This default setting is used when no other style has been defined.*/
tr {} /*formatting all
items. This default setting is used when no other style has been defined.*/
ul {} /*formatting all UL (unordered list) items. This default setting is used when no other style
has been defined.*/
a:link {} /* general links style*/
a:visited {}
a:hover {}
hr {} /* horizontal line in your template*/
hr.separator {}
/* FORMS SETTINGS */
.button {}
.inputbox {}
.search {} /*formatting the which holds search items: inputbox, search button...*/
/* NAVIGATION/MENU SETTINGS */
#active_menu {} /* this styling is for the menu item when it is active, even in main/sub position*/
ul#mainlevel-nav {}
ul#mainlevel-nav li{}
#mainlevel-nav a:link {}
#mainlevel-nav a:visited{}
#mainlevel-nav a:hover {}
.pagenavbar {} /*Sets the style for the footer navigation (" End >>")
when they do not appear as hyperlinks (when only a few articles exist).*/
.pagenavbar:link {} /*Style for the footer navigation (" End >>") when
they become hyper links*/
.pagenavbar:visited {}
.pagenav {} /* as the name implies, this is for formatting texts for those
" End >>" links */
a.pagenav:visited {}
a.pagenav:hover {}
a.readon:link {} /*Style for the "Read More" link that is displayed for large content items*/
a.readon:hover {}
a.readon:visited {}
.latestnews ul {} /*Style for latest news list - by default, latest news is user1 module*/
.latestnews li {}
.mostread ul{} /*Style for most popular list - by default, most popular is user2 module*/
.mostread li{}
.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.*/
.contentpagetitle {} /*Title of articles*/
/* MISCELLANEOUS */
/* Dates , Authors*/
.createdate {} /* For styling the date the content/articles are created under contents title */
.modifydate {} /* Formating "Last updated on" text at the end of articles/contents */
.small {} /* Formating "Written by:...." text */
.smalldark {}/*Found in poll result page, for " Number of Voters".. text */
http://www.joomlart.com Powered by Joomla! Generated: 5 April, 2006, 03:07
Joomla Templates Club - Professional - High quality Joomla template
/* Polls */
.poll {} /* format the td of poll table */
.pollstableborder {} /* set the border properties of the polls voting table */
/* Weblinks */
.weblinks{} /* well.. to format the link's titles under the "Weblinks"
section on the frontend */
a.weblinks:hover {} /* same as above, but for link with mouseover */
/* Newsfeeds */
.newsfeedheading {} /* The newsfeed title. NOTE: This will not affect the newsfeed's
news title! */
.newsfeeddate {} /* yeah.. the date on the newsfeed */
.fase4rdf {} /* this is the body text of the newsfeed */
/* Search page */
table.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 */
.ontab {}/* 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" */
.offtab {} /* Same as above, used for styling of the "Tab" buttons when editing
contents through the frontend.
This the styling for the tab when it is NOT active or when it is NOT "clicked" */
.tabpadding {} /* this style is used set the size of the tab in the above */
.tabheading {} /* Not too sure what this is used for. Couldn't find anything
related to it yet at the moment */
.pagetext {} /* this style is used to style the content of the editing form
contents (where HTMLArea sits and all its forms + contents) in the frontend
Administration interface */
{mosgoogle center}
Normally, you tend to make your template look match with your site contents or just want to make it distinguished from
the others. Therefore, playing around with your css file is the most popular practice of Joomla / Mambo users. The file
you have just download is not filled with any style at all. If you do not want to start from scratch or feel un familiar with css
styling, you can open another template_css.css file of any existing templates for css reference, copy and paste, make
some changes and refresh to see how they affect your Jooma / Mambo site.
5. Is that all?
template_css.css is just a part of Joomla / Mambo templating job. CSS defines content elements your Joomla / Mambo
pages. Layout and modules navigation of your template are also important. Details of Joomla / Mambo layout are also
picturized and well explained in this tutorial: Joomla / Mambo layout and navigation guides.