Jump to content
Sign in to follow this  
david_hartman

Custom Post Background

Recommended Posts

david_hartman

Hi, I would like to add a default post background to use for all posts and have it be consistent with the other backgrounds on our pages. How can I set this up? Was able to do this on pages, but took some tricky coding. Not sure how I would do this with posts. You can see the category here: http://sontagfilm.org/category/news/ Post page: http://sontagfilm.org/news/winter-2011-update/ Thanks, David

Share this post


Link to post
Share on other sites
cmunns

Every single page has a unique ID as well as identifier that is more broad that you could use. How is your category page using the bg?

Share this post


Link to post
Share on other sites
david_hartman

The category page is set up with the following code:

body.category-news.canvas #page, body.category-news.full_width #page, body.category-news.fixed_width { background:url(http://sontagfilm.org/wp-content/uploads/2011/05/News-Page.jpg);
	background-repeat:no-repeat;
	width:940px;
	margin:0px auto 0px auto;
	background-position: 0px 154px;
	}

Looking for something that will just apply it to background of all post pages. Thanks Adam!

Share this post


Link to post
Share on other sites
catrina
body.single-post

<- I think this is the selector you're looking for just the single post pages.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
david_hartman

Thanks Catrina! That is the right selector, was able to make it work with the above code added. Another question on this topic.. is it possible to modify this to use different backgrounds per category? Can I add a category line in this code to make that work? Thanks, David

body.single-post.canvas #page, body.single-post.full_width #page, body.single-post.fixed_width {background:url(http://sontagfilm.org/wp-content/uploads/2011/05/News-Page.jpg);
	background-repeat:no-repeat;
	width:940px;
	margin:0px auto 0px auto;
	background-position: 0px 154px;
	}

Share this post


Link to post
Share on other sites
catrina

It's possible to if you use the category ID in the selector. The selector should look like this:

body.category-6

(this would be the selector for the News category, since its ID number is 6).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
david_hartman

Thanks Catrina, Wasn't quite able to get it to work. It works on the category page, but am not able to get the other background on posts.. just the one i already have with the code above. I created a "test" category to work on it.. by the way, how do I know the category number? Thanks, David

Share this post


Link to post
Share on other sites
catrina

You can look up the category ID in the Categories page on your Dashboard. Just mouse over the category link name in the table list and in the status bar of your browser, you'll see the link address and at the end of it, this: post&tag_ID=NUMBER That last number is the category ID.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
david_hartman

Still don't see the id number, just the slug on the 'categories' page.. What am I missing from that code to make a category specific post background? I tried adding the 'single-post' to this as well, but still only shows the other default post background..

body.category-test.canvas #page, body.category-test.full_width #page, body.category-test.fixed_width {background:url(http://sontagfilm.org/wp-content/uploads/2011/06/Book-Store-Page.jpg);
	background-repeat:no-repeat;
	width:940px;
	margin:0px auto 0px auto;
	background-position: 0px 154px;
	}

Thanks, David

Share this post


Link to post
Share on other sites
kastelic

Go to the Categories Page. Now hover over one of the category titles. Then look at the bottom left of your browser, and you should see the category id somewhere in that URL. Or go to that category page, and inspect the source of your document, and look at all the classes attached to the body tag. You will see all the unique identifiers for each page/category etc. here.

Share this post


Link to post
Share on other sites
david_hartman

Ah.. I see the hover now below. Thanks Jimmy! So, I'm still trying to get a unique post-background by category.. I'm still stuck at this point..

body.category-test.canvas #page, body.category-test.full_width #page, body.category-test.fixed_width {background:url(http://sontagfilm.org/wp-content/uploads/2011/06/Book-Store-Page.jpg);
	background-repeat:no-repeat;
	width:940px;
	margin:0px auto 0px auto;
	background-position: 0px 154px;
	}

Thanks, David

Share this post


Link to post
Share on other sites
catrina

You need to use the category ID number you see in the CSS selector. The CSS selector should look something like this: body.category-CATEGORYIDNUMBER Add that selector to your current CSS and copy that block of CSS multiple times with changes made to the category ID number and background image URLs since you want the background images to change in each category.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×