Custom CSS to change global link colours

Hi Wendy!

The selector that targets links in your page content and applies your palette colors to them starts with the palette-primary class that is applied to the body element and you should be able to repurpose that selector to make the necessary color adjustments. Here is the snippet you can use to get started changing the global color setting for your links:

.palette-primary a {
    color: #888888;
}

You can also add the !important designation after the color hex to ensure that all of the link colors are changed, but the selector used in that snippet should be using the proper hierarchy so that won’t be necessary.

Hopefully that code works as expected for you and please let us know if there is anything else that we can do to help!

Hi Wendy!

The social media icons are handled with the Font Awesome icon library and the color assignment on them is applied to the icon itself instead of the link tag like everything else. We can add another selector to the previous rule to make sure the color changes work on the social media icons.

.palette-primary a,
.palette-primary a .fa {
    color: #888888 !important;
}

Hi Wendy-

That code should have changed your button text color as well. If you’re after the border and hover background color, here’s how you can do those.

.palette-primary .button-primary {
	border: 1px solid #bbbbbb;
}
.palette-primary .button-primary:hover {
	background-color: #bbbbbb;
	border: 1px solid #bbbbbb;
}

• This reply was modified 4 years, 1 month ago by Jesse Owens. Reason: fix code typo