Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » Forum Usage » Forum How-To »

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


  #1  
Old Jul 10, 2013, 12:02 AM
New WordPress Fan
 
141 posts · Jul 2010
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.
  #2  
Old Jul 10, 2013, 05:39 AM
juggledad's Avatar
juggledad
 
23,553 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
  #3  
Old Jul 10, 2013, 01:25 PM
New WordPress Fan
 
141 posts · Jul 2010
Thank you Juggledad. Any suggestions of good and light plugins to do that?
  #4  
Old Jul 10, 2013, 02:17 PM
juggledad's Avatar
juggledad
 
23,553 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Never had a need to search for one.let us know if you find one.
  #5  
Old Jul 10, 2013, 02:38 PM
lmilesw's Avatar
lmilesw
 
10,173 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Jul 10, 2013, 11:09 PM
New WordPress Fan
 
141 posts · Jul 2010
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!
  #7  
Old Jul 11, 2013, 05:26 AM
juggledad's Avatar
juggledad
 
23,553 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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...

Last edited by juggledad; Jul 11, 2013 at 05:31 AM.
  #8  
Old Jul 11, 2013, 12:22 PM
New WordPress Fan
 
141 posts · Jul 2010
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!

Last edited by New WordPress Fan; Jul 11, 2013 at 12:26 PM.
  #9  
Old Jul 11, 2013, 01:06 PM
juggledad's Avatar
juggledad
 
23,553 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.

Last edited by juggledad; Jul 11, 2013 at 03:41 PM.
  #10  
Old Jul 11, 2013, 02:11 PM
New WordPress Fan
 
141 posts · Jul 2010
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!
  #11  
Old Jul 11, 2013, 04:16 PM
juggledad's Avatar
juggledad
 
23,553 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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 {.....}
  #12  
Old Jul 11, 2013, 05:28 PM
New WordPress Fan
 
141 posts · Jul 2010
Hi Juggledad,

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

I really appreciate your GREAT help!!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Help i want image as background on the category bar!! Crispuchita Page & Category Menu Bars 9 Jan 6, 2012 08:32 AM
[SOLVED] How to Designate a Custom Menu as Page Menu in Atahualpa 3.6.4 New WordPress Fan Page & Category Menu Bars 2 Mar 2, 2011 06:58 PM
Background Image for Category Menu Items joan Page & Category Menu Bars 3 Apr 19, 2010 04:30 AM
[SOLVED] Getting rid of background image surrounding posts? AddApt Center area post/pages 2 Jan 26, 2010 05:26 PM
[SOLVED] Insert Background image/Individual posts loislanemiami Post-Kicker, -Byline & -Footer 7 Aug 10, 2009 09:42 PM


All times are GMT -6. The time now is 03:27 AM.


Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.