Actions

Difference between revisions of "Module Class Suffix"

From Joomla! Documentation

m (New page: {{cookiejar}})
 
Line 1: Line 1:
{{cookiejar}}
+
Page text taken from here; http://forum.joomla.org/viewtopic.php?f=40&t=70330
 +
This page might also need editing!
 +
 
 +
 
 +
You can use module class suffix to distinguish that module from others with regard to the css classes it uses. 
 +
 
 +
Open the module that you want to style in your backend: Module->Site Modules->Module Name link. Add a suffix of your choice, say  _mymodulestyle ,  in the module class suffix parameter box, and save.
 +
 
 +
Then go to Site->Template Manager->Site Templates. Click the radio box for the template you're using; then click Edit CSS.
 +
 
 +
Scroll down to your css classes for modules. You'll probably see generic settings like the following:
 +
 
 +
 
 +
table.moduletable {
 +
  width            : 167px;
 +
  border          : 1px solid #C0C0C0;
 +
  margin-bottom    : 10px;
 +
  margin-left      :10px;
 +
}
 +
 
 +
table.moduletable th {
 +
  font-size        : small; 
 +
  font-weight      : bold;
 +
  color            : #000; 
 +
  background      : #FFF;
 +
  text-align      : center;
 +
  padding-left    : 3px;
 +
  padding-right    : 11px;
 +
  letter-spacing  : -1px;
 +
  border-bottom    : 1px solid #999999;
 +
}
 +
 
 +
table.moduletable td {
 +
  padding          : 2px 4px;
 +
  background      : #FFF;
 +
  font-size        : x-small;
 +
}
 +
 
 +
 
 +
To begin the style for your the module you're working on, you might first duplicate those classes that interest you (leaving the original for modules you're not modifying. Then add to the duplicate(s) your suffix to the classes you want to change.  Say you want to change your module table heading class, you might do something like this:
 +
 
 +
 
 +
table.moduletable_mymodulestyle th {
 +
  font-size        : small; 
 +
  font-weight      : bold;
 +
  color            : #888; 
 +
  background      : #FFF;
 +
  text-align      : right;
 +
  padding-left    : 3px;
 +
  padding-right    : 11px;
 +
  letter-spacing  : -1px;
 +
  border-bottom    : 2px solid #999999;
 +
}
 +
 
 +
 
 +
If you use the developer extension in Firefox, it makes experimenting with and modifying css classes much easier: http://forum.joomla.org/index.php/topic,35531.0.html.

Revision as of 04:54, 20 October 2008

Page text taken from here; http://forum.joomla.org/viewtopic.php?f=40&t=70330 This page might also need editing!


You can use module class suffix to distinguish that module from others with regard to the css classes it uses.

Open the module that you want to style in your backend: Module->Site Modules->Module Name link. Add a suffix of your choice, say _mymodulestyle , in the module class suffix parameter box, and save.

Then go to Site->Template Manager->Site Templates. Click the radio box for the template you're using; then click Edit CSS.

Scroll down to your css classes for modules. You'll probably see generic settings like the following:


table.moduletable {

 width            : 167px;
 border          : 1px solid #C0C0C0;
 margin-bottom    : 10px;
 margin-left      :10px;

}

table.moduletable th {

 font-size        : small;  
 font-weight      : bold;
 color            : #000;  
 background      : #FFF;
 text-align      : center;
 padding-left    : 3px;
 padding-right    : 11px;
 letter-spacing  : -1px;
 border-bottom    : 1px solid #999999;

}

table.moduletable td {

 padding          : 2px 4px;
 background      : #FFF; 
 font-size        : x-small;

}


To begin the style for your the module you're working on, you might first duplicate those classes that interest you (leaving the original for modules you're not modifying. Then add to the duplicate(s) your suffix to the classes you want to change. Say you want to change your module table heading class, you might do something like this:


table.moduletable_mymodulestyle th {

 font-size        : small;  
 font-weight      : bold; 
 color            : #888;  
 background      : #FFF;
 text-align      : right;
 padding-left    : 3px;
 padding-right    : 11px;
 letter-spacing  : -1px;
 border-bottom    : 2px solid #999999;

}


If you use the developer extension in Firefox, it makes experimenting with and modifying css classes much easier: http://forum.joomla.org/index.php/topic,35531.0.html.