Actions

Difference between revisions of "Page Class Suffix"

From Joomla! Documentation

m (Page class suffixes moved to Page Class Suffix: Adjusted title plurality and capitalization for consistency with other Glossary pages)
m (Adjusted link after page move)
(3 intermediate revisions by one user not shown)
Line 1: Line 1:
== Definition ==
+
{{Chunk:Page Class Suffix}}
You can use The Page Class Suffix parameter to create unique CSS classes that allow you to style one Menu Item differently than others. For a more complete definition of Page Class Suffixes, see the [[Glossary#Page_Class_Suffix | Joomla! Glossary]].
+
  
 
== Usage ==
 
== Usage ==
Line 7: Line 6:
 
If you don't use a leading space, you will need to copy all of the styling code for the Menu Item classes and duplicate it for the new CSS class before making your CSS changes.
 
If you don't use a leading space, you will need to copy all of the styling code for the Menu Item classes 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.
 
You can use The Page Class Suffix parameter to create unique CSS classes that allow you to style one Menu Item differently than others.
 
You can use The Page Class Suffix parameter to create unique CSS classes that allow you to style one Menu Item differently than others.
 
* Also see [[Using the Page Class Suffix in Template Code]] for additional applications.
 
* Also see [[Using the Page Class Suffix in Template Code]] for additional applications.
  
 
[[Category:Templates]]
 
[[Category:Templates]]
 +
[[Category:Menu Management]]
 +
[[Category:Glossary]]
 +
[[Category:Landing Pages]]

Revision as of 17:01, 18 November 2011

<translate> Page Class Suffix is a parameter in Joomla! content Menu Items. It is set in the Menu Item: [Edit] screen under the "Parameters (Advanced)" section. This will cause Joomla! to either add a new CSS class or modify the existing CSS class for elements in this specific Menu Item layout.

When Joomla! generates a page, it automatically creates pre-defined CSS classes to allow styling of the page. For example, a page might have the element

<div class="componentheading">

To create a new class, enter the parameter with a leading space. For example, entering a space plus "myNewClass" will create a new CSS class called "myNewClass" and it will be inserted as a class for elements in that Menu Item. In this case the example above will be changed to

<div class="componentheading myNewClass">

To change the name of the existing class, enter in the parameter without a leading space. For example, entering "_mySuffix" (no leading space) will cause the HTML to changed to

<div class="componentheading_mySuffix">

Generally, it is recommended to use a leading space to create a new class. This way, CSS styling for this component that uses the standard class names will continue to work. You can use the new class name to add any desired styling to the component without needing to re-create all of the existing CSS code. Note that, if you create a new class name, make sure it has a unique name and doesn't conflict with any existing class names.

See also: Using Class Suffixes, Using the Page Class Suffix in Template Code</translate>


Usage

If you enter a Page Class Suffix with a leading space, a new CSS class will be created. If the parameter does not have a leading space, the CSS classes associated with this Menu Item (for example, "componentheading") will be modified. The first method is normally preferred, since then you don't break any of the existing styling for the page elements, and you only need to add new CSS code for the new styling.

If you don't use a leading space, you will need to copy all of the styling code for the Menu Item classes and duplicate it for the new CSS class before making your CSS changes.

You can use The Page Class Suffix parameter to create unique CSS classes that allow you to style one Menu Item differently than others.