CSS modification
-
Hey –
I’m trying to override the link color. I have had success with the :visited and :hover options but I’d like to change just the a value:
/*fails to change color*/ a { color: #5C3B58; } /* changes color for mouse over link */ a:hover { color: #5C3B58; } /* changes color for selected link */ a:active { color: #5C3B58; }I can see that another a style is inherited from an index document.
Is anyone familiar with editing this?
Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there – I see that you have span tags wrapped around some of your links right now, so your custom CSS won’t be applied. That “inline” CSS that’s closer to the element will always take precedence.
The first step to correct this is to flip to the HTML editor and remove the span tags inside your anchor elements. So for example, this:
<a title="Academic Enrichment Grants" href="https://mccartheydressman.org/academic-enrichment-grants/" target="_blank" rel="noopener"><span style="color:#5c3b58;"><strong>ACADEMIC ENRICHMENT GRANTS</strong></span></a><span style="color:#5c3b58;"><strong>ACADEMIC ENRICHMENT GRANTS</strong></span> </a>would become:
<a title="Academic Enrichment Grants" href="https://mccartheydressman.org/academic-enrichment-grants/" target="_blank" rel="noopener"><strong>ACADEMIC ENRICHMENT GRANTS</strong></a>Once you make those changes, the custom CSS you added should work to change the link colour within posts and pages. I can see that your custom CSS is already working on some of your links within posts and pages:
a { color: #369; text-decoration: none; }To change the link colours elsewhere (i.e. in widgets) you’ll need some CSS that gets more specific to target other elements. If you need help with that, just let me know where you’d like to change the colour, and I’ll be glad to lend a hand.
- The topic ‘CSS modification’ is closed to new replies.