Different style (CSS) on different pages

  • Resolved merc70

    (@merc70)


    15 years ago

    Hello there.
    I wish to have two different styles for my blog. The main style (which is shown in all the posts and most pages) uses the default CSS. However, I have another part of my blog that I wish to use a different CSS with (mainly just text color changes and background changes). How would I implement this into my blog?

    Simpler:
    Most of the posts and pages are using the default style sheet.
    I want some specific pages to use a different style sheet.

    I’m currently using the latest WordPress version and the Modicus_2c theme.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • stvwlf

    (@stvwlf)

    Hi

    you don’t really need to use a second stylesheet although there is nothing wrong with that approach.

    a good method is to add a class to the body tag in the theme’s header.php file.

    <body<?php if ( is_page(array('somepage1', 'somepage2', 'somepage3'))) {
echo ' class="myclass" '; } ?>>

    replace somepage1 with the page slug of the pages you want the special CSS applied to.

    now, when those pages are viewed, you have this
    <body class="myclass">

    now you can add CSS to the stylesheet to override the default styling

    .myclass #content { background-color: #123456; }
.myclass #content p { color: #987654; }

    etc.

    because that styling is more specific than the default styling, it overrides the default styling whenever the class on the body tag is “myclass”

    Thread Starter merc70

    (@merc70)

    That worked quite marvelously. Thank you very much for the help!

    how can i link to a style sheet ?

    Is there any way to assign stylesheets to whole sets of pages? For example I have 15 pages under the path:
    www.website.com/photos/somepage1 --> somepage2, somepage3, etc...

    Now I have to write to the header file every time I add a page, which may lead to confusion in the end.
    I have tried typing:
    <body<?php if ( is_page(array('photos/*')))...etc but the asterisk doesn’t seem to work. Is there a solution to this?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Different style (CSS) on different pages’ is closed to new replies.