Hello,

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?

thanks

Joe

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

.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.

.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

.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;}

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

Hi

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?

.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.

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

im on Atahualpa 3.4.9
wordpress 3.0

I have put this in the css inserts

and the url is

http://freddieyauner.co.uk/freddie/

Thanks and Hope you can help.