1

One of the librarians would like a specific page to show blue hyperlinks. I’m happy to have the whole website show hyperlinks as blue, if that’s easiest. Something somewhere in my website is overriding my ability to change their color from black. I have tried changing their color by editing the page in Elementor and going to “site settings” and “typography” where there are some great options for changing link color and font as well as hover color and font. When I change the link color, nothing changes – except for in the little preview part of the Elementor editor. The actual website page remains the same. When I change the hover to “bold”, only links that lead outside of the website become bold when hovering; none of the internal links change when hovering.

Our theme is custom, and basically changes nothing stylistically from defaults. I also tried disabling default colors and fonts in Elementor settings, making a custom HTML tag just for the links that specifies link color as blue (links are still black, even with this!!) and editing the CSS of our theme to force the links to be blue (nothing!!). I am not sure what else to try – obviously something is overriding all of my attempts, making my links black and underlined, but I’m not sure where or what.

Thanks for any assistance!!

4 Spice ups
2

I’m not familiar with WordPress, but I can give you a couple suggestions…

Make sure you’re saving your work so it will apply to when you try it.

Make sure there isn’t a dark mode extension from the google chrome store making it black (They can be weird)

You may have already tried this, but I found a tutorial on changing the color on wordpress here

Sorry if none of this works… Good Luck

3

@user2679 ​ Do you have a website url and page for us to look at the issue?

Hierarchy of CSS.

  1. Order of precedence: .class {color: black} .class {color: white} class color will be white as it precedes the other classes.

  2. Stylesheet: This and inline style tag follows the order of precedence rule.

  3. Inline style tag .class {color: green} The class color is now green because it is after stylesheet.

  4. Inline style html property:

    I am green

    Color is orange because inline style html property overrides all.

Let’s not forget the css !important rule which trumps almost everything.

1 Spice up
4

This is super helpful, thanks! I’m no CSS expert. I will look through it and report back!

5

Here is a link to the page with the issue:

6

@user2679 Under appearance > customize > additional css you can put the code below. As long as the page id remains the same this should work.

.page-id-3381 .elementor a {
    color: blue;
}
7

I don’t have access to additional CSS because we don’t have Elementor Pro at our little library. Not worth it just to change the link color, so if it comes to that, I’ll just leave it black :slight_smile:

8

@user2679 ​ That shouldn’t be locked out. That is terrible if it is. You can always find a plugin to add css…

1 Spice up
9

You can do it from Site Settings. Just edit any page, click on the hamburger menu at the top left corner and there you will see Site Settings.