Invalid css output on transparent background

[NormanHoehne]

If one is using icons with a transparent background, the inline CSS output for the icons hover state will be like this: #simple-social-icons-3 ul li a,#simple-social-icons-3 ul li a:hover{background-color:;border-radius:36px;color:#fff;border:0 #fff solid;font-size:18px;padding:9px}#simple-social-icons-3 ul li a:hover{background-color:;border-color:#fff;color:#f60}

which contains invalid empty background-color declarations.

Tested Version: Simple Social Icons 3.0.0

[nickcernis]

@NormanHoehne I can't reproduce this so far. Is this an existing widget or a new one?

I see this inline markup when setting a background color as empty (pretty-printed for clarity):

#simple-social-icons-2 ul li a,
#simple-social-icons-2 ul li a:hover,
#simple-social-icons-2 ul li a:focus {
    background-color: transparent !important;
    border-radius: 3px;
    color: #1e73be !important;
    border: 0px #ffffff solid !important;
    font-size: 20px;
    padding: 10px;
}

#simple-social-icons-2 ul li a:hover,
#simple-social-icons-2 ul li a:focus {
    background-color: #eeee22 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

#simple-social-icons-2 ul li a:focus {
    outline: 1px dotted #eeee22 !important;
}

The background value appears to be correctly set as empty here: https://github.com/studiopress/simple-social-icons/blob/a9105323026d27b249b780ede7f79e4ca0c85da5/simple-social-icons.php#L403

Which outputs transparent here: https://github.com/studiopress/simple-social-icons/blob/a9105323026d27b249b780ede7f79e4ca0c85da5/simple-social-icons.php#L514

[dreamwhisper]

I'm also not able to reproduce this so far.

[NormanHoehne]

Hey @nickcernis, thanks for the reply.

Well that's very weird. I've just double checked it with a new Simple Social Icons Widget and it is still not working. The prettified markup now looks like this:

<style type="text/css" media="screen">
#simple-social-icons-3 ul li a,
#simple-social-icons-3 ul li a:hover {
    background-color: ;
    border-radius: 36px;
    color: #fff;
    border: 0 #fff solid;
    font-size: 18px;
    padding: 9px
}

#simple-social-icons-3 ul li a:hover {
    background-color: ;
    border-color: #fff;
    color: #f60
}
</style>
<style type="text/css" media="screen">
#simple-social-icons-4 ul li a,
#simple-social-icons-4 ul li a:hover {
    background-color: ;
    border-radius: 36px;
    color: #fff;
    border: 0 #fff solid;
    font-size: 18px;
    padding: 9px
}

#simple-social-icons-4 ul li a:hover {
    background-color: ;
    border-color: #fff;
    color: #f60
}
</style>

When I create a new Simple Social Media Icons Widget it has a default value for background color. Then I'll click onto background color and erase all digits and the hash out of it. Now it looks like this:

What's interesting now is, that the widget does not recognize any change so I can't save it until I placed in another hex code. I am testing it on Chrome Browser.

[nickcernis]

Thanks for these extra notes, @NormanHoehne. A few things to check:

1. Are you running PHP 5.3 or later? If you're using an earlier version, that could produce the result you report because only PHP 5.3+ supports the “Elvis operator” used here: https://github.com/studiopress/simple-social-icons/blob/a9105323026d27b249b780ede7f79e4ca0c85da5/simple-social-icons.php#L514 You should consider updating if using an earlier version of PHP.

2. It's strange that the CSS you shared doesn't include the a:focus state: https://github.com/studiopress/simple-social-icons/blob/a9105323026d27b249b780ede7f79e4ca0c85da5/simple-social-icons.php#L523 It would be worth double-checking that the latest version of the plugin is in use, and that code is part of the simple-social-icons.php file.

3. You could try setting a background color, saving, then clearing the background color and re-saving. (I've checked that all's working with locale set to German — I am able to clear the background color value and re-save the widget.)

[NormanHoehne]

Hey @nickcernis,

I'm using PHP 7.2 on all my machines. I've just checked the version as well as the source code. Version is 3.0.0 and the source code looks like it should compared to your snippets:

I already changed the colors to test the issue and just did that again to revalidate and nothing has changed so far. I still have the invalid output, and in backend changes of the hex code within the widget is not always recognized to be able to save the widget. Developers Console does not throw any Javascript Errors.

But I just found out, that the css is rendered second times into DOM; one that is the expected valid output and one that is invalid:

Webpage is the following: https://www.fitnesswarrior.de/

[nickcernis]

Thanks for this update and for the link to your site, @NormanHoehne — that's been very helpful!

The output of those extra inline styles is specific to the Business Pro theme. The theme has a function named business_simple_social_icons_css() in themes/business-pro-theme/includes/extras.php that is outputting code with the missing background-color value under Simple Social Icons 3.0.

You could edit that file and comment out this line:

add_action( 'wp_head', 'business_simple_social_icons_css' );

You should then only see the correctly formed CSS from the plugin.

That code was added to allow multiple widgets with different color settings, which is now no longer needed since Simple Social Icons 3.0.