CSS theme question

  • Resolved cowpie

    (@cowpie)


    17 years, 10 months ago

    Alright so I’m going to have a few versions of my theme, and depending on which page of my site you’re on, there will be a different colored header image.

    From a previous post, I determined that I should used conditional statements such as these below:

    <?php if ( is_page("Dogs") ) : ?>

    <img src="img/dogs.jpg" />

    <?php elseif ( is_page("Cats") ) : ?>

    <img src="img/cats.jpg" />

    <?php elseif ( is_page("Turtles") ) : ?>

    <img src="img/turtles.jpg" />

    <?php endif; ?>

    My question is, however, before when making a CSS layout, I would specify the header image in the style.css file. how do I do this with all of this logic it has to go through. Basically, how should I set up my header file and style.css? Thanks guys

Viewing 7 replies - 1 through 7 (of 7 total)
  • alrescha

    (@alrescha)

    17 years, 10 months ago

    One way you could do it, is to specify different classes and use image replacement. For example:

    <?php if (is_page('Dogs')) : ?>
    <h1 class="dogpage">Blog Title</h1>
    <?php elseif(is_page('Cats')) : ?>
    <h1 class="catpage">Blog Title</h1>
    <?php endif;?>

    Of course, this also means you can just use a switch-case statement to simplify the whole construction.

    Thread Starter cowpie

    (@cowpie)

    17 years, 10 months ago

    Could you elaborate on that a little bit for me? So if I specify a Dogs page, or a Cats page, how does changing the H1 class enable me to use a different header img or the like? Thanks.

    alrescha

    (@alrescha)

    17 years, 10 months ago

    Have a look at this Codex article:
    http://codex.wordpress.org/Designing_Headers

    Specifically, look at the section on “Hiding the Header Text”.

    Now because the images are specified in the CSS classes:

    .dogpage { background: url("dog.png"); }
    .catpage { background: url("cat.png"); }

    You will be able to just specify a class variable to assign the different classes (hence different background images) to your header:

    <?php
    if (is_page('Dogs')) { $pageclass = 'dogpage'; }
    elseif (is_page('Cats')) { $pageclass = 'catpage'; }
    ?>

    Then simply dump that variable into your header class.

    <div class="<?php echo $pageclass ?>">Do the image replacement thing here.</div>

    Now if you know PHP, you could simply adapt one of those header rotation plugins and create an interface in the admin panel where you could interactively assign different header images to different pages/categories etc. This is much more elegant, I think.

    Thread Starter cowpie

    (@cowpie)

    17 years, 10 months ago

    alright, so I tried this:

    body {
    font-size: 62.5%;
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background-color: #FFFFFF;
    text-align: left;
    }

    #page {
    text-align: left;
    width: 761px;
    }

    #header {
    background: url("images/bgrd.jpg");
    }
    .pennpage { background: url("images/titlePenn.jpg") no-repeat; }
    .brownpage { background: url("images/titleBrown.jpg") no-repeat; }

    ^^ that is my css file

    this is my header file:

    http://pastebin.com/705086

    I then created a page called Penn. All I got was a blank page.

    Thread Starter cowpie

    (@cowpie)

    17 years, 10 months ago

    note: I had the php get header command in the penn page.

    Thread Starter cowpie

    (@cowpie)

    17 years, 10 months ago

    bump

    Thread Starter cowpie

    (@cowpie)

    17 years, 10 months ago

    last time I’ll bump this; sorry if annoying

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS theme question’ is closed to new replies.