开发者

How to handle this CSS issue with Wordpress?

开发者 https://www.devze.com 2022-12-10 00:56 出处:网络
I have a (probably not) unique issue with a css 开发者_Python百科background div I am seeking advice on. I am using Wordpress, which creates my pages dynamically. The front page and some other pages ar

I have a (probably not) unique issue with a css 开发者_Python百科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.


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).


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.


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.


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

精彩评论

暂无评论...
验证码 换一张
取 消