Title: CSS theme question
Last modified: August 18, 2016

---

# CSS theme question

 *  Resolved [cowpie](https://wordpress.org/support/users/cowpie/)
 * (@cowpie)
 * [19 years, 10 months ago](https://wordpress.org/support/topic/css-theme-question/)
 * 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](https://wordpress.org/support/users/alrescha/)
 * (@alrescha)
 * [19 years, 10 months ago](https://wordpress.org/support/topic/css-theme-question/#post-402119)
 * 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](https://wordpress.org/support/users/cowpie/)
 * (@cowpie)
 * [19 years, 10 months ago](https://wordpress.org/support/topic/css-theme-question/#post-402127)
 * 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](https://wordpress.org/support/users/alrescha/)
 * (@alrescha)
 * [19 years, 10 months ago](https://wordpress.org/support/topic/css-theme-question/#post-402129)
 * Have a look at this Codex article:
    [http://codex.wordpress.org/Designing_Headers](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](https://wordpress.org/support/users/cowpie/)
 * (@cowpie)
 * [19 years, 10 months ago](https://wordpress.org/support/topic/css-theme-question/#post-402313)
 * 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](http://pastebin.com/705086)
 * I then created a page called Penn. All I got was a blank page.
 *  Thread Starter [cowpie](https://wordpress.org/support/users/cowpie/)
 * (@cowpie)
 * [19 years, 10 months ago](https://wordpress.org/support/topic/css-theme-question/#post-402319)
 * note: I had the php get header command in the penn page.
 *  Thread Starter [cowpie](https://wordpress.org/support/users/cowpie/)
 * (@cowpie)
 * [19 years, 10 months ago](https://wordpress.org/support/topic/css-theme-question/#post-402334)
 * bump
 *  Thread Starter [cowpie](https://wordpress.org/support/users/cowpie/)
 * (@cowpie)
 * [19 years, 10 months ago](https://wordpress.org/support/topic/css-theme-question/#post-402351)
 * 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.

 * 7 replies
 * 2 participants
 * Last reply from: [cowpie](https://wordpress.org/support/users/cowpie/)
 * Last activity: [19 years, 10 months ago](https://wordpress.org/support/topic/css-theme-question/#post-402351)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics