The page class suffix is something that you can add to your content pages so truly individual styling. Therefore, every single content page could have different styles if you wished which could be background image/colour; font colour/type/size; link colour/typo/size/; custom typography for that page and much more. The possibilities are almost endless, the only limiting factor is what you can add to a content page. Therefore, anything that you insert into a content page, whether that be an image, some text, a table or a list, it can be styled with a page class suffix on top of the template's stylesheets
If you are aware of Module Class suffix, this is just the mainbody equivalent. The page class suffix is not delimited by content items, it basically influences anything that is render in the Mainbody body area. But what loads in the mainbody area?
Hence, the page class suffix can go beyond the examples suggested earlier in terms on content to the context that is extensions, i.e. components. The best example for a use of the page class suffix for a component is the wrapper. The wrapper usually conforms to the template's stylesheets in respects to the mainbody styling, this is usually padding and margins. However, this extra space generating from the margins and padding may be useful for content items but useless for the wrapper as you want "true" full width. This is where you would apply the page class suffix with no margins or padding
The page class suffix is loaded from the CSS/stylesheet files. Depending on your how extensive your page class suffixes are and their purposes, determines which CSS file you shall place them in. If you are editing the structure of the content page such as removing the margins for the wrapper component, place the suffix into template_css.css or similar file such as default.css. However, if it is a suffix based on style such as content background colour, then choose style.css or similar file. If it is a mixture, divide them into both files, the structural styles in template_css.css and colours in style.css. Choosing which CSS file is not important in terms of the output of the suffix but is more efficient organisation of your stylesheets.
What are the prefixes that make the class suffix work? Probably the most important part of this tutorial is what you need to insert into your style sheets. Content items and components load different classes which you need to cater for. The main section of content items is controlled by the following class:
table.contentpaneopen-suffix{}
The suffix itself can be any name and is anything that proceeds .contentpaneopen. You would then place your css code between the {} tags. However, components such as the wrapper or controlled by a different class:
div.contentpane-suffix{}
The suffix itself can be any name and is anything that proceeds .contentepane.If you wanted to combine both classes for a possibility of less confusion, use the class below. However, sometimes it is best to separate the 2 for ease of management
div.contentpane,
table.contentpaneopen{}
Let us show a few examples from the snippets above and describe the effects. Starting with content item suffix
table.contentpaneopen-suffix1{
background:#000;
color:#fc0;
font-size:15px;
font-family:Comic Sans MS;
border:5px solid #fc0;
text-align:justify;
}
From the snippet above, I have concentrated on styling so I would place that in my template's style.css file. The following lists describes the effect/purpose of each line
The next example will be for a component such as the wrapper and take on the structural abilities of the page class suffix over style, see example below:
div.contentpane_flush-wrapper{
margin:-10px;
}
In this scenario, the content page would have margins of -10px on all its boundaries. Therefore, it will extend 10px beyond its normal boundaries. As by the suffix that I have used _flush-wrapper, I want to have a flush wrapper so I would apply this to the wrapper menu item. This will overcome the 10px padding generated by the template's normal CSS file for the mainbody.
Combine both examples and techniques together to conform to your personal preferences.
The previous section introduces you to the basics of the page class suffix but does not show the more advanced techniques of using the class. Furthermore, the snippets previously would not change the link colours/styling independently of the normal stylesheets of the template. Consequently, we will need to advanced open the page class statement itself (we do not need to edit the CSS values just the titles for the values). An example for links may demonstrate to a greater degree.
table.contentpaneopen-suffix1 a{
color:#fff;
}
The a is the title defines the anchor in HTML. Anchor is the term used for links, therefore, this new statement makes all links for the Page Class suffix "-suffix1" have a white colour. This is determined by color:#fff;.
We are now in a position to style anything that is within the limits of your page class suffix so this could be:
The possibilites become more apparent and combining the examples and techniques here will produce individually styling to a great degree.
The process of applying the page class suffix in Joomla! is a straight forward procedure. Follow the steps below:
http://www.yoursite.comYou will come across the login panel shown below. Enter your administrative username and password which were created when you install Joomla!
Content(top nav bar) > Static Content Manager or All Content items)Whereas, if you wish to apply a suffix to a component, you will need to take the menu approach to navigating. Directions are as follows:
Menu(top nav bar) > Menu name such as mainmenu