1

So I know the question is going to sound really weird as to why I want to do this, so here is a quick synopsis:

I am working with wordpress, writing my own child theme. There is some style sheet that has changed all of the <a></a> tags to be white, to blend into the background... which is also white. I don't know why its like this, which style sheet is doing it (*Edit: it is a Divi style sheet), or what plugin is doing it for that matter. To me I don't really care about answering those questions. In the end, all I need to know is -

"How do I remove that style placed on all <a></a>, that have varying colors, :hover, :active, etc."?

An extra note is that I do have access to the developer console, which means I can see every class, element, id, etc, that is having the attribute color: white; being applied to it, if that is helpful at all.

I am willing to take a wordpress, css, or even javascript answer. If any of that is possible.

Shmack
  • 1,933
  • 2
  • 18
  • 23
  • The only way to remove it *is* to find out what is adding it. Otherwise you will have to add new styles for all you `a` tags (which is more work than it sounds because you won't want the same styles in every case, e.g. nav menu, link buttons and footer links will not be the same as standard text, you will probably need to add different rules with different specificities etc). And its really not that hard to find out which stylesheet is doing it... the element inspector will tell you exactly which style(s) from which styleheet(s) are being applied. – FluffyKitten Oct 02 '20 at 03:50
  • Yes, I didn't believe you, but I found it. And you are absolutely correct on the rest. The problem is that (come to find out) that its a plugin that is heavily supported and will likely continue to be updated. So it worries me that upon an update, it will push an older .css file over, overwriting the changes I made. Which isn't a huge deal, but its annoying. If there is some css property that would negate those changes, that'd be dope. – Shmack Oct 02 '20 at 04:06
  • What is the plugin that's changing all the links to white? That really is a bizarre behaviour, I'd have to guess that there is something else going on too, e.g. is it set up for a dark background, or some clash with another plugin? To prevent the CSS being overwritten you would need to override all the plugin's CSS rules for the `a`, but without seeing the CSS (or knowing the plugin) we can't really advise the best way to do this. Can you tell us what the plugin is, so if anyone is familiar with it they might have a quick answer? – FluffyKitten Oct 02 '20 at 04:11
  • Divi visual editor. Theoretically, if I could change the order the style sheets are loaded, I could change all the problems I have, right? But it'd have to be before the page is loaded, in the case of the stylesheets. – Shmack Oct 02 '20 at 04:19
  • 1
    I know if it but I've never used it. However it is very popular so there must be something going wrong for it to have this effect. People often miss information in the comments so you should edit the question to include the plugin name... I'd also suggest you edit the title to describe the issue so that it will get the attention of people who might be able to help. I'd also suggest asking on [wordpress.stackexchange.com](https://wordpress.stackexchange.com) as someone there might be able to help also. – FluffyKitten Oct 02 '20 at 04:25
  • Just thinking of a way around this... does your own stylesheet for your child theme includes the CSS you want for the links, but they are getting overridden by the Divi stylesheet? – FluffyKitten Oct 02 '20 at 04:38
  • No, I haven't written any code to handle the links. I just noticed that the links weren't displaying... because they were camouflaged. – Shmack Oct 02 '20 at 04:44
  • OK, in that case it won't make a difference what order the stylesheets are loaded in, because Divi is the only one applying styles to the links. – FluffyKitten Oct 02 '20 at 04:46
  • Well, so... maybe I should've added this as well... Its a woocommerce product page with Divi used as the theme. So the woocommerce styles (from what I can tell) applied to the links are being overwritten. – Shmack Oct 02 '20 at 04:48

1 Answers1

0

Get the links whose color you need to change and then for each of them do:

element.style.color = "#000";

For :hover see https://stackoverflow.com/a/11371562/1371131.

Dennis Hackethal
  • 13,662
  • 12
  • 66
  • 115
  • While I appreciate the answer, its not what I'm going for. Sorry, if I made the question a little vague in that regard. What I am trying to accomplish is that since there are a lot of elements being referenced in the css file that is changing all the `` tags styles that are having their intended styles overwritten that were placed on by other style sheets (which is more of an assumption), I want to negate that with javascript / css. – Shmack Oct 02 '20 at 04:20
  • Ah, I see. In that case, I'm not sure there is any way of getting around removing that stylesheet altogether. I mean, you could put `!important` in the stylesheets you want to take precedence, but that's gross. Chrome's developer tools can tell you what stylesheets certain style rules originate from, so hopefully you can identify the stylesheet and then modify it or remove it as necessary. – Dennis Hackethal Oct 02 '20 at 04:24
  • Yah, I noticed that with FF too. I think the easiest temporary solution is to find the file, and overwrite it. The problem is that I don't want to have deal with changing the file every time it is updated. Not sure if it is customary to do so, but I will leave an upvote on your answer for your help. – Shmack Oct 02 '20 at 04:29