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

Revision as of 11:22, 25 September 2013

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.

This Page is a Candidate for Deletion

This notice should remain for a minimum of 1 week after it was placed on the page. If discussion is still ongoing, it should remain until a consensus is reached, after which the page will either be deleted or this notice removed. If you disagree with its deletion, please discuss your reasons on its associated talk page, as applicable.

Remember to check if anything links here and the page history before deleting.

Last edit by Wilsonge (talk · contrib) · Last edited on Wed, 25 Sep 2013 11:22:18 +0000

Page Class Suffix and Module Class Suffix parameters allow you to change the 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.

The suffix will be appended to an already provided class, changing it to a different class. To avoid that, you can enter a suffix with a leading space. For example " myNewClass" (that is, <space> + "myNewClass"). If you enter a suffix with a leading space, the default class remains in effect and the one you provided is added. With " myNewClass", 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 class "myNewClass".

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 for more information.

@@ Line 1: / Line 1: @@
-[[Glossary#Page Class Suffix|Page Class Suffix]] and [[Glossary#Module Class Suffix|Module Class Suffix]] parameters allow you to change the CSS classes in the HTML that Joomla! generates or add new ones to existing classes. This in turn allows you to apply individual CSS code to change the appearance of individual Menu Items or Modules.
+{{delete|This page is already being described on [[Page Class Suffix|this]] page - so I think we should just port the content onto that page and delete this one}}
+[[Glossary#Page Class Suffix|Page Class Suffix]] and [[Glossary#Module Class Suffix|Module Class Suffix]] parameters allow you to change the 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.
 The suffix will be appended to an already provided class, changing it to a different class. To avoid that, you can enter a suffix with a leading space. For example " myNewClass" (that is, <space> + "myNewClass"). If you enter a suffix with a leading space, the default class remains in effect and the one you provided is added. With " myNewClass", the HTML code for a "componentheading" element would be changed from <pre><div class="componentheading"></pre> to <pre><div class="componentheading myNewClass"></pre>

Archived

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

From Joomla! Documentation

Revision as of 11:22, 25 September 2013