How to handle this CSS issue with Wordpress?

Question

I have a (probably not) unique issue with a css background div I am seeking advice on. I am using Wordpress, which creates my pages dynamically. The front page and some other pages are using one type of background (Gradient) while internal pages are using a solid white. Right now I am forced to have two style sheets - main.css for the gradient background, then internal.css for the internal - just for this background div.

Is there a way to use one css file and handle these two background divs easily? I will probably need to use a bit of php...

Essentially I am only trying to pass two different background divs, on either home or some internal pages.

Aaron D. Campbell · Accepted Answer · 2009-11-04 14:35:59Z

2

Just use different template files (which you should be doing anyway because of the different looks), and use something like an ID on the body tag to check like this:

<body id="grad">
    ...
</body>

or

<body id="white">
    ...
</body>

And use this in your stylesheet:

#grad {
    background-image:url(something.png);
}
#white {
    background-color:#FFF;
}

Make sure to check out the template hierarchy page in the WordPress codex to see how you can easily create the template files you need. Use #grad in home.php and/or a custom template file that you apply to your front page (if it's static), and then use #while in everything else (category.php, tag.php, single.php, and page.php are probably the basics).

answered Nov 4, 2009 at 14:35

Aaron D. Campbell

661 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Zach Smith Over a year ago

how would this work if the header is the file that display the body tag?

BraedenP · Accepted Answer · 2009-11-04 14:20:51Z

0

You could use your normal stylsheet on all the pages, with the solid white background set. Then on your front page and other 'special' pages, you could have a tag with the background image that will override the white:

<head>
<link rel="stylesheet" type="text/css" href="main.css" /><!-- This has background-color:white; -->
<?php if(!empty($special)){
echo <<<HTML
    <style>
    body{
        background-color:transparent;
        background-image:url('image_url');
    }
    </style>
HTML;
?>
</head>

Then you'd just set $special to true or something when you're on a 'special' page.

answered Nov 4, 2009 at 14:20

BraedenP

7,2354 gold badges35 silver badges44 bronze badges

1 Comment

Zach Smith Over a year ago

Thanks for your help! In Wordpress, since it generates the pages dynamically, how would i assign the 'special' pages?

Zach Smith · Accepted Answer · 2009-11-04 21:11:16Z

0

I didn't think of this but here is the code:

<body<?php if ( !is_home() ) echo ' style="background-image: url(images/about_bg.png);"'; ?>>

Put it in the header.

answered Nov 4, 2009 at 21:11

Zach Smith

5,70428 gold badges92 silver badges148 bronze badges

Comments

Mihai Iorga · Accepted Answer · 2012-08-28 11:39:36Z

0

<?php 
    if(is_home) {
        echo '<div class="bg for main page">';
    } else {
        echo '<div class="bg for internal page">';
    }
?>

edited Aug 28, 2012 at 11:39

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

answered Nov 4, 2009 at 14:16

64vision

1

Collectives™ on Stack Overflow

How to handle this CSS issue with Wordpress?

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related