Skip to main content

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

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



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


Did you try adding the :hover CSS selector?

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


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


Reply