Simple Social Icons
Using !important in css (7 posts)

  1. Webtaurus
    Posted 3 years ago #

    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;


  2. bgardner
    Plugin Contributor

    Posted 3 years ago #

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

  3. Andrew Munro (sumobi)
    Posted 3 years ago #

    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');

  4. Ron Rennick
    MultiSite Guru
    Plugin Author

    Posted 3 years ago #

    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.

  5. Andrew Munro (sumobi)
    Posted 3 years ago #

    Great, thanks for that Ron

  6. blogjunkie
    Posted 3 years ago #

    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

  7. Webtaurus
    Posted 3 years ago #

    @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

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