Skip to main content
Nintex Community Menu Bar
Question

Change link color

  • Jul 10, 2024 12:30 AM UTC
  • 4 replies
  • 58 views
  • Translate All

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

4 replies

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
  • Author
  • Jul 10, 2024 1:22 AM UTC

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
  • Nintex Partner
  • Jul 10, 2024 1:22 AM UTC

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