Different css file for specific Page

  • Resolved d00dlz

    (@d00dlz)


    18 years, 2 months ago

    I’m developing a site using mainly static pages and I’d like to put some code in the header.php that calls a different css file depending on what template I’ve assigned to a WP Page. Basically I only need to change the size of the sidebar (using css) for a specific parent Page and its children. I’ve read this post which deals with this subject and it doesn’t seem the issue was resolved. I couldn’t find any other related data or topics.

    Does anyone know how to accomplish this? I’m using WP 2.0.4.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Or you could…

    Design another sidebar altogether and call it into your page template whenever you want to display a different sidebar structure?

    I use multiple sidebars on my website for Posts, Pages and Categories. Actually I have 5 sidebars plus my “main” sidebar.

    Just design your sidebar how you want, save the file as whatever-sidebar.php or sidebar2.php, or whatever.php then upload this file to your current theme folder.

    To call this particular sidebar into a specific template, just remove the standard <?php get_sidebar(); ?> code and replace with:

    <?php include(whatever-sidebar.php') ;?> where your sidebar comes into play and presto!

    One different sidebar. You’ll need to make the necessary CSS design changes to your css file and that way you don’t need to fiddle with your header to call different css files.

    Hope this helps.

    If you’ve already designed a separate template for each Page, then it’s easy to do. Go into each template, and change the opening body tag from this:

    <body>

    to this:

    <body id="template">

    Of course, the word “template” should be renamed so each body tag has a unique name – so if Page 1 is “music” for instance, swap “template” in my example for “music”. That would be the easiest thing to do.

    Then, in your current stylesheet, just add a selector for that specific body tag. So, for example, if you only need to change the font size of your Page sidebar, you add this to your current CSS file:

    body#template #sidebar {
    font-size:0.8em;
    }

    And there you go – the font size for the sidebar for *only* that template is 80% of the rest of the site.

    Hope that simple example gives you enough to work from ??

    I’m not sure if this is what “katgirl” said or perhaps similiar, but if you have different CSS specifications, create that specific CSS file (or do an internal style sheet, which will override the external) and link it.

    so if you have a screen.css file and a print.css file, switch up your css files in the header section with whichever one you need.

    The other replies are great too, it gives me some ideas for my current site ??

    Hugs,
    sharon

    Sharon,
    I appreciate your willingness to help – but what has been asked here is a specific WordPress question (as the whole forum, btw) and the replies were correct in the context of this supported software.
    If you are not familiar with WP, please don’t post irrelevant “advice”.

    Thread Starter d00dlz

    (@d00dlz)

    Thanks for all your suggestions, it helped put things in perspective and made me realize there was a simple solution. I already had different sidebar templates that corresponded to certain pages. I just gave the sidebar div a different id name and styled it in the original css file. Thanks again.

    Re: what doodlebee suggested.
    Could this still be done when your opening <body> tag is in the header, not the individual page template?

    e.g. Say, … Would it be easiest to just replace the get_header() call in the page template with the contents of your header and then do the body id trick from there? Or is that the ramblings of a madman?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Different css file for specific Page’ is closed to new replies.