Genesis Tutorials, WP Tutorials
Simple Social Icons Color Style Saver Scripts
If you use Simple Social Icons widget at multiple widget areas on your site, it is always taking the last widget settings (Background color, font color, border color etc). I solved this problem today. I added the following scripts in functions.php file:
/**
* Add custom css in <head> tag
*
* @author Genesis Developer
* @license GPL-2.0+
* @link http://genesisdeveloper.me/
* @copyright Copyright ( c ) 2015, Genesis Developer.
*/
//* Add the following codes in your functions.php file
if ( class_exists( 'Simple_Social_Icons_Widget' ) ) {
add_action( 'wp_head', 'simple_social_icons_css' );
function simple_social_icons_css() {
$obj = new Simple_Social_Icons_Widget();
/** Pull widget settings */
$all_instances = $obj->get_settings();
foreach( $all_instances as $key => $options ) :
$instance = wp_parse_args( $all_instances[$key] );
$font_size = round( (int) $instance['size'] / 2 );
$icon_padding = round ( (int) $font_size / 2 );
/** The CSS to output */
$css = '#' .
$obj->id_base . '-' . $key .' ul li a,
#'. $obj->id_base . '-' . $key . ' ul li a:hover {
background-color: ' . $instance['background_color'] . ' !important;
border-radius: ' . $instance['border_radius'] . 'px;
color: ' . $instance['icon_color'] . ' !important;
border: ' . $instance['border_width'] . 'px ' . $instance['border_color'] . ' solid !important;
font-size: ' . $font_size . 'px;
padding: ' . $icon_padding . 'px;
}
#'. $obj->id_base . '-' . $key . ' ul li a:hover {
background-color: ' . $instance['background_color_hover'] . ' !important;
border-color: ' . $instance['border_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>';
endforeach;
}
}
