Actions

Difference between revisions of "Module Class Suffix"

From Joomla! Documentation

(Update 3.0 to 3.1)
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
Page text taken from here; http://forum.joomla.org/viewtopic.php?f=40&t=70330
+
{{version|1.5,2.5,3.1}}
This page might also need editing!
+
{{Chunk:Module Class Suffix}}
  
 +
== Usage ==
  
You can use module class suffix to distinguish that module from others with regard to the css classes it uses.
+
If you enter a Module Class Suffix with a leading space, a new CSS class will be created. If your parameter does not have a leading space, the CSS class "moduletable" is modified. The first method is often preferred, since then you don't break any of the existing styling for the module, and you only need to add new CSS code for the new styling.
  
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.  
+
If you don't use a leading space, you will need to copy all of the styling code for the "moduletable" class and duplicate it for the new CSS class before making your CSS changes.
  
Then go to Site->Template Manager->Site Templates. Click the radio box for the template you're using; then click Edit CSS.
+
See [[Using Class Suffixes|the tutorial Using Class Suffixes]] for a detailed example of using Page and Module Class Suffixes.
  
Scroll down to your css classes for modules. You'll probably see generic settings like the following:
+
[[Category:Module Management]]
 
+
[[Category:Glossary]]
 
+
[[Category:Landing Pages]]
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:33, 29 April 2013

<translate> Module Class Suffix is a parameter in Joomla! modules. It is set Module: [Edit] screen under Advanced Parameters. Setting this parameter causes Joomla! to either add a new CSS class or modify the existing CSS class for the div element for this specific module.

When Joomla! generates a module, it automatically create a CSS class called "moduletable" to allow styling of the module -- for example,
<div class="moduletable">
To create a new class, enter the parameter with a leading space. For example, entering a space plus "myNewClass" will create a new CSS class called "myNewClass". The HTML will be changed to
<div class="moduletable myNewClass">
To change the name of the existing class, enter in the parameter without a leading space. For example, entering "_mySuffix" (no leading space) will cause the HTML to changed to
<div class="moduletable_mySuffix">

Generally, it is recommended to use a leading space to create a new class. This way, CSS styling for this module that uses the standard class names will continue to work. You can use the new class name to add any desired styling to the module without needing to re-create all of the existing CSS code. Note that, if you create a new class name, make sure it has a unique name and doesn't conflict with any existing class names.

See Using Class Suffixes for more information.</translate>


Usage

If you enter a Module Class Suffix with a leading space, a new CSS class will be created. If your parameter does not have a leading space, the CSS class "moduletable" is modified. The first method is often preferred, since then you don't break any of the existing styling for the module, and you only need to add new CSS code for the new styling.

If you don't use a leading space, you will need to copy all of the styling code for the "moduletable" class and duplicate it for the new CSS class before making your CSS changes.

See the tutorial Using Class Suffixes for a detailed example of using Page and Module Class Suffixes.