The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Simple Social Icons
[resolved] CSS Settings (Icon Color, Size and Radius) Not Working - ANSWER (4 posts)

  1. Karena Kreger
    Posted 2 years ago #

    Ok Boys and Girls, I wrote a nice detailed support post asking why all my CSS settings were being ignored. Just before posting it I tried ONE more thing and wouldn't you know, I figured it out. But I see this as a bug and I'm sure others have run into it so I thought I'd still share.

    ISSUE: I had a widget in my primary sidebar and another one in my footer sidebar. But when I changed formatting for the primary, it never showed on the page, it always used the other widget's settings.

    MY DIAGNOSIS: When you use more than one widget, the last widget on the page settings are used for all the widgets. The CSS printed out is not unique to the widget but uses the same selectors for all widgets with this plugin. This effectively overwrites the first settings.

    SUGGESTION: Can a unique identifier be tagged onto the classes and selectors being used so we can control multiple widgets independently? Seems like that would be an easy fix to me. Perhaps in a future release?


  2. Ron Rennick
    MultiSite Guru
    Plugin Author

    Posted 2 years ago #

    Can a unique identifier be tagged onto the classes and selectors being used so we can control multiple widgets independently?

    That is technically possible but it would make the plugin far more complex than it currently is.

    The way you style two of the widgets is to add the CSS for one of the widgets to your theme CSS using a more specific selector.

  3. Karena Kreger
    Posted 2 years ago #

    Thank you for your reply. Of course that would be a possible work around but IMHO not a very elegant one. The beauty of this plugin is the visual control right in the widget dashboard, keeping the customer out of the code for any future tweaks In any case for this project I just deleted one of them.

    Thanks again for your reply.

  4. guiniveretoo
    Posted 2 years ago #

    Hi Ron!

    Just wanted to let you know that I was running into this same problem recently and decided to do a little hacking to see if I could make multiple widgets work. I ended up modifying the code in the css function, this is what I came up with:

    function css() {
    	/** Pull widget settings, merge with defaults */
    	$all_instances = $this->get_settings();
    	if ( empty($all_instances) ) {
    	/** The CSS to output */
    	$css = '';
    	foreach ( $all_instances as $key => $instance_settings ) {
    		$instance = wp_parse_args( $instance_settings, $this->defaults );
    		$font_size = round( (int) $instance['size'] / 2 );
    		$icon_padding = round ( (int) $font_size / 2 );
    		$css .= "
    			#simple-social-icons-$key ul li a,
    			#simple-social-icons-$key ul li a:hover {
    				background-color: {$instance['background_color']} !important;
    				border-radius: {$instance['border_radius']}px;
    				color: {$instance['icon_color']} !important;
    				font-size: {$font_size}px;
    				padding: {$icon_padding}px;
    			#simple-social-icons-$key ul li a:hover {
    				background-color: {$instance['background_color_hover']} !important;
    				color: {$instance['icon_color_hover']} !important;
    	/** Minify a bit */
    	$css = str_replace( "\t", '', $css );
    	$css = str_replace( array( "\n", "\r" ), ' ', $css );
    	/** Echo the CSS */
    	echo '<style type="text/css" media="screen">' . $css . '</style>';

    I don't know if this clashes with your goal of having a super-simple plugin, but it's working pretty well for me.


Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Simple Social Icons
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.