Gantry 5 - Adding class to tag
-
-
- remotelyyours
- Jr. Rocketeer
- Posts: 42
- Thanks: 2
-
Hi - I can't seem to be able to find where the "Template Manager -> Advanced -> Page Suffix" option (that allows the addition of a css class to the page body) has been moved to in Gantry 5.
Was this option removed? Is there a new way of doing this now?
Thanks!
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
remotelyyours wrote:
Hi - I can't seem to be able to find where the "Template Manager -> Advanced -> Page Suffix" option (that allows the addition of a css class to the page body) has been moved to in Gantry 5.
Was this option removed? Is there a new way of doing this now?
Thanks!
Umm...I think you misunderstand how that option worked. By enabling it Gantry 4 would inject the "menu alias" of the menu page into the <body class...>
As for Gantry 5 there is no such option as this feature is enabled all the time. So whereas in Gantry 4 you had "menu-home" in Gantry 5 you have "itemid-355" - Last Edit: 8 years 10 months ago by DanG.
-
-
-
- remotelyyours
- Jr. Rocketeer
- Posts: 42
- Thanks: 2
-
Ah, that's too bad it got taken out, being able to add a class to the body tag can be extremely useful..
With that enabled on Gantry 4 websites, while editing a menu item there was the option under the "Page Display" tab to add a "Page Class" - which doesn't seem to work with Gantry 5 now..
This makes working with CSS files a lot easier in Gantry 4, as the option is there to set styles for multiple pages
i.e.
Menu Item: Services (class: services-page)
Menu Item: Hosting Services (class: services-hosting-page)
Menu Item: Design Services (class: services-design-page)
I could then use a CSS selector body[class*='services-'] { }
.. which would apply to all service pages, rather than using:
.item11, .item12, .item13 { }
.. and having to manually add new service page menu IDs to the CSS sheet when a new page is created.
Let's say I had a website, with 5 main sections, each section having it's own unique style variations, and each having 40+ pages.
How can I now set a style that is applied to all sub-pages in a menu item?
I'm sure there's a way to accomplish this without CSS body classes (template overrides maybe?), just not sure what the best approach would be. Thanks!
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
remotelyyours wrote:
With that enabled on Gantry 4 websites, while editing a menu item there was the option under the "Page Display" tab to add a "Page Class" - which doesn't seem to work with Gantry 5 now..
That's being worked on now to bring that functionality to Gantry 5.
As for the existing page class suffix your at NO disadvantage compared to Gantry 4.
Home - itemid-355
About Us - itemid-357
Gallery - itemid-359
Contact - itemid-361
So the above page class suffix's injected into the <body class> tag will suffice for providing unique styling to your menu pages. - Last Edit: 8 years 10 months ago by DanG.
-
-
-
- Ken Dow
- Rocketeer
- Posts: 69
- Thanks: 1
- I'm using Koleti on Grav and there are no page-specific classes being injected into the body element of my custom layout (cloned from Rows & Columns). I'm looking to apply different background images to the slideshow section based on the content page. Am I missing something? Thanks.
- Helping people use technology
-
Time to create page: 0.053 seconds