How Do I Remove Hyperlink Formatting?

[ICT]

So I am working on adding hyperlinks to my footer but the theme formatting keeps changing the hyperlinks so they are blue and then turn black when highlighted. This is an issue because I have hyperlinks on my website that I would like to use this formatting. But by default all hyperlinks on my website use this formatting.

I would like to remove the colour formatting from the hyperlinks in my footer, I understand this can be done through a CSS tweak.

Any help would be appreciated.

Screenshots example of the formatting I would like to remove

Normal:

Hover:

[PaulMathews]

To modify the site's link/link hover colors, in the Site Editor, click on Theme then click on "Change Fonts" in the left-hand sidebar then click "Links" in the left-hand sidebar then modify the Link Color and Hover Color.

To modify the color behavior of a footer link, you'll need to add some custom css along the lines of:

footer a, footer a:visited, footer a:active {

color:blue;

}

footer a:hover {

color:black;

}

You can of course add attributes beyond just color but these are the key css elements.

[ICT]

@PaulMathews 

Thanks for the CSS code, unfortunately this didn't work as my footer isn't recognised as an actual footer since I added it manually. I tried to add the code you provided to the websites footer code to no success.

This is the CSS code for my "footer":

#multicolumnfooter{
color:#ffffff; /* Color of text*/
font-size: 15px;
text-align: center;
padding: 10px 0px 10px 0px;
margin: 10px;
overflow-x: hidden;
overflow-y: hidden;
}

So I was wondering if there was some code that I could add to this to add custom hyperlink colours for standard and hover, I'm not able to override the sites hyperlink formatting using the "color:#ffffff" code for some reason. 

Would you know of any CSS code I could add to my "footer" that would be able to do this?

Thanks again for the help.

[PaulMathews · Accepted solution]

I'm not sure what you mean by a "custom footer" but it can be useful to have several types of hyperlink behavior on the same site. For example, the default blue/black color scheme may be fine for the page body area of most site pages. You may, however, decide to add a section with a background color or image that will make the default link color hard to see. In that case, it's handy to have another hyperlink css class that you can reference to change the color behavior of a hyperlink. The caveat is that, in order to apply the special hyperlink css class, you'll have to place the link text and all the adjacent paragraph text within a Code Element. Not a big problem but just be aware that it's a bit more work than simply highlighting a string of text in a Text Element and adding the link attributes.

That being said, here's how you do it:

1. In the Site Editor, click on Theme then click the "Edit HTML/CSS" button in the left-hand sidebar to go to the Code Editor.
2. In your site css (under the "Styles" header, usually the main.less file), add a new anchor tag class to describe your special link behavior. You'll usually want to add this below the css code that describes the default link behavior (so that your links will inherit any other standard link behavior outside of colors). Remember to hit the Save button in the Code Editor before you return to the Site Editor. CSS hyperlink code example is shown below:

/* Special hyperlink - default color is red, hover color is green */

a.special, a.special:visited {

color: red;

}

a.special:hover {

color: green;

}

Now, to implement the class anywhere you'd like on a site page, drag and drop a Code Element on to the page and add the following code (in this example, only the "click here" text is hyperlinked):

<p>
To visit the CNN website, <a class="special" href="https://www.cnn.com/" target="_blank">click here</a>.
</p>

[ICT]

@PaulMathews 

After using your solution, it finally worked!

I also added the additional attributes to my "special" anchor,

In case anyone else wants to use them:

text-decoration: underline;
font-size: 13px;
font-family: 'Muli', sans-serif;