Style CSS for a page or group of sub-pages

**harley77** · 02/17/2012, 23:16

Disclaimer: It's possible there is some other function that does this, but I've never seen it.

When setting up Contao for development, one of the things I like to do is add two Insert Tags to the body in the FE_PAGE template.

Code:

<body id="top" class="cur_{{env::page_alias}} par_{{env::parent_alias}} {{ua::class}} .....

So now, each page has it's own class (cur_*), as well as a class that identifies the parent (par_*).
This makes it easy to restrict a css element to a specific page or affect an entire group of child pages.

example css

Code:

body.cur_some-page .content { background: red;  }
body.par_another-page .content { background: green;  }

**ramjet** · 02/20/2012, 07:13

Thanks Harley,
I like pointers like this, as I hardly ever touch the templates, so know very little regarding them.
Keep on tipping....Cheers

**MacKP** · 03/19/2012, 20:02

It should be possible to do it in the Pagelayout (Experts > ID/Class) -> cur_{{env:

age_alias}} par_{{env:

arent_alias}}

Than you didn't have to make an extra fe_page-Template ;-)

regards

**harley77** · 03/27/2012, 19:14

I didn't realize you could use Insert Tags in the CSS Class/ID fields. Good Call. Thank you.

Thread: Style CSS for a page or group of sub-pages

Thread Tools

Search Thread

Style CSS for a page or group of sub-pages

Re: Style CSS for a page or group of sub-pages

Re: Style CSS for a page or group of sub-pages

Re: Style CSS for a page or group of sub-pages

Bookmarks

Bookmarks

Posting Permissions