This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

  1. Forum
  2. Best Practices
  3. Graceful way to add a page-specific class to the body tag?
clone458396
clone458396

Hello,

I'd like to add a class to the body tag depending on which page I'm on. I'll later use that class in my LESS file for page-specific CSS. I'm using layouts, so my body tag is located in my 'default' layout. What's the most graceful way to do this?

For example, if I'm on the 'contact us' page, I'd like to add a class like so:

<body class="contact-us">

Cheers, Bret

Daniel81
Daniel81

Hi, try this {{ this.page.baseFileName }}

AlecSPB
AlecSPB

Also try this {{ this.page.id }}

clone458396
clone458396

Perfect, thanks!

clone458396
clone458396

Follow up question. Those solutions work unless the page is in a folder. When the page is in a folder, the variables this.page.id and this.page.baseFileName look like, for example, "blog/category", which doesn't work as a class name. Any suggestions?

clone458396
clone458396

Nevermind! I figured out a way around it. I basically set the page id explicitly in function onEnd().

Cheers, Bret

1-6 of 6

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.