Results 1 to 4 of 4

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

  1. #1
    User
    Join Date
    07-01-09.
    Posts
    91

    Default Style CSS for a page or group of sub-pages

    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;  }

  2. #2
    Experienced user
    Join Date
    06-20-09.
    Posts
    1,311

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

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

  3. #3
    User MacKP's Avatar
    Join Date
    06-19-09.
    Location
    Duisburg (Germany)
    Posts
    211

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

    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
    Mediendepot Ruhr
    For real-time chat the (inofficial) Chatroom in IRC:
    -> irc.freenode.net #contao | irc.freenode.net #contao.de

  4. #4
    User
    Join Date
    07-01-09.
    Posts
    91

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

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •