Jump to content
Sign in to follow this  
visual

Change background color of each post depending on category

Recommended Posts

visual

Hi there, yesterday i changed the menu bar colors for each category -> see post Now i want to change the background color of each post depending on its category. See live page and sketch for better understanding. Hope, anyone can help!

Share this post


Link to post
Share on other sites
cmunns

If you view the source you'll similarly placed selectors on the body div. For example there is a class for the live page you attached that looks like this category-trixl-on-tour to use it for what you want it would be something like this `.category-trixl-on-tour .copy {background:#79ab74;}` or ...whatever hex color is appropriate.

Share this post


Link to post
Share on other sites
visual

Thank you so much! Quick and dirty. Perfect. BUT: somehow, he doesn't understand `.category-trixl-@-work .copy {background:#b3c1ce;}` i think, it must be the ???@", so i tried these codes: `.category-trixl-(hexadezimal-code)-work .copy {background:#b3c1ce;}` `.category-trixl-(dezimal-code)-work .copy {background:#b3c1ce;}` but doesn't work. Any ideas?

Share this post


Link to post
Share on other sites
bryan-hadaway

Why is there an @ - did you add that character in with the category name? If so you'll probably need to rename @ in the category with to and then you can use: `.category-trixl-to-work .copy{background:#b3c1ce}` Thanks, Bryan

Share this post


Link to post
Share on other sites
visual

is there no chance to use the @ within the category name? Customer wants it!

Share this post


Link to post
Share on other sites
bryan-hadaway

Possibly, go to: Posts > Categories and edit the @ category, you should be able to keep @ in it's title, but rename the slug. Thanks, Bryan

Share this post


Link to post
Share on other sites
visual

SOLVED! Found it. The @ was ignored in the slug, so it was simply `.category-trixl-work` Slowly i'm getting into it. And it's really fun to play with custom CSS! Thank you for your help everyone. If you're interested in the result - here it is. Added lots of gradients everywhere - ahh, and cmunns, you forgot to add the round corners ;-) Here's the complete code for everyone interested: ` /* Post Colors depending on Category */ .category-trixl-on-tour .copy {background:#b5d1b3; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-top-left-radius: 5px; -khtml-border-top-right-radius: 5px;} .category-trixl-work .copy {background:#b3c1ce; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-top-left-radius: 5px; -khtml-border-top-right-radius: 5px;} .category-arbeitsrechts-trix .copy {background:#d0b7ae; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-top-left-radius: 5px; -khtml-border-top-right-radius: 5px;} .category-trixl-on-air .copy {background:#d1cab3; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-top-left-radius: 5px; -khtml-border-top-right-radius: 5px;} /* Metabars Colors */ .category-trixl-on-tour .metabar em {background:#79ab74 /* for non CSS3-browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5d1b3', endColorstr='#79ab74'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#b5d1b3), to(#79ab74)); /* for webkit browsers */ background: -moz-linear-gradient(top, #b5d1b3, #79ab74); /* for firefox 3.6+ */url('') -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;} .category-trixl-work .metabar em{background:#7492ab /* for non CSS3-browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3c1ce', endColorstr='#7492ab'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#b3c1ce), to(#7492ab)); /* for webkit browsers */ background: -moz-linear-gradient(top, #b3c1ce, #7492ab); /* for firefox 3.6+ */ url('') -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;} .category-arbeitsrechts-trix .metabar em{background:#ac8076 /* for non CSS3-browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0b7ae', endColorstr='#ac8076'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#d0b7ae), to(#ac8076)); /* for webkit browsers */ background: -moz-linear-gradient(top, #d0b7ae, #ac8076); /* for firefox 3.6+ */ url('') -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;} .category-trixl-on-air .metabar em{background:#ac9f76 /* for non CSS3-browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1cab3', endColorstr='#ac9f76'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#d1cab3), to(#ac9f76)); /* for webkit browsers */ background: -moz-linear-gradient(top, #d1cab3, #ac9f76); /* for firefox 3.6+ */ url('') -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;} /* Post Footer Colors */ .category-trixl-on-tour .post-footer {background:#79ab74 /* for non CSS3-browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5d1b3', endColorstr='#79ab74'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#b5d1b3), to(#79ab74)); /* for webkit browsers */ background: -moz-linear-gradient(top, #b5d1b3, #79ab74); /* for firefox 3.6+ */url('')} .category-trixl-work .post-footer {background:#7492ab /* for non CSS3-browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3c1ce', endColorstr='#7492ab'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#b3c1ce), to(#7492ab)); /* for webkit browsers */ background: -moz-linear-gradient(top, #b3c1ce, #7492ab); /* for firefox 3.6+ */ url('')} .category-arbeitsrechts-trix .post-footer {ac8076 /* for non CSS3-browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0b7ae', endColorstr='#ac8076'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#d0b7ae), to(#ac8076)); /* for webkit browsers */ background: -moz-linear-gradient(top, #d0b7ae, #ac8076); /* for firefox 3.6+ */ url('')} .category-trixl-on-air .post-footer {background:#ac9f76 /* for non CSS3-browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1cab3', endColorstr='#ac9f76'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#d1cab3), to(#ac9f76)); /* for webkit browsers */ background: -moz-linear-gradient(top, #d1cab3, #ac9f76); /* for firefox 3.6+ */ url('')} `

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  

×