Comments (6)
@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
from simple-social-icons.
I'm also not able to reproduce this so far.
from simple-social-icons.
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.
from simple-social-icons.
Thanks for these extra notes, @NormanHoehne. A few things to check:
-
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.
-
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. -
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.)
from simple-social-icons.
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/
from simple-social-icons.
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.
from simple-social-icons.
Related Issues (20)
- GitHub Icon is outdated HOT 1
- Add alt attribute to svg tag in HTML HOT 1
- Warning: sprintf(): Too few arguments in simple-social-icons.php on line 458 HOT 1
- Warning: sprintf(): Too few arguments in simple-social-icons.php on line 458
- Add TikTok to Default Settings HOT 14
- Add Patreon
- Add Mastodon and Bluesky HOT 1
- Add Flipboard
- Equal identifiers when widget is used multiple times on one page HOT 4
- Obfuscate email address when entered with mailto prefix
- Consider adding rel=noopener if links are opened in a new window HOT 2
- Multiple instances of the widget on the same page breaks styling HOT 2
- Limit transparent colors to icon background only HOT 7
- Add ability to set per widget area defaults HOT 3
- Consider dropping Google+ icon HOT 1
- CSS output is within body tags / Validation error
- Themes should be able to set SSI default styles via a config file
- Fix AMP validation error for svgxuse.js HOT 2
- Only enqueue scripts/styles if a widget is actually on the page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from simple-social-icons.