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
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 {}
.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 */
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 */
|
+- images/
Reading this article will give you:
- Basic overview of mambo layout.
- Tricks to well organize your page contents with mambo modules.
2. Joomla / Mambo layout overview.
Picture 1: Mambo Layout Overview
3. Layout explained
As you can see from Picture 1, Joomla / Mambo layout looks quite the same as any standardized portal webpages with 5 main parts:
- Top: <pathway>, <user3> and <user4> modules.
- Left: <left> module.
- Center: <banner>, <user1>, <user2> and <mainbody> modules.
- Right: <right> module.
- Bottom: <footer> module.
This is just a default layout, all modules can be placed anywhere defined in the index.php file of the template. The syntax of loading modules PHP code as follows:
mosLoadModules( $position_name [, $style] )
With Joomla 1.0.1 / Mambo 4.5.2 and older versions, we have 0 (default), -1, 1, -2 or -3? for the $style of Joomla / Mambo. In Joomla / Mambo 4.5.2.1 the value "-3" for the $style was introduced. So what are the differences of using 0, -1, 1, -2 or -3? [ see (c) in Picture 1 ]
- 0 = (default ). Modules are displayed in a column. The following shows an example of the output:
<!-- Begin : Individual module -->
<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td>
Module output
</td>
</tr>
</table>
<!-- End : Individual module -->
- 1 = Modules are displayed horizontally. Each module is output in the cell of a wrapper table. The following shows an example of the output:
<!-- Begin : Module wrapper -->
<table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr>
<td align="top">
<!-- Begin : Individual module -->
<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td>
Module output
</td>
</tr>
</table>
<!-- End : Individual module -->
</td>
<td align="top">
<!-- ...the next module... -->
</td>
</tr>
</table>
- -1 = Modules are displayed as raw output and without titles. The following shows an example of the output:
Module 1 OutputModule 2 OutputModule 3 Output
- -2 = Modules are displayed in X-Joomla / Mambo format. The following shows an example of the output:
<!-- Begin : Individual module -->
<div class="moduletable[suffix]">
<h3>Module Title</h3>
Module output
</div>
<!-- End : Individual module -->
- -3 = Modules are displayed in a format that allows, for example, stretchable rounded corners.
<!-- Begin : Individual module -->
<div class="module[suffix]">
<div>
<div>
<div>
<h3>Module Title</h3>
Module output
</div>
</div>
</div>
</div>
<!-- End : Individual module -->
I myself really like features of the new "-3" style. Using the "-3" will help you to create stylish rounded corners template for Joomla / Mambo. Step-by-step on how to create a rounded module is guided in this tutorial.
4. Tricks to hide / display modules wisely.
Obliviously in Joomla / Mambo templating, you have to preserve an area for a module to display. This area is often created with a fixed width block using <table, <td> or <div> tags . And the outcome of of this is when the module you desire to display is unpublished, the block you preserve will still be there, creating an ugly blank area and take the space of other contents. Therefore, a simple solution using if {} condition + mosCountModules syntax will be a perfect workaround. [ See (b) in Picture 1 ]
The sample code you see in Picture 1 is a standard one, a more complex if {} will produce a better result and remove unnecessary HTML codes. For example:
<!-- Begin : set the width for td of user1 and user2 -->
<?php
$numblock = 0;
if (mosCountModules( "user1" )>0 && mosCountModules( "user2" )>0) {
$numblock = 2;
$blockwidth = 50;
}else if (mosCountModules( "user1" )>0 || mosCountModules( "user2" )>0) {
$numblock = 1;
$blockwidth = 100;
}
?>
<!-- End : set the width for td of user1 and user2 -->
<!-- Begin : load module user1 and user2 -->
<?php if ($numblock > 0) { ?>
<tr>
<?php if (mosCountModules( "user1" )) { ?>
<td width="<?php echo $blockwidth; ?>%" valign="top">
<div class="colorbox">
<div id="user1" class="roundblock">
<?php mosLoadModules ( "user1", -3 ); ?>
</div>
</div>
</td>
<?php } ?>
<?php if (mosCountModules( "user2" )) { ?>
<td width="<?php echo $blockwidth; ?>%">
<div id="user2" class="roundblock">
<div class="colorbox">
<?php mosLoadModules ( "user2", -3 ); ?>
</div>
</div>
<?php } ?>
</tr>
<?php } ?>
<!-- End : load module user1 and user2 -->
I use above codes in MBT GREY template to organize user1 and user2 modules. Those advanced if {} codes will divide user1 and user2 display areas into 2 equal boxes if both are published [Picture 2]; stretch the box to fit with the main content when one of them is unpublished [Picture 3] and, of course both will be totally removed when they are unpublished.
Picture 2: User1 and User2 published
Picture 3: User1 published, User2 unpublished
Though the above tricks can be applied in all modules (especially left, right, top, users), to some standard modules which are often the "must have" modules of a your site like search (user4) , topmenu (user3), pathway (pathway), and mainbody (mosMainBody) then a simple if {} is enough. [ See (a) in Picture 1 ]
5. Bottom lines.
There are other 2 functions that are quite useful in Joomla / Mambo templates:
-
$mosConfig_sitename: use to display your site title. You can put this code in your header/logo area. For example
<?php echo "$mosConfig_sitename!"; ?>
$mosCurrentDate: use to display date
<?php echo mosCurrentDate(); ?>
or:
<?php echo mosFormatDate('2005-01-01 10:00:00'); ?>