Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

Styling a specific category


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Oct 19, 2011, 03:03 AM
nickmoreton
 
14 posts · Apr 2011
Hey

On this thread you guys helped me change the h1 and h3 tags of specific pages. http://forum.bytesforall.com/showthr...1364#post71364

I thought an easier way to do this might be to install a page category plug in (so pages could be assigned categories) and then make the CSS category specific rather than page.

I looked around a few other threads and have tried the code:

Code:
body.category-diving-page h1 {
color: #0694e0;
}
Where 'Diving Page' is my category. I've also tried using the category id number, and also removing the body tag from the code

However, I've not had much luck. I've even checked by making a normal post with that category (just to make sure it wasn't a page category issue)

Any advice?

Thanks
Nick
  #2  
Old Oct 19, 2011, 03:56 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
what is the URL?

go look at the source of the page and find the '<body...' statement and look at the classes assigned. See if the class matches what you need.

If you are going to customize your site beyond the available options, you need to learn some CSS (w3schools.com/css is a great resource) and learning how to use FireBug in FireFox (especially the 'examine' tool) is a great way to see the CSS that effects an HTML element
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Oct 19, 2011, 04:24 AM
nickmoreton
 
14 posts · Apr 2011
Juggledad,

I do know CSS, but I don't know everything.

This is pretty specific stuff and I am following rules that you yourself set out in this thread - http://forum.bytesforall.com/showthr...ckground+image (see post #14 onwards)

Nick
  #4  
Old Oct 19, 2011, 04:30 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
what is the url so I can see all the CSS that might be applied
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Oct 19, 2011, 04:53 AM
nickmoreton
 
14 posts · Apr 2011
Here is the main page with default styling
http://dev.nmcweb.co.uk/african/

Here is a page with body.page-id-68 specific styling
http://dev.nmcweb.co.uk/african/activities/diving-2/

And here is page that I have applied the 'diving page' category to and tried to style using the code body.category-diving-page
http://dev.nmcweb.co.uk/african/page-category-test/

And finally here is a post that has the category applied
http://dev.nmcweb.co.uk/african/test/

I could understand if it's not possible on the categorised page, but I'm not sure why it's not working on the categorised post.

Nick
  #6  
Old Oct 19, 2011, 05:36 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
1) without the possible use of a plugin, pages don't have categories
2) you coded the CSS as
HTML Code:
post-headline.category-diving-page {
color: #0694e0;
}
this says "for the HTML element 'post-headline' that has a class of 'category-diving-page' apply this CSS."

There is no HTML element 'post-headline', there is a
HTML Code:
<div class="post-463 post type-post status-publish format-standard hentry category-diving-page odd" id="post-463">
so you could code
HTML Code:
div.category-diving-page {....}
you have to learn your CSS and the way to code the CSS selectors properly
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Oct 19, 2011, 06:17 AM
nickmoreton
 
14 posts · Apr 2011
Yes, that was a mistake - I was trying different things out. I thought I'd reverted it back to the body.category code but obviously hadn't saved

Either way, it looks like the page category doesn't play nice with this code so I'll stick to applying style to individual pages.
  #8  
Old Jan 4, 2012, 11:15 PM
shrewdgeek
 
26 posts · Oct 2011
I am trying to do the same thing,i am trying to set a background for individual categories in post-kicker section.But i am kind of bugged now,i tried its not working.

My Blog : ShrewdGeek

Ataualpa version : 3.7.3
Wordpress Version : 3.3.1

Please guide me properly,i think i am making mistakes in css styling !!!
  #9  
Old Jan 5, 2012, 06:10 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
your CSS is written incorrectly. You have
HTML Code:
 .post-kicker .category-gadgets {background: #cccccc;}
so I want you to explain to me how your CSS Selector ( .post-kicker .category-gadgets ) works. Explain it in english.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Jan 5, 2012, 06:29 AM
shrewdgeek
 
26 posts · Oct 2011
Well to explain,
category-gadgets and postkicker are define in class , so i will have to use something like .name {...}

if i change to .category-gadgets .post-kicker {...} , the whole box gets highlighted,but i want only category=gadgets highlighted.
  #11  
Old Jan 5, 2012, 06:56 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
1) CSS is cascading, so something you apply to an HTML element applies to all it's children unless something else over rides it.
2) when you say '.post-kicker .category-gadgets' you are saying "apply this to all elements, and their children, with a class of 'category-gadgets' that are in an element with a class of 'post-kicker'." - ie the order you specify classes IS important.
3) CSS is cascading so the css is applied to what you defined and it's children elements. If you only want it to apply t the children elements then you need to specify the child in the CSS selector.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
categories, css

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Page specific styling nickmoreton Center area post/pages 7 Aug 26, 2011 08:51 AM
Possible to link a category menu to a specific post? runnyeggsham Page & Category Menu Bars 0 Dec 12, 2010 04:27 PM
Restrict posts on index to a specific category. amish_geek Center area post/pages 2 Feb 17, 2010 04:13 PM
collapsible sidepost widgets of specific category angmarianne Forum How-To 0 Nov 9, 2009 08:17 AM
[SOLVED] 3.4.2 Specific header image per category Seb the frog Header configuration & styling 3 Aug 8, 2009 03:07 AM


All times are GMT -6. The time now is 03:37 AM.


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