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.
Options

Changing the Discussion Button and Header Colour

Hi,

Was just wanting to ask, I'm currently editing my custom.css file, and cant for the life of me figure out how to change the colour of the 'New Discussion' button and the Blue banner across the top which contains 'Discussions' 'Activity' and 'Mark all viewed'

What CSS class do i need to use to get those changed? tried several and nothing works :neutral_face:

Thanks

Jon :smile:

Comments

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    Use the developer tools of your favorite browser. I use Firefox with the Firebug extension. That gives me an option to see the "computed" style for the head and why it has that style: #Head {background-color: #38ABE3} ;)

    The other one is .Button {background-color: #F8F8F8} but changing .Button will change every button so you might want to change .Button.NewDiscussion

  • Options

    Thanks!!

    Header changed, but the new discussion button just stays the same colour :neutral_face:

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    Which theme are you using? Have you been using any tools to determine the right class?

    That's the HTML for the default theme:

    < div class="BoxButtons BoxNewDiscussion">
       < a class="Button Primary Action NewDiscussion BigButton" href="/post/discussion/">New Discussion< /a>
    < /div>
    

    You can see that the button has quite a lot classes. In order to address the button you have to "join" them like that (without spaces): .Button.NewDiscussion would be one selector for that button. I hate "!imortant" but maybe you need it...

  • Options

    Im using the default theme, just editing it to my needs.

    Yeah i 'inspected element' from Chrome, and found that, just cant seem to get it to work :neutral_face: Will keep trying different things lol! Something will work in the end!

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    By the way: I hope by "editing it to my needs" you don't mean editing core files! You will regret that sooner or later. Instead of that create a custom theme. Read here for more information. You'll only need the about.php and custom.css file to get started.

    But back to the CSS problem: I tried it myself right now and what was working is this

    .Button.NewDiscussion {
      background-color: red;
      background-image: none;
    }
    

    ;)

  • Options

    Yeah i've created a custom theme! Not touched the core files :wink:

    Just tried and again the button stays blue... Not sure whats going on! :confused:

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    @XboxSuperJoon said:
    Just tried and again the button stays blue...

    I'll be unable to help: my New Discussion button isn't blue, it has a grey gradient... :o

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    If you are able to post a link to your board, it'll be much easier, btw.

  • Options
    whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited October 2014

    Try this with your colour:

    Panel .BigButton {

    background: #000;

    }

    Worked when I tried it in Firebug, not sure if it affects other buttons in the panel on other pages (if there are any...).

    There's a couple of wiki pages on custom themes here:

    http://vanillawiki.homebrewforums.net/index.php/Custom_Themes_1
    http://vanillawiki.homebrewforums.net/index.php/Custom_Themes_2

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    Didn't wanted to create an account so I've just tried to style the SignIn button:

    a.Button.SignInPopup {
        background-color: #FF0000;
        background-image: none;
    }
    

    By adding the "a" I'm one little bit more specific and that is sometimes enough for CSS. Don't ask me why, it is not that I understand CSS...

  • Options
    edited October 2014

    IT WORKS!! haha!!

    Thanks for the help! :smiley: Adding an 'a' before the .button.NewDiscussion worked :blush: Also managed to do the sign in button too :wink:

  • Options
    hgtonighthgtonight ∞ · New Moderator

    @R_J said:
    By adding the "a" I'm one little bit more specific and that is sometimes enough for CSS. Don't ask me why, it is not that I understand CSS...

    Chris Coyier has a great write-up about CSS specificity here: http://css-tricks.com/specifics-on-css-specificity/

    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.

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    That's a really a great read!

Sign In or Register to comment.