Archived

Difference between revisions of "Use a leading space in Page and Module Class Suffix parameters"

From Joomla! Documentation

m (Added categorisation.)
m
(One intermediate revision by the same user not shown)
Line 15: Line 15:
 
One word of caution: make sure your new CSS style name does not duplicate any existing CSS classes! Otherwise, you will get styles applied incorrectly.
 
One word of caution: make sure your new CSS style name does not duplicate any existing CSS classes! Otherwise, you will get styles applied incorrectly.
  
See the [[Tutorial:Using_Class_Suffixes_in_Joomla!_1.5|Using Class Suffixes in Joomla! 1.5]] tutorial for more information.
+
See the [[Tutorial:Using_Class_Suffixes|Using Class Suffixes]] tutorial for more information.
<noinclude>[[Category:Tips and tricks 1.5]][[Category:Parameters]]</noinclude>
+
<noinclude>[[Category:Tips and tricks 1.5]][[Category:Parameters]][[Category:Tips and tricks 1.6]]</noinclude>

Revision as of 12:04, 8 January 2011

This page has been archived. This page contains information for an unsupported Joomla! version or is no longer relevant. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

Page Class Suffix and Module Class Suffix parameters allow you to create new CSS classes in the HTML that Joomla! generates. This in turn allows you to apply individual CSS code to change the appearance of individual Menu Items or Modules.

You can enter in these parameters with a leading space, for example " myNewClass" (that is, <space> + "myNewClass"). If you enter a Class Suffix with a leading space, Joomla! will create a new CSS class instead of modifying the existing class. In the previous example, the HTML code for a "componentheading" element would be changed from

<div class="componentheading">

to

<div class="componentheading myNewClass">

Now, this "div" element has two CSS classes assigned to it. The existing styling will still work correctly, since the element still has the "componentheading" class assigned to it. To change the style for this element, you simply add new CSS for the new class.

For example, to change the background color for the heading just in this one Menu Item, you could add code something like this to your template's CSS file:

.componentheading.myNewClass {
    background-color: #FFE4E1; /* mistyrose */ 
}

Because you are specifying both the "componentheading" and the "myNewClass" in the CSS selector, this style will only be applied to this one element.

One word of caution: make sure your new CSS style name does not duplicate any existing CSS classes! Otherwise, you will get styles applied incorrectly.

See the Using Class Suffixes tutorial for more information.