Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

.css line to edit category background colour and font

Does anybody know where you can edit the category background colour and category font colour in style.css?

on line 1342 i changed the background colour which sort of worked but didnt fill the whole background in the desired colour but for the love of editing i have no idea how to change the text colour :/

Any ideas?

Comments

  • hgtonighthgtonight ∞ · New Moderator

    Text color is set using the color: #123456 rule. You can find out what element you need to select using a tool like Firebug. You should be placing these rules in your theme's custom.css file (/themes/yourthemename/design/custom.css).

    Read the wiki on custom themes for more information.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited April 2013

    @Xander

    If you are using 2.0.18 I made an annotated_css theme to help people get familiar with which css rules affect common things they might want to change.

    If it is 2.1 there is a set of pages on the Wiki that do the same thing.

  • DogHamDogHam
    edited April 2013

    If you are using chrome you can Inspect the element. In the left corner of the new window you can see the style sheets. For example:

    Background and font color in my discussions:

    You can see: style.css:1213

    You can Find it on line 1213 in style.css (if you hover the cursor over style.css:1213 you can see where you can find this stylesheet)

    Maybe you have to add background and color in your stylesheet like me.

  • @whu606 said:
    Xander

    If you are using 2.0.18 I made an annotated_css theme to help people get familiar with which css rules affect common things they might want to change.

    If it is 2.1 there is a set of pages on the Wiki that do the same thing.

    this is perfect thank you very much!

  • @DogHam

    for some reason i didnt even see your post lol :/

    I was just coming back here to vent some steam and then saw you reply! So thank you for that info.

    BUT im still having issues finding what im looking for! if you goto http://www.lookandleap.co.uk/forum/

    you will see my category dilemma. I've managed to get some of the background coloured but there seems to be a border of some sorts that i cant fill in :(

    Any ideas?

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited May 2013

    @Xander

    If you persevere with Firebug (or any other Inspector) you will be able to solve all these issues yourself.

    A couple of minute's fiddling shows that you need to change the background of this element:

    .DataList .Item {
        background-color: #FFFFFF;
    }

    to your required colour.

    What you have been doing is changing an element within the DataList element.

    The most powerful feature of Firebug (imo) is that you can make changes on the fly, and see what effect they have.

    It really is worth learning to use Firebug efficiently if you want to make your theming painless.

  • @whu606 said:
    Xander

    If you persevere with Firebug (or any other Inspector) you will be able to solve all these issues yourself.

    A couple of minute's fiddling shows that you need to change the background of this element:

    .DataList .Item {
        background-color: #FFFFFF;
    }

    to your required colour.

    What you have been doing is changing an element within the DataList element.

    The most powerful feature of Firebug (imo) is that you can make changes on the fly, and see what effect they have.

    It really is worth learning to use Firebug efficiently if you want to make your theming painless.

    Much thanking going your way! :D

    I know deep down its probably really easy to do but sadly my ADHD doesnt allow me for much patience if i do not see an instant result :/ so something simple to you is not so simple to me even though i know it is!

    Many thanks anyway! ...and without sounding like im taking advantage (lol) is there a way to change just the main header colours of categories? or even just the font colour without it changing everything else like sub-categories?

    Im going to get firebug for Mac as we speak

  • @Xander said:
    Much thanking going your way! :D

    >

    I know deep down its probably really easy to do but sadly my ADHD doesnt allow me for much patience if i do not >see an instant result :/ so something simple to you is not so simple to me even though i know it is!

    >

    Many thanks anyway! ...and without sounding like im taking advantage (lol) is there a way to change just the main >header colours of categories? or even just the font colour without it changing everything else like sub-categories?

    >

    Im going to get firebug for Mac as we speak

    You can change anything you want. But if your theme is using the same css rule or div for main header and subcategories, you can't. Or you have to change the whole theme.

    Maybe you can. I'm not sure. I never learned php or css language :)

    Use XAMPP and install new vanilla forum on localhost. Upload this theme and try something. It's faster and saver.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited May 2013

    @Xander

    is there a way to change just the main header colours of categories?

    Almost certainly!

    I knew almost nothing about css before I started using Vanilla (and tbh, still don't, really.)

    However, learning to use Firebug has allowed me to make pretty much any change I need.

    I didn't find it easy to start with, honest.

    What I wish I had known at the start:

    In Firebug, right click on the element you want to inspect, and choose, er, Inspect with Firebug

    On the left, the relevant rule will be highlighted in the left hand pane.

    Click on the div, li, ul a etc. of that element and you will see the css rule affecting it in the right hand pane.

    You can edit the existing rules, or add new ones in that pane, and the effect will show immediately on your page, but go as soon as you refresh.

    Perfect for lots of trial and error, 'Oops, I didn't think that would happen.'

    It's a short learning curve from 'Huh?' to 'I get it!', and well worth the time, imo.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @Dogham

    But if your theme is using the same css rule or div for main header and subcategories, you can't.

    Not really correct.

    Mostly, rules in custom.css take precedence.

    Where they don't, appending important! to a rule normally works.

    It is important to understand that if you only want to change one thing in Vanilla, that is the only rule you need in your custom.css theme file.

    You don't need to copy over anything else.

  • I found a setting on safari to unlock Developer mode so i can inspect elements and WOW!

    Thank you so much my site (in my eyes) is starting to loOk wonderful :D

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @Xander

    Excellent!

    That also allows you to change settings on the fly, from what I can see.

    Have fun.

Sign In or Register to comment.