eg: UK or Brides UK or Classical Art or Buy Music or Spirituality
 
eg: UK or Brides UK or Classical Art or Buy Music or Spirituality
 

Your Online Guide » Guide to Technology » Web Site Development

[J105]Joomla Module Class Suffix
by John Smith, Joh
1. duplicate the styles already used for the particular module, adding a suffix to each style name. this will definitely include some of the following;

1. .module {}
2. div.moduletable {}
3. div.moduletable h3 {}
4. table.moduletable {}/li>
5. table.moduletable th
6. table.moduletable td

and can include other styles used on the content in that section, such as;

1. ol, ul, li {}
2. a:link,a:visited,a:hover {}
3. a.readon:link,a.readon:visited,a.readon:hover {}

and others, note that certain modules already may have specific css styles associated with them (such as latestnews & mostread lists) so if you are modifying one of these modules, you might need to either remove the specific style so the module class suffix style can be applied, or just change those specific styles.

example from "freemambo template"

table.moduletable { float: left; padding: 0px; margin: 0px; width: 152px; background: url(../images/leftright.gif); } 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; } table.moduletable td { font-size: 11px; padding-left: 5px; padding-right: 2px; font-weight: normal; color:#000000; }

no module suffix screenshot

2 .make changes to these styles as desired.

example of changes to "freemambo template" - adding suffix eg

table.moduletableeg { float: left; padding: 0px; margin: 0px; width: 152px; } table.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; } table.moduletableeg td { background-color: #EEEEEE; font-size: 11px; padding-left: 5px; padding-right: 2px; font-weight: normal; color:#FF0000; }

eg module suffix screenshot

3. update the module class suffix within joomla administrator.

1. go to 'Modules' -> 'Site Modules'
2. click on the module you'd like to apply the new css styles to
3. enter the suffix you used in the module class suffix field & click 'Save'

site module - edit screenshot
John Smith has sinced written about articles on various topics from Programming, Health Insurance and Site Promotion. technology geek, music addict, websaavy, fiction fan, wannabe writer, fantasy/sci-fi aficionadopersonal site: natsirtm.comnew site just started - revenue sharing. John Smith's top article generates over 110000 views. Bookmark John Smith to your Favourites.
EditorialToday Guide to Technology has 3 sub sections. Such as Technology, Increase Adsense Revenue and Information & Technology. With over 20,000 authors and writers, we are a well known online resource and editorial services site in United Kingdom, Canada & America . Here, we cover all the major topics from self help guide to A Guide to Business, Guide to Finance, Ideas for Marketing, Legal Guide, Lettre De Motivation, Guide to Insurance, Guide to Health, Guide to Medical, Military Service, Guide to Women, Pet Guide, Politics and Policy , Guide to Technology, The Travel Guide, Information on Cars, Entertainment Guide, Family Guide to, Hobbies and Interests, Quality Home Improvement, Arts & Humanities and many more.
About Editorial Today | Contact Us | Terms of Use | Submit an Article | Our Authors