Welcome Guest [Log In] [Register]
This board has been archived and is no longer accepting new questions. If you have a support question for your ZetaBoard, please visit us at the new support board. Registration is free and easy.


Visit the NEW ZetaBoards Support forum!

Username:   Password:
Add Reply
Style Individual Categories
Topic Started: Feb 25 2008, 04:26 PM (1,543 Views)
Nicola Feb 25 2008, 04:26 PM Post #1
Darth Vader's Sewing Instructor

 This is more of a documentation, but I don't think it deserves its own Wiki page.

In the past I've seen a lot of people wanting to style the category header of each category on their board.
This can easily be done with CSS but the code will work for your board only.

Want to do it?

Right click the board while viewing the index, and view the source. Scroll down until the category HTML starts:

Posted Image

See the <div id="cat-21" class="category"> ?

For this particular category, we can add to the CSS, and affect areas within that div only:

Code:
 

#cat-21 h2 {
background: unique background;
}


This isn't great for those making custom themes, because the category ID is going to be different for every category on every board.

Please post any questions ^_^
Offline Profile Quote Post Goto Top
 
Viral Feb 25 2008, 05:12 PM Post #2
Member Avatar
i'm stanley nao
[ * * * * * ]
 Nice Nicola.

Also note that you can use Firebug to find which ID it is, and it much quicker this way.
Offline Profile Quote Post Goto Top
 
Sith_Lord Feb 29 2008, 11:58 AM Post #3
Patronizing incurable lies
[ * * ]
 I thought this would be possible with the individual numbering. :p Firefox web developer can be used to see the id's very quickly.
Edited by Sith_Lord, Feb 29 2008, 11:58 AM.
Offline Profile Quote Post Goto Top
 
Nicola Feb 29 2008, 12:00 PM Post #4
Darth Vader's Sewing Instructor
Sith_Lord
Feb 29 2008, 11:58 AM
Firefox web developer can be used to see the id's very quickly.
Right, but both you and Viral forget that not everyone uses Firefox. Sure, in a perfect world IE has Firebug... but it also works correctly in that perfect world :P
Offline Profile Quote Post Goto Top
 
Viral Feb 29 2008, 12:19 PM Post #5
Member Avatar
i'm stanley nao
[ * * * * * ]
 Lol, I don't forget, I get reminded of IE pretty much everyday when I have to go to school :P .
Edited by Viral, Feb 29 2008, 03:09 PM.
Offline Profile Quote Post Goto Top
 
luciferxm Feb 29 2008, 02:46 PM Post #6
Member Avatar
Farewell zeta support
[ * * * * ]
 where it says background, can i add url to an image?
Offline Profile Quote Post Goto Top
 
Nicola Feb 29 2008, 02:57 PM Post #7
Darth Vader's Sewing Instructor
luciferxm
Feb 29 2008, 02:46 PM
where it says background, can i add url to an image?
background: url( url to image);

or

background-image: url( url to image);


I just used that as 'filler' text. Normal CSS goes in there like always :)
Offline Profile Quote Post Goto Top
 
luciferxm Feb 29 2008, 03:24 PM Post #8
Member Avatar
Farewell zeta support
[ * * * * ]
 i did it on my test board and it came out alright!..thx for that tutorial hun
Offline Profile Quote Post Goto Top
 
Viral Mar 2 2008, 11:16 AM Post #9
Member Avatar
i'm stanley nao
[ * * * * * ]
 .. It's not working for me.

I added to the bottom of my CSS:

Code: HTML
 
#cat-124160 h2 {
color:#ff0000;
}


(News and Discussion)

Nothing happened.

http://s1.zetaboards.com/ViralSkin/index/?setskin=20172
Offline Profile Quote Post Goto Top
 
davadude Mar 2 2008, 11:18 AM Post #10
Member Avatar
GuildWars addict :P
[ * * * ]
Nicola
Feb 29 2008, 12:00 PM
Sith_Lord
Feb 29 2008, 11:58 AM
Firefox web developer can be used to see the id's very quickly.
Right, but both you and Viral forget that not everyone uses Firefox. Sure, in a perfect world IE has Firebug... but it also works correctly in that perfect world :P
Quoting that :p
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · User Created Codes · Next Topic »
Add Reply