Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?

option=com_content&task=v...

Understanding Joomla / Mambo CSS in 5 minutes

Written by Administrator
Thursday, 16 June 2005

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.

1. Picturize the CSS

The below diagram displays most basic css elements of the latest Mambo version (4.5.x) using the default
template (rhuk_solarflare_ii).

Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?

option=com_content&task=v... Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo...
http://www.joomlart.com/index2.php?option=com_content&task=v...
2. Where to find this CSS
Each Joomla / Mambo template has a CSS file named " template_css.css" located in %installdir
%/templates/template_name/css folder. Location structure of a template is as follows:

installdir/templates/
|
+- template_name/

|
+- index.php
|
+- template_thumbnail.png
|
+- templateDetails.xml
|
+- css/
||
| +- template_css.css
|
+- images/

Ads by Goooooogle Advertise on this site

IntelliJ IDEA
Java IDE with advanced HTML/CSS/JS editor for hardcore
web-developers.
www.jetbrains.com

MFC to .NET resources

Converts MFC to .NET resources in C# & VB.NET supports
VS 2003 / 2005
www.dudelabs.com

Ads by Goooooogle Advertise on this site

Buy Css
See a list of trusted online stock trading services now.
Stocks.StockTape.com

digital camera
links to kodak digital camera information
www.disasterkit.info/kodakdi
Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?
option=com_content&task=v...
3. Break down a little further
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 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 <div> (division) items. This is a catch-all that only applies when no other
style has been defined.*/
td {} /*formatting all
<td> items. This default setting is used when no other style has been defined.*/
tr {} /*formatting all
<tr> 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 <div> which holds search items: inputbox, search button...*/

/* NAVIGATION/MENU SETTINGS */

a.mainlevel{} /* this styling is for the MAIN items in the menu */

a.mainlevel:link {}
a.mainlevel:visited {}
a.mainlevel:hover {}

#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 {}
 a.sublevel{} /* this styling is for menu items that HAS A PARENT */
a.sublevel:link {}
a.sublevel:visited {}
a.sublevel:hover {}

.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).*/

.pagenavbar:link {} /*Style for the footer navigation ("<< Start < Prev Next > End >>") when
they become hyper links*/
.pagenavbar:visited {}
Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?
option=com_content&task=v...

.pagenav {} /* as the name implies, this is for formatting texts for those "<< Start < Previous 1
Next > 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 {}

.back_button {} /*Style for the "BACK" button*/

.pagenav_prev {} /*Style for the PRE button*/
.pagenav_next {} /*Style for the NEXT button*/

.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{}

/* CONTENT PAGE SETTINGS */

a.category:link {} a.category:hover {}
a.category:visited {}

.blogsection {} /* Formatting the links in Blog section */

.blog_more {} /*The "More" text in blog section*/
a.blogsection:link {} /* set the link format */
a.blogsection:visited {} /* same as above, but to set the visited link format */
a.blogsection:hover {} /* same as above, but for links with mouse pointer over it */

.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*/
a.contentpagetitle:hover {} /*Title of articles when appeare as links */
a.contentpagetitle:link {}
a.contentpagetitle:visited {}

.contentdescription {} /* Formating the "DESCRIPTION" of sections, categories

(News/Weblinks/Latest news...) */
table.contenttoc {} /* Formating the table of the Tables of Contents for multiple
pages content or article */
table.contenttoc td {} /* same as above, used to format the td and able cells */
table.contenttoc th {} /* same as above, used to format the th of "Tables of
Content" ( normally Article Index)*/
table.contenttoc td.toclink {} /* same as above, used to format toc link texts*/
a.toclink:link {} /* same as above, used to format toc link text status*/
a.toclink:visited {}
a.toclink:hover {}

/* JOOMLA - MAMBO 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"? */

.sectiontableentry1 {} .sectiontableentry2 {}

/* JOOMLA - MAMBO MODULES FORMATTING */ table.moduletable {} /*

Formatting the module table */
Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?
option=com_content&task=v...

table.moduletable th {} /* Formatting the module header, and the module titles */

table.moduletable td {} /* Formatting the table cells of the module table */

/* 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 */

/* 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 */

/* JOOMLA - MAMBO TABBED FRONTEND ADMIN INTERFACE */

/* The CSS below efines how the frontend admin interface when logged in */

.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 */

Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?

option=com_content&task=v...

Ads by Goooooogle Advertise on this site

Free Web Design Tips

Get totally free web design tips, help &
tutorials. No registration.
www.tutorialized.com

CSS Web Design Forums

Discuss CSS, HTML, PHP, Javascript,
& more at WebmasterGeeks.com!
WebmasterGeeks.com

4. Joomla / Mambo Template CSS: Tweaking and Tuning

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.
 Hope you enjoy reading.

Comments

Great tutorial
Written by Guest on 2005-06-17 15:28:25

The Mambo CSS Tutorial gives a quick and easy reference to the user that started to experience with Mambo.

Thanks ! i can now go and change values directly.

Regards,

Written by Guest on 2005-06-19 19:21:29

Thanks allot guyz!!

this is really what i needed hehe.

for now i have check other templates but this explanation is really good for i am new to mambo.

Kind regards,
Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?
option=com_content&task=v...

Jeroen
The Dism Crew

superbe!!!
Written by Guest on 2005-06-20 08:56:55

Thanks, Anna

Written by Guest on 2005-06-21 20:56:42

Bravo,ci voleva!
Very usefull! I was looking just for this.
Grazie,
Giacco :grin

Great Shit!
Written by Guest on 2005-06-23 19:19:10

Very helpfull! Thank you for this good tutorial!

Written by Guest on 2005-06-23 19:19:10

Very helpfull! Thank you for this good tutorial!

How do we adjust the width

Written by Guest on 2005-06-24 03:15:43

Hi, Looks good, how do we adjust the

width of the user3 in mbt_shopping ?
i search through the css file but can't find user3 for adjusting the wdith. i wanna make it wider as currently there is
a bug.
the width
is shorter than it should be. :sigh

thanks

Hi all
Written by admin on 2005-06-24 09:01:48

Thank you for your nice comments. If you need help on a specific problem, please kindly send an email to
support[at]joomlart.com Though I receive a lot of emails everyday but I will try to answer as many as I can, if you
are our Club member, please leave your username or email to get my first attention.

css ok but with editor ?

Written by Guest on 2005-06-24 10:49:39

I want to ask a question about css with Mambo editor..

I want to write something as a news in mambo.

How can i choose Css class etc. with the editor ?
I also installed tmedit (htmlarea3_xtd) but I dont see the css tags..

Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?

option=com_content&task=v...

Written by Guest on 2005-06-24 14:50:02

Thanks for the wonderful job, you may be too busy while setting this up to benifit the public and everyone, but
obvioulsy email is not a good good channel if you get too busy.

Hope to get a reply althought i have sent a few emails few days ago. Perhaps open a forum for FAQ, discussions
etc, so that we can get some help form the public too.

I am waiting
Written by Guest on 2005-06-24 14:50:13

Thanks for the wonderful job, you may be too busy while setting this up to benifit the public and everyone, but
obvioulsy email is not a good good channel if you get too busy.
Hope to get a reply althought i have sent a few emails few days ago. Perhaps open a forum for FAQ, discussions
etc, so that we can get some help form the public too.

thanks a bunch.
Written by Guest on 2005-07-04 02:13:38

well put together. very informative

Written by Guest on 2005-07-12 07:59:22

the tutorial is clear and precise and can be very interesting also for experts. thanks a lot

thanks - this page was just what i was l

Written by Guest on 2005-07-18 03:01:41

thanks for writing this - :grin

Thank you very much

a. Written by Guest on 2005-07-21 21:43:31
b. Written by Guest on 2005-07-30 14:57:06

Very much appreciate this. Clear, concise, and very complete.

Excelleng work
thanks very much for posting this.

GSBE

Splendid
Written by Guest on 2005-08-01 21:02:15

this is good i will try to convert my current layout which is in html format to mambo template using this
guide

Written by Guest on 2005-08-04 03:42:30

Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?

option=com_content&task=v...

cool and awesome...thanks :grin

Written by Guest on 2005-08-10 17:21:52

great work. Thanks.

Written by Guest on 2005-08-11 02:16:00

Thanks so much for this very helpful guide!

Thanks - You have just saved my Ass!

Written by Guest on 2005-08-26 07:18:24

I've been trying to work out how the CSS worked for weeks

:grin

sooo impressed
Written by Guest on 2005-08-27 01:11:21

i ave been trying to create mambo templates but the css always gave me problems cos i couldnt understand it.
This is an astonishing work, how joomlart has taken time out to illustrate it. Well done guys...i can now take a start
on creating the perfect template. Thank you

GREAT JOB!
Written by Guest on 2005-09-02 22:34:03

THIS IS WHAT I HAVE BEEN LOOKING

FOR!!!! GREAT JOB!!

Written by Guest on 2005-09-08 14:33:06

this is what i was looking for a long, long time... :)

Very informative
Written by Guest on 2005-09-18 00:23:27

Good job. The visual representation of the css elements were of great value to me.

Thanks for your efforts.

Customising the Template

Written by Guest on 2005-09-22 11:00:38

I just customised the template for the Coimbatore City site and everything worked well. This tutorial gives more
insight into the site and I have to give the credit to the person. Keep up the good work.
-Mohan
CubicMac
Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?
option=com_content&task=v...

Written by Guest on 2005-09-23 04:07:26

:) Thank you!!

Excellent Superb Brilliant (oh and THANK

Written by Guest on 2005-09-25 09:15:12

Hi,
Superb piece of documentation!

Any chance you can take the lead in developing readable guides and documentation for the rest of the
design/develepment/mods/etc people :grin :grin

Great stuff
Written by Guest on 2005-09-26 14:44:35

Thank you! I wish there was more help/resources like this for Mambo related issues. More, more...

Written by Guest on 2005-10-11 12:47:02

great tutorial for beginers like me thanks dennis

Written by Guest on 2005-10-24 05:51:37

THANKS HEAPS!! this is really wat i needed!! thanks heaps, and really good work! keep it up, and nice site!

thank you!
Written by Guest on 2005-10-28 07:03:59

congratulation for this exellent tutorial! it's very

usefull and extremely clear good work!

Many thanks
Written by Guest on 2005-11-16 05:27:42

It's great. I apply your suggest on Makama Joomla development

Written by Guest on 2005-11-16 19:30:15

Will link to you from www.mindiam.com :grin

many thanks
Written by jani on 2005-11-30 03:50:28

thank you for the information...

Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?

option=com_content&task=v...

Written by Guest on 2005-12-19 13:54:48

very good and easy to understand

Written by BillyKiD on 2005-12-20 05:36:25

super thank's

hello
Written by Guest on 2006-01-06 20:57:03

Wow,

Thanks its all so much clearer now.

Joomlaselect Joomla Templates

Mehmet Egemen DERVİŞOĞLU

Written by Guest on 2006-01-17 00:59:09
I'm From Turkey... Thank you man

perfect!
Written by Haluk BİLGE on 2006-01-20 18:20:54

teşekkürler (mean thank you) from Turkey...

Written by Fernando Buitrago on 2006-01-20 21:38:46

But not a site, thats just what I need all the times, Thanks a Lot and Regards.
I'm so happy Fer

Write Comment

Please keep the topic of messages relevant to the subject of the article.
Personal verbal attacks will be deleted.
Please don't use comments to plug your web site.. Such material will be removed

Name: Title: BBCode:

Joomla -Mambo Professional Templates Club -JoomlArt.com -Jo... http://www.joomlart.com/index2.php?
option=com_content&task=v...

Comment:

Image Verification:

Enter what you see.

Powered by AkoComment 2.0! and SecurityImage 1.1.3 Last Updated

( Sunday, 15 January 2006 )

Close Window