• 0
Sign in to follow this  
Followers 0

Different Backgrounds for Posts

Question

Posted · Report post

How would I go about adding different backgrounds for single posts? I changed the background on one post and it changed it for all the other ones.

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

Hi,

 

All posts, single posts, pages, categories etc.. are given a unique class and ID that is associated to that post, page etc.. and that post/page only.

Therefore, if you want to give all your posts a different colored background, all you need to do is inspect your post using your Browsers web dev tools (I recommend Chromes) and find the class and ID for that post.

In the screenshot below, I have highlighted my posts class and ID and if you look on the right panel, you can see the CSS I have used.

 

http://d.pr/i/3mXJ

 

You can also view the class in the Body tag too.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny

 

Thanks for the response. What about a category page? Like here:

 

http://www.bearvalley.com/category/bear-essentials/

 

I want a different background just for this catergory and I want to use a picture not a plain color? Can this happen?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The same thing to be honest, like posts and pages, categories are given a unique class in the body tag. You can use this to prefix your code and apply custom CSS to a specific category or all categories.

You can also include an image instead of a background color.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny

 

I am getting back to this. Would I take the new code into custom tab or would i give the page its own class id? I am seartching desperately on this page for the unique body tag (in chrome) and I still cannot find it:

 

http://www.bearvalley.com/category/bear-essentials/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ive highlight the unique classes you can use for your custom CSS - http://d.pr/i/dLgG

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny

 

Thanks Danny, still trying to get this to work. This is the mark up I am using. Am I doing it right?

 

catergory-bear-essentals category-96{
   background:#cb55aa;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, as it's a class you need to put a . before each.

 

.catergory-bear-essentals .category-96 {
   background:#cb55aa;
}
 
If you want to target the specific area behind the text add .my-body-area
 
.catergory-bear-essentals .category-96 .my-body-area {
   background:#cb55aa;
}
1 person likes this

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  
Followers 0