View source for Using Class Suffixes

===Add CSS Styling to New Class===
At this point, we've created a new CSS class in the HTML to allow for some new styling. Now we need to use this new class to actually change the look of our page. The first thing we need to do is find the applicable CSS file. In this case, it is ''<joomla_root>/templates/rhuk_milkyway/css/template.css''.

Let's say we want to add a background color, but only to this specific Section Blog. (Remember, if we wanted to just change all of the Section Blog pages in our site, we could just change the CSS styling for the base classes, such as ''componentheading'' or ''blog''.) We need to do is figure out which area (''componentheading'', ''blog'', or ''contentpaneopen'') we want to style. Say we just wanted to style the ''componentheading'' area.

First, let's use the CSS selector ''div.myBlogClass'' and add the following code to the end of our CSS file:<syntaxhighlight lang="css">
/* Custom Styling */
div.myBlogClass {
	background-color: #FFE4E1; /* mistyrose */
}
</syntaxhighlight>

The result is that the page heading now has the background color, as shown below.

[[Image:Div_styling_example.png|center|frame]]

Now this works fine in our example, because the other classes are defined for ''table'' tags and not ''div'' tags. But it is normally better to be more specific in our style selector by styling only those elements that have both the desired base class and the new class. For example, let's replace the code above with the following code:
<syntaxhighlight lang="css">/* Custom Styling */
.blog.myBlogClass {
	background-color: #FAFAD2; /* lightgoldenrod */
}
</syntaxhighlight>

This specifies that the new style will only be applied to elements that have both the ''blog'' and the ''myBlogClass'' styles. This gives us the background color over the entire ''blog'' area, as shown below.

[[Image:Blog_styling_example.png]]

The great thing about creating a ''new'' class (with the leading space trick) is that we don't need to copy all of the existing styling for the base classes. We can just focus on the new styling that we want.

Now in this example, we focused on the Section Blog layout. The class names for different components might be different, but the process will be the same. The table below shows some common Joomla! layouts and a list of class names that can have Page Class Suffixes added.

{| class="wikitable"
|-
! Layout
! CSS Class Names Used
|-
| Article Layout
| componentheading, contentpaneopen, contentheading, contentpagetitle
|-
| Category Blog, Frontpage Blog, Section Blog
| componentheading, contentpagetitle, blog, contentpaneopen, contentheading, readon, blog_more
|-
| Category List, Section List
| componentheading, contentpane, contentdescription
|-
| Contact Category
| componentheading, contentpane, contentdescription, sectiontablefooter, sectiontableheader, category
|-
| Contact Layout
| componentheading, contentpaneopen, contentheading
|}

To sum up what we have learned about using the Page Class Suffix parameter:
# Use a leading space to create a new CSS class. This way you don't have to worry about re-doing or breaking existing CSS styles.
# Look in the HTML source code to find the locations of the base and new classes.
# If desired, use Firebug to see which HTML elements correspond to which areas on the page.
# Add custom styling to the end of the ''template.css'' file, specifying both the name of the desired base class and the custom class in the form ''.baseclass.customclass'' as in the example above.