How to use Page class suffix's
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
So you need to have an element (as an example, a background, logo, module border etc.) to look different on your Home page than your lets say, Contact page. We can use a
CUSTOM CSS file
combined with a page class suffix to accomplish this.
The page class suffix is something that you can add to your menu pages to truly create unique styling for individual content pages. With a page class suffix defined, every single content page could have it's own unique style. For example you could have a custom CSS background image/colour; font colour/type/size; link colour/typo/size/ or custom typography for that page. 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 in combination with your user created custom style-sheet.
This is a flow diagram of how this feature works:
Home page .........---> page class suffix (home).... ───┐.........................................................┌ Home page
.................................................................................................├ rt_templateName-custom.css ┤
Contact Us page ---> page class suffix (contact) ───┘.........................................................└ Contact Us page
In this example we started with a Page Title appearing for the respective menu page. Both Titles are styled identically because of the templates default CSS values.
However by applying a page class suffix to each Menu Page and incorporating those suffixes into our Custom CSS file our CSS coding has generated different looks for the Page Titles in our two example pages.
If you are aware of the 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 rendered in the Mainbody body area. Examples would be:- All content items, whether that be dynamic or static such as the Example FAQs.
- All front end components that are rendered into the mainbody such as the Login module.
- All content items, whether that be dynamic or static such as the Example FAQs.
There are two methods to define a page class suffix:
MANUAL - In your Template Manager -> Admin -> Menus -> Main Menu -> a Menu page item (e.g. Home) -> Page Display Options -> Page Class -> some-class-name i.e. "menu-home"
AUTOMATIC - Admin -> Extend or Extensions -> Template Manager -> rt_template(MASTER) -> Advanced -> Page Suffix -> ON
The latter is my preferred method (as I'm lazy). Here, for each menu-page on your site, Gantry will inject into the page's <body> tag a generated page class suffix.
The rule for the generated name is simple -> a prefix (our templates use "menu") + the "title alias" of the menu item:
"menu-" + "menu-page title alias".
So for your "About Us" page the page class suffix would be:
"menu-" + "about-us" = "menu-about-us".
The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. So any class inside the <body> tag will also affect everything on that menu page. This also applies to ANY class name inside the <body> tag.
So lets say in your main stylesheet you have this CSS statement:
body { color: #000000; }
So all our menu pages will have a black text colour. Let's say that we want the "About Us" menu page to have a gray text colour. So we set our Template Manager for Gantry page class suffix to ON.
The page class suffix can be inspected by using Chrome Developer Tools or FireBug for Firefox to look at the <body> tag or the alternate rule generation method I used above.
Either way you will see the "menu-about-us" inside the <body> tag.
So we alter our code to be operative ONLY on the "About Us" menu page:
Joomla has more information on this How to use a Page Class Suffix.menu-about-us { color: #DCDCDC; }- Last Edit: 9 years 8 months ago by DanG.
The following users have thanked you: Björn Hallier, Fidelis Onwubueke
-
-
-
- Ricardo Sedassari
- Jr. Rocketeer
- Posts: 35
- Thanks: 1
- In Gantry 5, what would be the best way to use page class suffix? (I'm also lazy lol)
-
The following users have thanked you: Waves Web Design
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Ricardo Sedassari wrote:
In Gantry 5, what would be the best way to use page class suffix? (I'm also lazy lol)
Fundamentally it would be no different. There are small changes to the procedure however.
1) instead of "menu-home" Gantry 5 uses the format "id-355" where 355 is the ID of the HOME menu item.
2) Now custom CSS uses this process Adding a custom style sheet
3) Please see the guide
How to use Page class suffixes in Gantry 5 - Last Edit: 9 years 1 week ago by DanG.
-
The following users have thanked you: Alen, Ricardo Sedassari
-
Time to create page: 0.108 seconds