Using CSS to change the color of an app bar button ?

[aegersz]

Hi guys, you have shown me how to make a button bold but can i change it's color, too ?

if so, what do i need to add to CSS ?

[d3vcho]

Which button?

[aegersz]

like Help and even some custom ones, if possible.

[Antes]

You can target those buttons with #button_help #button_moderate #button_profile (Inspect the element with dev tools).

[aegersz]

Thanks, i will do that but how to I tell css to change their colors, please ?

[Kindred]

background-color: #ABDCE0;
and
color: #ABCDE0;

[aegersz]

Thank you sir.

I like css as it is forgiving.

[aegersz]

one more thing, when i try it, the background coloring exceeds the length of the button name by one space and looks odd.

what is going wrong for me, please ?

[Kindred]

URL demonstrating the issue?

[aegersz]

go to http://forum.drugs-and-users.org/ and see the Logout button (just a test style change for now)

login in with "regular-users", pw "forum"

Code Select Expand

#button_logout
{
        font-weight: bold;
        background-color: pink;
        color: blue;
}


[Antes]

This should work for you

Code Select Expand

#button_logout > a, #button_logout > a > span {
font-weight: bold;
background: pink;
color: blue;
border-radius: 5px;
}

[aegersz]

Thank you, it does ! It's a bit cryptic to me but it works like a charm.

[Antes]

Thank you, it does ! It's a bit cryptic to me but it works like a charm.

That's because SMF 2.0's theme is not CSS based. It requires block images to shape bars/menu etc...

[aegersz]

all this is still so new to me but with your fantastic help, i am getting it to look more pretty.

i can't thank you enough.

[aegersz]

i just re-opened this, i hope you don't mind ...

i also have some custom buttons setup by the "Ultimate Menu" mod and when i check the page source, the button names seem to be long strings of numbers and characters.

Can i use CSS to effect changes to these and if so, how do i locate their proper button names ?

[d3vcho]

Yes, checking the source of the page we can see that the elements have long names maybe to avoid confussion with other elements. The process to make CSS changes is the same as in the previous examples, but in this case you should replace with the button name.

Regards

[aegersz]

that sounds logical and it works fine now.

Thanks, solved again !