Change link color

  • 1
  • Question
  • Updated 3 years ago
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: ;
}
Photo of Ben

Ben

  • 780 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
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: ;
}
Photo of Ben

Ben

  • 780 Points 500 badge 2x thumb
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
Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb
since a new class will be added to the component instead using the :hover selector you can change the hover style using the following:

.ui-button, .ui-widget-content .ui-button.ui-state-default.ui-state-hover {  
  background: #000000;
}

for :active simply use .ui-state-active
(Edited)
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Did you try adding the :hover CSS selector?

http://www.w3schools.com/cssref/sel_hover.asp
(Edited)