Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   color coded category titles (http://forum.bytesforall.com/showthread.php?t=7018)

nerdydog May 7, 2010 04:23 PM

color coded category titles

total noob in the css area, so pardon in advance if this question is laughable. One of the reasons i am using atahualpa is that its super easy and can be customized by a css dummy like me.

I am looking to make 8 categories on my blog, and I would love for the titles of each category to each be a different color, and ideally, have each blog post title match its category menu title. Is this possible to do? If so how would I go about doing this?



juggledad May 10, 2010 07:12 AM

Yes this is doable via CSS, but remember a post can be in mutiple categories so the last category mentioned in the CSS Insert will be dominant. Here is a samle of what you would put in the ATO->Add HTML/CSS Inserts->CSS Inserts - this first part will take care of the post titles
HTML Code:

.category-announcements .post-headline h1,
.category-announcements .post-headline h2 a {color:red !important;}
.category-events .post-headline h1,
.category-events .post-headline h2 a {color: blue !important;}
.category-frogs .post-headline h1,
.category-frogs .post-headline h2 a {color: green !important;}

this second part will take care of teh category names in the category widget. You will have to match the item number with the correct category. The easy way to figure it out is to add the category widget to your page, view the page then look at the soruce of the page.
HTML Code:

.cat-item-3 a {color:red !important;}
.cat-item-35 a {color: blue !important;}
.cat-item-7 a {color: green !important;}

You can use this as a guide for the post footers
HTML Code:

.category-announcements .post-footer a,
.category-announcements .post-footer  {color:red !important;}
.category-events .post-footer  a,
.category-events .post-footer  {color: blue !important;}
.category-frogs .post-footer a,
.category-frogs .post-footer  {color: green !important;}

nerdydog May 10, 2010 09:26 AM

Thanks for the help! I will give this a try. thanks.

Flukey Aug 3, 2010 10:30 AM


Thanks for this help have been looking for something like this for ages!

I am having a headache getting the a:active to be recognised, it is always overridden by the ATO category bar settings? I have been using this code below and the a:hover command works but not the a:active. Any Ideas?

HTML Code:

.cat-item-3 a:hover {
        color: #ffffff !important;
        background: #5CFFAD !important;

.cat-item-3 a:active {
        color: #ffffff !important;
        background: #5CFFAD !important;

.cat-item-4 a:hover {
        color: #ffffff !important;
        background-color: blue !important;

.cat-item-4 a:active {
        color: #ffffff !important;
        background-color: blue !important;

I get the feeling it is something to do with current-cat but I cant get there... please help.

juggledad Aug 3, 2010 06:21 PM

what version of Atahualpa and WP?
where are you putting this?
What is the url?

Flukey Aug 4, 2010 02:37 AM

im on Atahualpa 3.4.9
wordpress 3.0

I have put this in the css inserts

and the url is


Thanks and Hope you can help.

All times are GMT -6. The time now is 09:48 PM.

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