[SOLVED] Category-specific colors for post title text?

emanuel1969 · #1 Feb 5, 2013, 10:22 AM

Hi,

Is it possible to make the post title text a different color if it is set to a certain category?

juggledad · #2 Feb 5, 2013, 11:19 AM

yes, use CSS. the category should be in the post classes.

emanuel1969 · #3 Feb 5, 2013, 02:37 PM

I'm learning pretty fast, and I can feel that very soon I'm going to "get" a lot of things I should already be getting. But right now I still don't. So please indulge me with a few silly questions here...

I already knew that if this was possible it would involve CSS. I've gotten pretty good at editing CSS files, figuring out what the code applies to and making changes. I can also add *new* CSS to the inserts filed in the theme options. The thing is, though, I have no idea what new code to add if it involves complicated things like functions (which I'm imagining this utilizes).

So I'm not sure what you mean by "the category should be in the post classes?"

And more basically, are you suggesting I add new CSS code to the inserts field in the theme options? Or modify some css code in some file somewhere? If the former, how do I find out what code to use? I know basic css, like { color:#123456; } but assigning this color to just the title text of a particular category... no clue.

Am I asking too much? I know this forum isn't a basic css instruction forum. But I *do* feel on the verge of a big leap of understanding where then I won't need to ask so many questions.

lmilesw · #4 Feb 5, 2013, 03:49 PM

This is where the Firebug extension for Firefox is invaluable. You use it to look at a post in a particular category and will see that the category is something like category-catx or category-caty so you would use .category-catx or .category-caty as your selectors and apply the necessary CSS.

emanuel1969 · #5 Feb 5, 2013, 04:05 PM

Ok I'm going to get Firebug and figure out how to use it. Am I right than in believing that I would apply the css to the css inserts field in the Ata theme options and it would override anything else?

juggledad · #6 Feb 5, 2013, 04:12 PM

CSS has a set of rules for how it is applied. roughly they are
the order they appear - last one overrides an earlier setting
granularity - a more specific selector orverides a less specific selector
inline verses style sheet
use of '!important' - this should trump all

emanuel1969 · #7 Feb 5, 2013, 04:15 PM

Ok great! Thanks again. Hopefully this is the milestone I needed. Firebug here I come!!!

emanuel1969 · #8 Feb 5, 2013, 04:44 PM

Ok I installed Firebug, inspected the post page for a post in a specific category, and I found this:

-----------------------
<body class="archive category category-create category-84" data-twttr-rendered="true">
----------------------

Then I found this css assigning the style for the post's title:

---------------------
div.post-headline h2 a:link, div.post-headline h2 a:visited, div.post-headline h2 a:active, div.post-headline h1 a:link, div.post-headline h1 a:visited, div.post-headline h1 a:active {
color: #1395D2;
font-size: 20px;
line-height: 120%;
}
----------------------

So I know how to change the css code, and I'm guessing that I have to put an additional selector in front of the initial "div.post-headline". Is this correct? And is that selector simply "category-84"? And in that case do I simply do this?

---------------------
category-84 div.post-headline h2 a:link, div.post-headline h2 a:visited, div.post-headline h2 a:active, div.post-headline h1 a:link, div.post-headline h1 a:visited, div.post-headline h1 a:active {
color: #1395D2;
font-size: 20px;
line-height: 120%;
}
----------------------

emanuel1969 · #9 Feb 5, 2013, 04:49 PM

Oops. That wasn't actually the single post page. That was the category page. I put this css on it to turn the title black. It ended up turning all my category page titles black, not just the single category I wanted. And it didn't do anything to the title text color on the single-post page.

category-84 div.post-headline h2 a:link, div.post-headline h2 a:visited, div.post-headline h2 a:active, div.post-headline h1 a:link, div.post-headline h1 a:visited, div.post-headline h1 a:active {
color: #000000;
font-size: 20px;
line-height: 120%;
}

emanuel1969 · #10 Feb 5, 2013, 05:00 PM

So on the single post page I found this using firebug:

<div id="post-2822" class="post-2822 post type-post status-publish format-standard hentry category-resist tag-news odd">

(the category title is called "resist")

So I tried adding the following CSS, which did not work.

---------------
.category-resist div.post-headline h2 a:link, div.post-headline h2 a:visited, div.post-headline h2 a:active, div.post-headline h1 a:link, div.post-headline h1 a:visited, div.post-headline h1 a:active {
color: #000000;
font-size: 20px;
line-height: 120%;
}

juggledad · #11 Feb 5, 2013, 06:10 PM

I'd have to have aurl pointing to the page in question to check, but it looks correct.

emanuel1969 · #12 Feb 5, 2013, 06:56 PM

Here's the page:

http://www.sferios.com/october2011/c...achersboycott/

The reason for the horrible permalink is because I exported an entire drupal site and imported it into Wordpress. I used this terrific online service (www.cms2cms.com), which I highly recommend for such migrations, but it left a few things here and there to clean up (like the permalinks). But to give you an idea, this drupal site had over 2,000 posts, 3,000+ images and 13,000 members, and with less than a half an hour of work (essentially following online instructions) I migrated the entire thing into Wordpress.

The code is still there, and it's still not working, btw.

juggledad · #13 Feb 5, 2013, 07:30 PM

The title on that page is not a link, so there is no 'a' element. Post titles are only links on multi-post pages

You need to add

HTML Code:

.category-resist div.post-headline

As one of the selectors

emanuel1969 · #14 Feb 5, 2013, 08:01 PM

Here's what worked:

.category-resist div.post-headline h1

It needed the h1 also. But this is great! Indeed I'm off and running now. Firebug was a great recommendation. Thanks for the lesson. You can mark this as [Solved].