Using Class Suffixes - Revision history

Wilsonge: Update 1.5.9 to 1.5.26. Mark with JSplit tag

2013-05-01T08:32:46Z

Update 1.5.9 to 1.5.26. Mark with JSplit tag

Wilsonge: Update 1.6 to 2.5

2013-05-01T08:29:47Z

Update 1.6 to 2.5

Mvangeest: Adjusted link after page move

2011-01-15T16:41:06Z

Adjusted link after page move

Mvangeest: Tutorial:Using Class Suffixes moved to Using Class Suffixes: Moved page to main namespace because the Tutorial namespace is deprecated

2011-01-15T15:40:31Z

Tutorial:Using Class Suffixes moved to Using Class Suffixes: Moved page to main namespace because the Tutorial namespace is deprecated

Realityking: typo

2011-01-08T17:04:50Z

typo

Realityking at 17:03, 8 January 2011

2011-01-08T17:03:40Z

Realityking: Tutorial:Using Class Suffixes in Joomla! 1.5 moved to Tutorial:Using Class Suffixes

2011-01-08T17:01:35Z

Tutorial:Using Class Suffixes in Joomla! 1.5 moved to Tutorial:Using Class Suffixes

Tahar: /* Menu Class Suffix */

2009-08-30T03:28:16Z

‎Menu Class Suffix

Dextercowley: remove review tag

2009-06-28T16:14:21Z

remove review tag

Felham: Added about Menu Class Suffixes and moved the part about Module Class Suffixes that were under Menu Class Suffixes to where it belongs (under Module Class Suffixes), and also added new sub headlines.

2009-04-27T13:22:44Z

Added about Menu Class Suffixes and moved the part about Module Class Suffixes that were under Menu Class Suffixes to where it belongs (under Module Class Suffixes), and also added new sub headlines.

@@ Line 1: / Line 1: @@
 {{JVer|1.5}}{{JVer|2.5}}This tutorial was written for Joomla 1.5, however the differences to Joomla 2.5 are minor.
-This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! to fine-tune the appearance of your site. For the tutorial, we will assume you have the Joomla! 1.5.9 Sample site available.
+This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! to fine-tune the appearance of your site. For the tutorial, we will assume you have the Joomla! 1.5.26 Sample site available.
 ==Background==

@@ Line 1: / Line 1: @@
-{{JVer|1.5}}{{JVer|1.6}}This tutorial was written for Joomla 1.5, however the differences to Joomla 1.6 are minor.
+{{JVer|1.5}}{{JVer|2.5}}This tutorial was written for Joomla 1.5, however the differences to Joomla 2.5 are minor.
 This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! to fine-tune the appearance of your site. For the tutorial, we will assume you have the Joomla! 1.5.9 Sample site available.
@@ Line 236: / Line 236: @@
 The Class Suffix and Menu Tag ID parameters allow you to fine-tune the CSS styling of your web site. By using a leading space in the suffix name, we can create a new class. This is normally the preferred method, since, as long as the new class name does not conflict with an existing class, no existing styling will be broken.
 [[Category:Tutorials]]
 [[Category:Templates]]

@@ Line 34: / Line 34: @@
 :<pre><table class="contentpaneopen"></pre>
-<blockquote>''Note: The following screenshots were made using the free Firefox add-in called "Firebug". Firebug allows you to quickly see the relationship between the HTML elements in your source and the text and graphics shown on the page.  It is a very handy tool, and you can get it [https://addons.mozilla.org/en-US/firefox/addon/1843 here]. There is also a free video tutorial about using Firebug with Joomla! available [[Tutorial:Using_Firebug_With_Your_Joomla_Website|here]].''</blockquote>
+<blockquote>''Note: The following screenshots were made using the free Firefox add-in called '''Firebug'''. Firebug allows you to quickly see the relationship between the HTML elements in your source and the text and graphics shown on the page.  It is a very handy tool, and you can get it [https://addons.mozilla.org/en-US/firefox/addon/1843 here]. For more information, please watch [[Using Firebug With Your Joomla Website|the free video tutorial on using Firebug with Joomla]].''</blockquote>
 The screenshot below shows you the "componentheading" class. It is the page title area above the blog article.
@@ Line 237: / Line 237: @@
 [[Category:Tutorials]]

← Older revision		Revision as of 17:04, 8 January 2011
Line 1:		Line 1:
−	{{JVer\|1.5}}{{JVer\|1.6}}This tutorial was written for Joomla 1.5, however the differences to Joomla 1.6 are ~~minot~~.	+	{{JVer\|1.5}}{{JVer\|1.6}}This tutorial was written for Joomla 1.5, however the differences to Joomla 1.6 are minor.

	This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! to fine-tune the appearance of your site. For the tutorial, we will assume you have the Joomla! 1.5.9 Sample site available.		This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! to fine-tune the appearance of your site. For the tutorial, we will assume you have the Joomla! 1.5.9 Sample site available.

← Older revision		Revision as of 17:03, 8 January 2011
Line 1:		Line 1:
−	This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! ~~1.5~~ to fine-tune the appearance of your site. For the tutorial, we will assume you have the Joomla! 1.5.9 Sample site available.	+	{{JVer\|1.5}}{{JVer\|1.6}}This tutorial was written for Joomla 1.5, however the differences to Joomla 1.6 are minot.
		+
		+	This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! to fine-tune the appearance of your site. For the tutorial, we will assume you have the Joomla! 1.5.9 Sample site available.

	==Background==		==Background==

@@ Line 208: / Line 208: @@
 The Menu Class Suffix inserts an extra suffix in the class for the unordered list that builds up the menu. If unedited, the class is "menu". If adding "_myMenuClass" under Advanced Parameters &rarr; Menu Class Suffix, the new tag will be "menu_myMenuClass".
-(This behaviour is only for the Menu Style "List". If chossing "Legacy - Vertical" or "Legacy - Horizontal", the class suffix will be added to the links in the table; this suffix will then be "mainlevel_myMenuClass". When choosing the Legacy Flat List, the suffix will be added the links (as on the two other Legacy lists), but it will also be added to the ul tag, but as an id rather than a class; the id will be "mainlevel_myMenuClass".)
+(This behaviour is only for the Menu Style "List". If choosing "Legacy - Vertical" or "Legacy - Horizontal", the class suffix will be added to the links in the table; this suffix will then be "mainlevel_myMenuClass". When choosing the Legacy Flat List, the suffix will be added to the links (as on the two other Legacy lists), but it will also be added to the ul tag, but as an id rather than a class; the id will be "mainlevel_myMenuClass".)
 ===Menu Tag ID parameter===

← Older revision		Revision as of 16:14, 28 June 2009
Line 1:		Line 1:
−	~~{{review}}~~
	This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! 1.5 to fine-tune the appearance of your site. For the tutorial, we will assume you have the Joomla! 1.5.9 Sample site available.		This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! 1.5 to fine-tune the appearance of your site. For the tutorial, we will assume you have the Joomla! 1.5.9 Sample site available.

@@ Line 163: / Line 163: @@
 The CSS selector <code>div.customLatestClass</code> sets the background color for the entire area. The three selectors <code>div.customLatestClass h3, ul.customLatestClass, ul.customLatestClass a</code> select the font color for the "h3" heading, the bullets ("ul" tag), and the "a" tag, respectively. Note that, if we only wanted to style the "ul" element, we wouldn't need a Module Class Suffix unless we had more than one "Latest News" module. Instead, we could just have defined the CSS using the standard "latestnews" class.
-==Menu Class Suffix and Menu Tag ID==
+===Be careful not to break existing CSS styling===
-All core modules allow you to enter a Module Class Suffix, as discussed above. Menu modules have two additional parameters: Menu Tag ID and Menu Class Suffix. Let's look at what these parameters do. Plus, in menus, we need to be careful not to break existing CSS styling.
 Let's look at how this works. In the administrative back end, navigate to Extensions &rarr; Module Manager and open the Main Menu for editing. Click on the Advanced Parameters. Notice that the Module Class Suffix is set to "_menu", without a leading space.
@@ Line 200: / Line 201: @@
 By putting a space between the "_menu" and "myNewClass", we added the new class into the HTML. Then, by selecting the new class in the CSS file, we changed the font size.
 Now, lets look at the Menu Tag ID parameter. Navigate to the back end, open the Main Menu module for editing, and enter "myTagID" in the Menu Tag ID parameter.