Become a webdsign master


Advanced Joomla Templating (pt1) Using Module Class Suffix

an  article  from  User  Written  Resourcespadding-left: 0px; height: 23px;
text-decoration: none; width: 154px
1. duplicate the styles already used for the!important; width:152px; color:#FFFFFF;
particular module, adding a suffix to eachtext-transform:uppercase; } table.moduletable
style name. this will definitely includetd { font-size: 11px; padding-left: 5px;
some  of  the  following;padding-right: 2px; font-weight: normal;
color:#000000;  }no  module suffix screenshot
1.  .module  {}
2 .make changes to these styles as
2.  div.moduletable  {}desired.example of changes to "freemambo
template" - adding suffix
3.  div.moduletable  h3  {}egtable.moduletableeg { float: left; padding:
0px; margin: 0px; width: 152px; }
4.  table.moduletable  {}/li>table.moduletableeg th { background-color:
#FF9900; color: #333333; font-size: 12px;
5.  table.moduletable  thtext-align: center !important;
text-align:center; padding-top: 2px;
6. table.moduletable tdand can include otherpadding-left: 0px; height: 23px;
styles used on the content in that section,text-decoration: none; width: 154px
such  as;!important; width:152px;
text-transform:lowercase; }
1.  ol,  ul,  li  {}table.moduletableeg td { background-color:
#EEEEEE; font-size: 11px; padding-left: 5px;
2.  a:link,a:visited,a:hover  {}padding-right: 2px; font-weight: normal;
color:#FF0000;  }eg  module suffix screenshot
3.
a.readon:link,a.readon:visited,a.readon:hover3. update the module class suffix within
{}and others, note that certain modulesjoomla  administrator.
already may have specific css styles
associated with them (such as latestnews &1.  go  to  'Modules'  ->  'Site  Modules'
mostread lists) so if you are modifying one
of these modules, you might need to either2. click on the module you'd like to apply
remove the specific style so the module classthe  new  css  styles  to
suffix style can be applied, or just change
those specific styles.example from "freemambo3. enter the suffix you used in the module
template"table.moduletable { float: left;class suffix field & click 'Save'site module
padding: 0px; margin: 0px; width: 152px;- edit screenshottechnology geek, music
background: url(../images/leftright.gif); }addict, websaavy, fiction fan, wannabe
table.moduletable th { background: url(..writer, fantasy/sci-fi aficionadopersonal
images/subhead_bg.gif); font-size: 10px;site: natsirtm.comnew site just started -
text-align: center !important;revenue sharing for authors: User Written
text-align:center; padding-top: 4px;Resources.



1 A B C D E 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128