media 65
Home | Login | Register | Order Products | Password Reset |

Media 65 Technologies | Beta 0.6 |
User Name:  Password:

Password Reset
Close

HomeMambo Knowledgebase › Free Guide To Mambo Css




  1. Free Guide To Mambo Css
  2. General settings
  3. Layout settings
  4. Navigation section
  5. Standard module table
  6. Content - sections & categories
  7. Form section
  8. Tabbed editing

Free Guide To Mambo Css

Mambo Template Kit Visual CSS Reference 4.5X.X 


Building on the CSS and the DOM there are many sections to the Mambo CMS.
We give you a foundation from which to start from.
Each section is broken down in as close to top down as possible.
These are the sections :

  1. Free Guide To Mambo Css
  2. General settings
  3. Layout settings
  4. Navigation section
  5. Standard module table
  6. Content - sections & categories
  7. Form section
  8. Tabbed editing

Mambo uses standard CSS you can use any styles you like.
Mambo contains core class’s that are used for module and component formatting
You may add to theses styles as you would any style sheet.

What is a Module?
Modules are containers blocks of data that are zoned and are included inside the template. They can hold any type of information. There are modules and module zones and blocks. A module in and of it self can be menu system a visitor poll etc.. a module zone is a place that you put the module like the left side of the page in a template. A Block is say the “top block” which is called a module position in Mambo can have many modules assigned to one block in a stacking order so the menu first and the poll is last so one block/position can store many modules.

module map

Modules have a wrapper or I should say most have a wrapper.
A wrapper is a HTML code that could be a table it could be a DIV element and in one case no wrapper at all.

The wrapper can have special formatting applied to it but in most cases the that formatting is it part of the see "STANDARD MODULE TABLE" section. Also see extension help file for “Module Menu Styles” with shows the HTML code to the wrapper.

Wrapper

An example is the “.moduletable class”. Which in our style sheet is under
“STANDARD MODULE TABLE” this class is used by default in all of your core modules.
In DOM & CSS  you can give an HTML element formatting globally.
Lets say table element “table{Some formatting;}” in Mambo this works the same way.

In our example we use “table.moduletable{ Some formatting;}” this means the any table element in the module class will have
“{ Some formatting;}”.
Now as we should all know tables are made up of more then a table tag they also have “<TH>”<TD> and so on. So lets say we what to add formatting to the <TH> tag for a Table Header.
 

 It would look like this "table.moduletable th{ Some formatting;}". Now you can build down on every element piece by piece if you like. We are not going to get into a CSS course here I’d just like to give you small example.

This example could have been a
div.moduletable { Some formatting;} it does not matter which tags you use matter of fact you don’t have to use a HTML
element in front of the “.moduletable” class at all.
It could be “.moduletable{ Some formatting;}” it is up to you how you use it.
But at minimum you should have core class styled.


Now one more thing about modules.
Modules can also have what’s called a Module suffix like a last name. So using the example above
"table.moduletable.mysuffix{ Some formatting;}"can also be .moduletable.mysuffix{ Some formatting;} or
  .moduletable-mysuffix{ Some formatting;} the suffix is the dot or dash after the moduletable.


A class suffix is added to the "table.moduletable.mysuffix{}" now this is a class element on to itself were you can override the standard style if applied to an module.

Class suffix styles are applied via parameters via the module settings in the module administrator back-end. Now lets talk about parameters for one minute. You will see these everywhere in the Mambo CMS in pages, sections, modules, categories all over.

This means that you can override any style in almost any element in Mambo.
But you have to added the code class suffix to the style sheet and applied to the elements pages, sections, modules, categories etc.. if not the stock core styles will be applied by default.

What is Component?
A component is like a small application onto itself it displayed in Mambo.
There are core components and third party components. Core components share style sheets class’s for the most part. Which can be found in the CONTENT - SECTIONS & CATEGORIES section of our sheet. As with any CSS style class you can build on any element level so could override a global style by applying a local style to the class element.

For example you may have UL - Unordered list that is a general rule for all UL's
on your page. Which would apply to a components styles by default. But this UL can be overridden by using “.blog UL{}” this would take over the style of the UL's for this component class only all other would have the global UL formatting.

Third party components some use the cores styles some don’t you have to look at the documentation for the third party component.

We cover the core component class’s in the CONTENT - SECTIONS & CATEGORIES of the style sheet.

What we give you is a stander CSS style sheet the gives you a foundation for
to build on as you can see we can’t add every element because we don’t know what your designing.
So we give some samples to build on yourself.

Reference and Examples.
Any Standard Mambo Class can have:
| Optional HTML Element | CMS-CORE-CLASS | Optional HTML Element | .suffix or -suffix

All legal

.blog{}
table.blog{}
.blog th{}

Module Class Suffix
.moduletable.blueheader th{link to image;}

Component with Suffix
.blog.greytable{}
. componentheading-movingGif{}

Now a good question would be what are the core class?
It hard not give you a very long list.

“.moduletable” your going to use more the any core class see
STANDARD MODULE TABLE section.

Also under the CONTENT - SECTIONS & CATEGORIES look for the top class in order
.blog that would Identify a core class.

Another is “.mainlevel” this controls the formatting for the menu system. It also has a “.sublevel” for sublevel menus of the “.mainmenu” when you like to add new menu to Mambo and give that menu formatting other then “.mainlevel” use a class suffix. “.mainlevel.topnav{}” works just like the module example.
I would like to cover more of the menu but it’s a chapter itself on working the menu not the formatting more the menu system this should be enough to cover it as CSS goes. See NAVIGATION SECTION


Here is the base template_css.css file that comes with the extension.
We show you an image cutout of which part of Mambo is affected by what code sections.

  1. Free Guide To Mambo Css
  2. General settings
  3. Layout settings
  4. Navigation section
  5. Standard module table
  6. Content - sections & categories
  7. Form section
  8. Tabbed editing
^Top