Wordpress Themes - WP Forum at BFA - [SOLVED] How to designate a particular background image for all posts in a certain ca

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Forum How-To (http://forum.bytesforall.com/forumdisplay.php?f=9)

- - [SOLVED] How to designate a particular background image for all posts in a certain ca (http://forum.bytesforall.com/showthread.php?t=20610)

[SOLVED] How to designate a particular background image for all posts in a certain ca

Has Atahualpa developed any way to to designate a particular background image for all posts in a certain category using CSS, since this old thread was posted? :

http://173.199.154.86/showthread.php?t=7523

The following CSS works to place a background image on the category page for a certain category, but not for the background of all posts in that category:

Code:

body.category-6 {

background-image: url("......");

}

Is there any way to designate a particular background image for all posts in a given category?

I am using Atahualpa 3.7.12, with Wordpress 3.5.2.

Many thanks.

I can't think of a way without, editing the theme code or using a plugin that would add the category name as a class, to the div that surrounds the post.

Thank you Juggledad. Any suggestions of good and light plugins to do that?

Never had a need to search for one.let us know if you find one.

I'm not sure how "light" it is but after seeing your request I decided to look at a few and this plugin is currently on the top of my list for features. I have not tested extensively though.

Thank you, Larry. I will see about trying the Background Manager plugin. I note that PHP 5.3 or better is required for the plugin, so will have to check with my host first. The plugin looks good. Hope it works!

Many thanks!

ok, I don't know where my head was yesterday, must be exaustion from working with the kids at VBS at church. sigh...

This is quite easy and done with no plugins. Just add to the CSS inserts

HTML Code:

div.post.category-xxxxxxxx {background: options;}

for example, say you have the category 'recipies' and want the backgroound color to be blue you would use

HTML Code:

div.post.category-recipies {background-color: blue;}

and the background will be blue.
for an image you could use

HTML Code:

div.post.category-recipies {background-image: url('http://yourdomain.com/wp-content/uploads/2012/06/yourimage.jpg');}

you can also use the 'background' declarative to set multiple properties in one statement

remember that a post can be in multiple categories, so if you set this up for multiple categories you may not get the result you expect...

Hi Juggledad,

Thank you very much. For some reason, that is not working for me. Using div.post.category-xxxx, I would expect it to change the background of the post itself in category-xxx, but it is not doing that and also not changing the body background for the posts in that category.

What I want to do is change the body background image (url) for all posts in one category.

I also tried this, but it did not work:

Code:

body.post.category-6 {

background-image: url("http://......");

}

However, the following code does work to change the body background for the category page (but not for all posts in that category):

Code:

body.category-6 {

background-image: url("http://......");

}

And, this code works to change the background color of the posts themselves when displayed on a category (multi-post) page:

Code:

body.category-6 .post {

background: #111111;

opacity: 0.6;

}

However, I still would love to find a way - simply using CSS, if possible - to change the body background to a designated image for all individual posts in a particular category.

Many thanks!

what is the URL of the site? and point me to a post
and is the category name '6'? when you use 'category-xxxx' the xxxx is the name of the category

Remember there is a 'body' background for the page and that is what body.category-6' is addressing - in englist it is saying 'if the body element has a class of 'category-6' then apply this css to the body" what you want (I think) is to apply a body to the POST background which is why you need the 'div.post.category-recipies' - in english " for any div with the classes 'post' and 'category-recipies' apply these css rules.

Thank you very much, Juggledad. I will send you a PM with the URL and ref to a post.

Meanwhile, your last post here made me realize that I was using "category-xxx" to designate the category id ("category-6"), rather than the category name. When I changed it to the category name ("category-news"), now your code works to change the background of all posts themselves within the news category!

i.e.: The following does change the background of (that is, the background within) all individual posts in the news category to the designated image:

div.post.category-news {
background-image: url("http://...");
}

This is very helpful to know! This CSS selector then allows one to style all individual posts in one category alone. Very useful!

Now, what I want to do is not to change the post backgrounds within the posts, but to change the body background (full screen) to a designated image for all individual posts in one particular category.

Based on your first reply in this thread, would this require me to add a category class to single posts in the Atahualpa Functions php?

In Wordpress Codex (http://codex.wordpress.org/Function_...nce/post_class) I found the following:

"To add a category class to single post pageviews and template files in the post content area for the post class and the entire page in the body HTML class, add the following to the functions.php.

Code:

// add category nicenames in body and post class

        function category_id_class($classes) {

            global $post;

            foreach((get_the_category($post->ID)) as $category)

                $classes[] = $category->category_nicename;

                return $classes;

        }

        add_filter('post_class', 'category_id_class');

        add_filter('body_class', 'category_id_class');

Would adding the above code to the Atahualpa Functions php file allow me to style the body background for all individual posts in a particular category - separately by category?

If so,

1. Specifically where in the Atahualpa Functions php file (or do they mean the Wordpress functions.php?) should I put the above code? and
2. What CSS Selector would I then use to change the body background for all individual posts in a particular category?

Would you then use the following?

Code:

body.post.category-news {

background-image: url("http://...");

}

Many thanks!

add that code at the end of functions.phpbefore the last line which is

HTML Code:

?>

here is what an actual body statement would look like

HTML Code:

<body class="single single-post postid-358 single-format-standard logged-in cat-a recipies">

in this case, the post is in two categories: 'cat-a' and 'recipies' and this is a single post page, so you would use

HTML Code:

body.single.recipies {.....}

Hi Juggledad,

That works perfectly!!! Thank you, Thank you!!

I really appreciate your GREAT help!!