Using Class Suffixes
From Joomla! Documentation
Revision as of 20:45, 12 January 2009 by Dextercowley (talk | contribs) (new tutorial on class suffixes)
This article is actively undergoing a major edit for a short while.
As a courtesy, please do not edit this page while this message is displayed. The user who added this notice will be listed in the page history. This message is intended to help reduce edit conflicts; please remove it between editing sessions to allow others to edit the page.
If this page has not been edited for several hours, please remove this template, or replace it with {{underconstruction}} or {{incomplete}}.
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.
Background[edit]
Joomla! creates HTML pages that use Cascading Style Sheets to control the appearance of the page. This includes things like fonts, colors, margins, and background. The CSS files are part of your template.
When Joomla! creates a page, it creates different CSS classes that are then referenced in the CSS file to specify which style will apply to which parts of the HTML page. These class names are pre-programmed into Joomla!. But Joomla! allows you to modify or add CSS classes by way of the Class Suffix parameters. This lets you fine-tune the appearance of specific pages with no programming and very little work. The best way to understand this is to see specific examples.
Page Class Suffix[edit]
Before you start, make sure you have the Joomla! sample website available. Also, make sure the default template is set to "rhuk_milkyway" (in the Extensions → Template Manager).
In the front end, navigate to Example Pages → Section Blog. In your browser, select the option to view the page source code. For example, in Firefox, press Ctrl+U. In Internet Explorer, select View → Source. In Safari, select View → View Source.
Using the "Find" command, find the first occurrence of the word "componentheading". It should look like the following:
<div class="componentheading">
Browse down the file and find the following tags:
<table class="blog" cellpadding="0" cellspacing="0">
<table class="contentpaneopen">
<td class="contentheading" width="100%">
<table class="contentpaneopen">
The following screenshots were made using the 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.
The first screenshot shows what the
In the back end, navigate to Menus → Example Pages and click Section Blog. This should display the "Menu Item: [Edit]" screen for the Section Blog Layout. Click Parameters (System) to show the System Parameters. In the "Page Class Suffix" field enter the value "_myBlogSuffix" and click the Save button.
Now, go to the front end and navigate to Example Pages → Section Blog. Notice right away that we lost the styling for the page and article titles. Let's look closer to see why.
Using the browser "Find" command, find the first occurrence of "_myBlogSuffix". It is in a "div" tag and looks like this:
<div class="componentheading_myBlogSuffix">
. If you look through the source, you should also see the following classes: blog_myBlogSuffix, contentpaneopen_myBlogSuffix, and contentheading_myBlogSuffix.