Changing color of all teal fonts

I’m struggling through making change to the teal (#1FA0AE) fonts in Fashionista. Having a background with accessibility, the color doesn’t provide enough contrast with even the white background. I’ve tried a few methods, including Theme Tweaker and attempting to replace the color code in the theme code. I’m not a CSS expert, so this has met with mixed results.

I also went through the customization settings, but failed to find a control that would change the color. Can anyone explain the best method for making this work? I love the theme, but really need to change that font color.

Thanks

Hi,

Please share your site URL here and tell me which part that you want to modify.

Regards,
Awan

Thanks, Awan. It’s at: https://dmweade.com/welcome/

Simply, anything that is that light blue/teal color has to go. So the Home link and the cloud terms and “Continue reading” and perhaps the text in the Twitter feed, though I’m not certain if that comes from the theme or from the plugin (I’ll test, but mentioning just in case).

Much appreciated,
Daryl

Hi Daryl,

Add this CSS code to customize > additional CSS to change the blue color:

a, #main-navigation li.current_page_item > a, 
#main-navigation li.current-menu-item > a{
    color: #333;
}

And this to change the link color when it’s hovered:

a:hover, .entry-title a:hover, .widget li a:hover {
    color: #333;
}

Awan, thanks for the quick reply. Finally had time to put in the code and it is not working for me. I’ve tried it three ways with color coding (#333, as you had it; #008000, the color I want; and #333333, the version of green). I’ve tested it in the customizer and in two browsers after clearing cache both for the browsers and the site.

Thoughts?

This is the code currently in my customizer:

/* Hide top menu */
#top-navigation { display: none; }

.entry-thumbnail img { margin: 0 auto }

/* Change teal colors */
a, #main-navigation li.current_page_item > a,
#main-navigation li.current-menu-item > a{
color: #333333;
}

/* Change color of rollovers */
a:hover, .entry-title a:hover, .widget li a:hover {
color: #333333;
}

try this please:

nav#main-navigation.main-navigation li.current_page_item > a, nav#main-navigation.main-navigation li.current-menu-item > a, nav#main-navigation.main-navigation li a:hover, a, a:hover, a:visited, .tagcloud a, a.more-link, .ctf-tweets a, .widget li a:hover {
    color: gold;
}

Thanks, Awan. This code got the job started. How can I add in the rollover links? And I notice a few other elements are still teal.

Much appreciated

Edit: While testing on different platforms, I’m noticing the teal remains in place for my name on the Twitter widget and when I roll over post titles and sidebar links. But on my iPhone, all of the links have turned dark green as I’m attempting to make it work.

I thought at first it might be a caching issue with my browser, but I’ve emptied that and nothing has changed. I have also cleared the caches in Wordpress.

Hi,

I noticed you are using Jetpack-CSS plugin, can you try to disable it and let see if my code is working.

I disabled Jetpack and cleared the cache both in Wordpress and two browsers, but there was no change. Still looks right on my iPhone and iPad, but the teal is still showing up in all of my desktop browsers. It really is an odd thing.

If you don’t mind, may I check it directly to your site? Please create a temporary login account to your website and send it as PM to my account here.