Advanced Joomla Templating (Part 1) Using Component Class Suffix

Overview:
A guide on adding/making use of the component positions and suffix courses for templating within the joomla content management system (cms)

Article Body:
A peice from Consumer Written Sources

1 . replicate the designs already utilized for the particular element, adding the suffix with each style title. this will certainly include a few of the following;

one. module
2 . div. moduletable
3. div. moduletable h3
four. table. moduletable /li>
5. desk. moduletable th
6. kitchen table. moduletable td

and can include some other styles utilized on the content in this section, for example;

1 . ol, ul, li
second . a: hyperlink, a: frequented, a: float
three. a. readon: link, any. readon: went to, a. readon: hover

and others, remember that certain segments already might have specific css styles related to them (such as latestnews & mostread lists) if you are changing one of these quests, you might need in order to either take away the specific type so the component class suffix style could be applied, or simply change all those specific variations.

example through “freemambo template”

table. moduletable float: left; padding: 0px; margin: 0px; width: 152px; background: url(../images/leftright.gif); family table. moduletable th background: url(../images/subhead_bg.gif); font-size: 10px; text-align: center !important; text-align:center; padding-top: 4px; padding-left: 0px; height: 23px; text-decoration: none; width: 154px !important; width:152px; color:#FFFFFF; text-transform:uppercase; dining room table. moduletable td font-size: 11px; padding-left: 5px; padding-right: 2px; font-weight: normal; color:#000000;

absolutely no module suffix screenshot

2 . not make becomes these models as preferred.

example of becomes “freemambo template” – including suffix for example

table. moduletableeg float: left; padding: 0px; margin: 0px; width: 152px; stand. moduletableeg th background-color: #FF9900; color: #333333; font-size: 12px; text-align: center !important; text-align:center; padding-top: 2px; padding-left: 0px; height: 23px; text-decoration: none; width: 154px !important; width:152px; text-transform:lowercase; dinner table. moduletableeg td background-color: #EEEEEE; font-size: 11px; padding-left: 5px; padding-right: 2px; font-weight: normal; color:#FF0000;

like module suffix screenshot

a few. update the actual module course suffix inside joomla manager.

1 . visit ‘Modules’ -> ‘Site Modules’
installment payments on your click on the element you’d like to use the new css styles to be able to
3. the actual suffix a person used in the particular module school suffix area & click on ‘Save’

website module — edit screenshot