All social icons randomly turned red

Last week all the social icons on the site suddenly turned red. No matter what color I set for the styles, the logos are red. I didn’t make any changes to the css that would have caused this and can’t seem to undo it.

HI There,

You can edit the color of the social icon in if you haven’t tried it yet. Pro > Launch > Headers > Edit

View the Social Icon

Edit the colors here

Hope this helps.

If nothing works, please provide us the site URL and login credentials in a secure note so we can take a closer look.

Thanks

Yes, I’ve already done that, to no avail.

Hi again,

Thanks for writing around! I checked your setup, you’ve set the site links color to red (see screenshot)

Please navigate to Appearance > Customize > Typography > SITE LINKS and change the color of your choice.

Hope this helps!

Thanks. But that’s always been a setting, and that is the color I want the text links to be. It didn’t impact social icons until recently. The social icons were white on a blue background. Obviously I don’t want the text links on my site to be white. Why would anyone want their social icons to be inseparable from text links? Surely there must be a way to set them each.

And why are there settings in Pro to change not only the background color but the icon color, if those settings don’t change anything?

Hey Kate,

I see the background and icon color does not work in your site. It could be that a third party plugin is affecting its functionality. Please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Regarding the red icons, can you give us a specific URL where this happens? I checked all your pages and I couldn’t see a red icon.

Thanks.

haha. I updated them in the last few minutes but I had to change the color of all site links to do so. Those blue icons were red until an hour ago. I just couldn’t leave them red while trying to figure out the problem.

I tested it on the staging site and it does not seem to be a plugin conflict

Hello There,

You will have any issue if you are using the correct element. Instead of using a button element to display facebook and youtube, please use the Social element instead.

Button elements are used for buttons and if you want to display a social icon. the social element is the appropriate element to use in your case to have a full control over the icons.

Hope this helps.

Thank you, but that doesn’t help. I am already using the social element. The only thing I’m using the button element for is the Donate button. I even tried building a new header and adding social elements again.

Hi There,

Please address the missing closing bracket on that block of custom CSS below. That is on your Theme Options > CSS

@media (min-width: 980px) {
.overlap {
	max-width: 78%;
	margin: -100px auto 0 !important;
 }
	.single-post .entry-featured {
	display:none;
}

Also check your header and footer CSS area, there might also be a syntax error there that causing this issue.

Cheers,

I closed that tag, and then removed all the custom CSS (at least from that area) to see what would happen. Nothing. Still no icon control. I added new social icons and removed the old to see what would happen. Again, nothing.

Hi There,

I was investigating the issue, but I cease it because it seems someone is working on the site (hide the icon that I added)

But here’s what I found, I think this issue is just a side effect of another issue/s.

I read above that you already did a plugin conflict test on staging site, but would you mind doing that in live site? Deactivating all plugins and Flushing the Godaddy cache. And see if that resolves the issue.

And please delete the X and Cornerstone, since you’re using PRO.

And how did you migrate the site? I view-source your live site and still can see a lot of reference/URL to your staging site.

If the issue persist, please duplicate the current live site to another staging site (or on your current staging site), and provide us login credentials in a secure note including FTP, so we can take a closer look.

Thanks,

Hi, yes sorry I did hide the icon you added because it was appearing on the live site. I can try to give you credentials to the staging site if you’d like to experiment there.

I migrated it through godaddy’s staging site sync process, but there were major problems with the migration and godaddy had to do much of it manually, so maybe that’s why you’re seeing references to the staging site (although there shouldn’t be any live links to it, just like… page author references as far as I know).

I would prefer not to deactivate all plugins on the live site… at least not right now since we’re intentionally driving traffic there for a promotion and need the plugins. Maybe I’ll have to table this til a more convenient time if that’s necessary.

Also, I’ve deleted Cornerstone multiple times and using multiple methods (through the WP interface and through FTP). I have no idea why it keeps reappearing.

Hi there,

The fact that you uninstall the Cornerstone and it comes back shows that the migration did not go well and there must be a problem of some kind that unfortunately we can not detect.

Please try to manually migrate website from the staging to live server as mentioned below:

https://codex.wordpress.org/Moving_WordPress

Anyway please give us the staging website information and keep the state where the original question was, social icons being red, so we can investigate without the fear of ruining the live website.

Thank you.

sorry for the late reply. had some other emergency issues to attend to. The staging site login info is included here:

Hi there,

When header builder is active, the one in Theme Options > Header should be inactive. The styling being applied there is not from header builder, but from the original header which is set from Theme Options > Header. You probably assign a global header before which overrides the original header. And now that there is no global header, it’s back to original header. Please try assign a global header once.

Thanks!

Thanks! That is helpful, but it doesn’t seem to have entirely solved the problem, since it’s the site links that are setting the icon color, not the header. Is there a way to keep the site links in Theme Options from overriding the header settings?

Hey Kate,

The staging credentials does not work anymore (see Secure Note). Please give us the updated credentials.

To your question:

This should not happen. I followed your setup in my test site and this does not happen. We need to find out why this happens in your site.

Thanks.