Changing the Discussion Button and Header Colour

XboxSuperJoon

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

Thanks

Jon

R_J

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

XboxSuperJoon

Thanks!!

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

R_J

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

XboxSuperJoon

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 Will keep trying different things lol! Something will work in the end!

R_J

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;
}

XboxSuperJoon

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

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

R_J

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

R_J

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

XboxSuperJoon

http://www.xboxfamily.uk/community Appreciate the help

whu606

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

R_J

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

XboxSuperJoon

IT WORKS!! haha!!

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

hgtonight

@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/

R_J

That's a really a great read!