Support » Plugin: Simple Social Icons » Using !important in css

  • Hi Nathan thanks for the nice update.

    I noticed you use !important quite a few times in the plugin css. That makes it a lot harder to override the css in the template css.
    So one ends up having to edit the plugin css. (which will result in having to correct after the next update)

    Why are these properties set to !important ?:

    .simple-social-icons ul li {
    	background: none !important;
    	border: none !important;
    	float: left;
    	list-style-type: none !important;
    	margin: 0 6px 12px;
    	padding: 0 !important;

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Contributor Brian Gardner


    We used important because we needed to override any styling that might be happening in containers such as #sidebar, etc.

    Nice update. Is it possible to allow developers to remove the action that generates the CSS so we can write our own if required? Eg this line in the plugin that builds out the CSS.

    add_action( 'wp_head', array( $this, 'css' ) );

    Normally I’d just the following, but because the plugin is wrapped in a class I probably need a bit more trickery:

    remove_action('wp_head', 'function_name');

    Plugin Author Ron Rennick


    MultiSite Guru

    The easy way to do it is make your own class that extends the Simple_Social_Icons_Widget that has your custom css function. Then unregister the Simple_Social_Icons_Widget and register your own.

    Great, thanks for that Ron

    Could you also add this:

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    text-shadow: 0 0 !important;
    Many themes (from StudioPress too) contain styles to make text have a little 3D effect. This causes the icons to look fuzzy. The above code fixes that. Thanks

    @blogjunkie Why don’t you just put your text-shadow code in your own css (childtheme) ?

    It’s bad practice to put overriding css code in a plugin, especially adding the important statement. The important makes it near impossible to override the css in the child-theme css.
    I don’t agree with the way Simple Social Icons does this now.

    It’s no drama, but its the first time ever that I had to change a plugin css (just took away 1 !important) instead of controlling all from style.css

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Using !important in css’ is closed to new replies.