Change the bottom border color of buttons

Tami,

Try adding this to your css…

.ui-button {
 border: 0;
}

Hi Matt,

Thanks for your reply. I added the above css but the green bottom border remains. Can you think of anything else I may be missing?

give this a go:

.ui-button {
border-bottom-width: 5px;
border-bottom-color: red;
}

obviously you can play around with the color and width (or remove it completely e.g. 0px for width) once you know you’ve got the right css.

Hi Greg,

Thanks for chiming in!

That works for a button not within a tab.

I have a custom button on a page title on a tab it didn’t change the color and it didn’t change on hover. Have you been able to get that work?

Thank you!

you should be able to apply a ‘unique id’ to the page title component in its advanced properties:

and then put that same unique id with a # in front of the css like this:

#titleButtons .ui-button {
border-bottom-width: 5px;
border-bottom-color: red;
}

give that a go!

Hi Greg,

No such luck. The green stays on hover and the button in a tab. It is so crazy because I can inspect the element and change the color that way. But when I bring the code into css it does nothing.

The css selectors are slightly different for buttons when they are included in tabs and when they are not. 

css selectors when button is included in tab. 

.ui-button,
.ui-widget-content .ui-button.ui-state-default,
.ui-widget-content .ui-button.ui-state-default.ui-state-hover,
.ui-widget-content .ui-button.ui-state-default.ui-state-active
    {border: 0;}

css selector when button is above the tab. 

.ui-button,
.ui-button.ui-state-default,
.ui-button.ui-state-default.ui-state-hover,
.ui-button.ui-state-default.ui-state-active
    {border: 0;}

You should be able to use one or both of those selector syntaxes and get what you are after. 

Fantastic! Thank you as always Rob. I have been trying to figure this our for a couple of months now.

Thank you!