0
Welcome Guest! Login
0 items Join Now

Gantry 5 - Adding class to tag

  • Gantry 5 - Adding class to tag

    Posted 7 years 5 months ago
    • 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's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36749
    • Thanks: 3227
    • Custom work done

    Re: Gantry 5 - Adding class to tag

    Posted 7 years 5 months ago
    • 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: 7 years 5 months ago by DanG.
  • Re: Gantry 5 - Adding class to tag

    Posted 7 years 5 months ago
    • 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's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36749
    • Thanks: 3227
    • Custom work done

    Re: Gantry 5 - Adding class to tag

    Posted 7 years 5 months ago
    • 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: 7 years 5 months ago by DanG.
    • Ken Dow's Avatar
    • Ken Dow
    • Rocketeer
    • Posts: 67
    • Thanks: 1

    Re: Gantry 5 - Adding class to tag

    Posted 3 years 9 months ago
    • 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.088 seconds