Skip to main content
Nintex Community Menu Bar
Question

Change the bottom border color of buttons


Forum|alt.badge.img+10

I have been trying to change the bottom border color of buttons with no success. It is the green (#0097a7) color that shows on the bottom of some active and inactive buttons. I have inspected the element in chrome and changed the class in my css but that pesky green stays. I would love to banish that green from every where! I have tried all different types of combinations but nothing changes the color once it is my css style sheet. Thank you!

This is the green I am trying to get rid of this. 
dd8d030c33ce9eb435be6df022508603320d0bbb.jpg

Here is the css for the default button:
.ui-widget-content .ui-button.ui-state-default {    border-bottom-color: #f2f2;
}

Here is the css for the active button:
.ui-button .ui-state-hover .ui-state-active { color: #0087B8;
}

Did this topic help you find an answer to your question?

Forum|alt.badge.img+18

Tami,

Try adding this to your css…

.ui-button {
 border: 0;
}


Forum|alt.badge.img+10

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?



Forum|alt.badge.img+8

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.


Forum|alt.badge.img+10

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!


Forum|alt.badge.img+8

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!


Forum|alt.badge.img+10

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.


Forum|alt.badge.img+17
  • Nintex Employee
  • July 9, 2024

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. 



Forum|alt.badge.img+10

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

Thank you!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings