Skip to main content
Nintex Community Menu Bar
Question

Change link color

  • July 10, 2024
  • 4 replies
  • 10 views
  • Translate

Forum|alt.badge.img+5

Inspecting the element I see the following and want to add custom CSS to change the color of the link from #7ddaf0 to #000000. Having a real brain cramp here as I have tried a number of modifications and still get the same color. Any assistance would be appreciated.

.nx-page a,#skuidEditBtnContainer a, .ui-dialog a, .blockMsg a, .ui-multiselect-menu a, .nx-page .nx-editor a,#skuidEditBtnContainer .nx-editor a, .ui-dialog .nx-editor a, .blockMsg .nx-editor a, .ui-multiselect-menu .nx-editor a { 
color: #7dd1f0;
text-decoration: ;
}

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

Forum|alt.badge.img+8

Is this just one specific link or all links in all cases?

If you want to change it universally, you can just use that exact same selector, but change the color to #000000

.nx-page a,#skuidEditBtnContainer a, .ui-dialog a, .blockMsg a, .ui-multiselect-menu a, .nx-page .nx-editor a,#skuidEditBtnContainer .nx-editor a, .ui-dialog .nx-editor a, .blockMsg .nx-editor a, .ui-multiselect-menu .nx-editor a { 
color: #000000;
text-decoration: ;
}


Translate

Forum|alt.badge.img+5

Thanks for the reply and that was it, simple enough. On a similar topic, I have the following code that changes the color of the Save Button to 277BDA:
.ui-button, .ui-widget-content .ui-button.ui-state-default { 
background: #277BDA;
  font-weight: 400;
  color: #fff;
  border: 0;
  -webkit-border-radius: 25;
  -moz-border-radius: 25;
  border-radius: 25;
}

Now, to also change the background color of the button when hovering over it I can’t seem to get it to work as the code when I inspect looks to be the same .ui-button, .ui-widget-content .ui-button.ui-state-default

So when hovering I would like the background to change to 000000

Thanks in advance

Translate

Forum|alt.badge.img+11

Did you try adding the :hover CSS selector?

http://www.w3schools.com/cssref/sel_hover.asp

Translate

Forum|alt.badge.img+5
  • July 10, 2024

since a new class will be added to the component instead using the :hover selector you can change the hover style using the following:

&#46;ui-button, &#46;ui-widget-content &#46;ui-button&#46;ui-state-default<b>&#46;ui-state-hover</b> {&nbsp;&nbsp;<br />&nbsp; background: #000000;<br />}


for :active simply use .ui-state-active

Translate

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