Module Class Suffix - Revision history

Wilsonge: Update 3.0 to 3.1

2013-04-29T09:33:38Z

Update 3.0 to 3.1

Wilsonge at 19:19, 5 April 2013

2013-04-05T19:19:59Z

Mvangeest: Adjusted link after page move

2011-11-18T22:02:14Z

Adjusted link after page move

Mvangeest: Adjusted link after page move

2011-01-28T15:54:13Z

Adjusted link after page move

Mvangeest: Added category

2011-01-28T15:46:58Z

Added category

Mvangeest: Module class suffixes moved to Module Class Suffix: Adjusted title plurality and capitalization for consistency with other Glossary pages

2011-01-28T15:40:27Z

Module class suffixes moved to Module Class Suffix: Adjusted title plurality and capitalization for consistency with other Glossary pages

Dextercowley: add glossary link, discuss leading space, and remove example and instead point to full tutorial

2009-01-16T19:44:09Z

add glossary link, discuss leading space, and remove example and instead point to full tutorial

John37309 at 09:54, 20 October 2008

2008-10-20T09:54:50Z

Chris Davenport: New page: {{cookiejar}}

2008-06-19T08:34:11Z

New page: {{cookiejar}}

New page

← Older revision		Revision as of 09:33, 29 April 2013
Line 1:		Line 1:
−	{{version\|1.5,2.5,3.0}}	+	{{version\|1.5,2.5,3.1}}
	{{Chunk:Module Class Suffix}}		{{Chunk:Module Class Suffix}}

← Older revision		Revision as of 19:19, 5 April 2013
Line 1:		Line 1:
		+	{{version\|1.5,2.5,3.0}}
	{{Chunk:Module Class Suffix}}		{{Chunk:Module Class Suffix}}

← Older revision		Revision as of 22:02, 18 November 2011
Line 1:		Line 1:
−	{{Module Class Suffix}}	+	{{Chunk:Module Class Suffix}}

	== Usage ==		== Usage ==

@@ Line 7: / Line 7: @@
 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 [[Tutorial:Using_Class_Suffixes_in_Joomla!_1.5|Using Class Suffixes in Joomla! 1.5]] for a detailed example of using Page and Module Class Suffixes.
+See [[Using Class Suffixes|the tutorial Using Class Suffixes]] for a detailed example of using Page and Module Class Suffixes.
 [[Category:Module Management]]
 [[Category:Glossary]]
 [[Category:Landing Pages]]

@@ Line 1: / Line 1: @@
-For a definition of Module Class Suffix, see the [[Glossary#Module_Class_Suffix | Joomla! Glossary]]. You can use The Module Class Suffix parameter to create unique CSS classes that allow you to style one module differently than others.
+{{Module Class Suffix}}
 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.
@@ Line 6: / Line 8: @@
 See the tutorial [[Tutorial:Using_Class_Suffixes_in_Joomla!_1.5|Using Class Suffixes in Joomla! 1.5]] for a detailed example of using Page and Module Class Suffixes.

@@ Line 1: / Line 1: @@
-Page text taken from here; http://forum.joomla.org/viewtopic.php?f=40&t=70330
+For a definition of Module Class Suffix, see the [[Glossary#Module_Class_Suffix | Joomla! Glossary]]. You can use The Module Class Suffix parameter to create unique CSS classes that allow you to style one module differently than others.
-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.
+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.
-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.
+See the tutorial [[Tutorial:Using_Class_Suffixes_in_Joomla!_1.5|Using Class Suffixes in Joomla! 1.5]] for a detailed example of using Page and Module Class Suffixes.
-−
-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.

← Older revision		Revision as of 09:54, 20 October 2008
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.