Jump to content

Archived

This topic is now archived and is closed to further replies.

kinglou75

Different Backgrounds for Posts

Recommended Posts

kinglou75    18
kinglou75

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
kinglou75    18
kinglou75

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
James B    436
James B

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;
}
  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

×