Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

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


  #1  
Old Feb 5, 2013, 09:22 AM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
Hi,

Is it possible to make the post title text a different color if it is set to a certain category?
__________________
Emanuel
http://www.sferios.com
  #2  
Old Feb 5, 2013, 10:19 AM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
yes, use CSS. the category should be in the post classes.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Feb 5, 2013, 01:37 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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.
__________________
Emanuel
http://www.sferios.com
  #4  
Old Feb 5, 2013, 02:49 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Feb 5, 2013, 03:05 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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?
__________________
Emanuel
http://www.sferios.com
  #6  
Old Feb 5, 2013, 03:12 PM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Feb 5, 2013, 03:15 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
Ok great! Thanks again. Hopefully this is the milestone I needed. Firebug here I come!!!
__________________
Emanuel
http://www.sferios.com
  #8  
Old Feb 5, 2013, 03:44 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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%;
}
----------------------
__________________
Emanuel
http://www.sferios.com
  #9  
Old Feb 5, 2013, 03:49 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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%;
}
__________________
Emanuel
http://www.sferios.com

Last edited by emanuel1969; Feb 5, 2013 at 03:52 PM.
  #10  
Old Feb 5, 2013, 04:00 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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%;
}
__________________
Emanuel
http://www.sferios.com

Last edited by emanuel1969; Feb 5, 2013 at 04:17 PM.
  #11  
Old Feb 5, 2013, 05:10 PM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I'd have to have aurl pointing to the page in question to check, but it looks correct.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Feb 5, 2013, 05:56 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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.
__________________
Emanuel
http://www.sferios.com
  #13  
Old Feb 5, 2013, 06:30 PM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Feb 5, 2013, 07:01 PM
emanuel1969's Avatar
emanuel1969
 
133 posts · Apr 2010
California
Send a message via Skype™ to emanuel1969
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].
__________________
Emanuel
http://www.sferios.com

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Blog Title: Changing Colors of specific words timmoj Header configuration & styling 1 Mar 6, 2011 03:51 PM
Full Post Text on specific category pages spencer Atahualpa 3 Wordpress theme 1 Jul 7, 2009 02:47 PM
[SOLVED] Header Title - Edit colors of text Craig Mattice Header configuration & styling 2 May 7, 2009 12:55 AM


All times are GMT -6. The time now is 04:53 PM.


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