Remove or Override Plugin CSS with !Important

Often when you install a plugin, you want to give it a style that matches or coordinates with your WordPress theme. Sometimes this is easy to do. But sometimes a plugin will use !important in it’s stylesheet. Then editing the CSS can become more difficult.

I was recently working with Simple Social Icons, and I wanted to put a circular border around the icons. It didn’t work the way I first expected.

When the plugin !important keeps you from adding your styles, there are several things that you can do to solve the problem.

• You could totally remove the plugin stylesheet (Use wp_dequeue_style), and then restyle the plugin to add only the styles you want.
• If you use a Genesis child theme, you could add Genesis Style Trump plugin to reorder the loading of the stylesheets, and that could help.
• You can also use a more specific selector which is what this tutorial does.

In this tutorial we’re going to create some 32px, round, blue (#046ca1) social icons with a 2px blue boreder, that hover to green (#77a13b) border and icon color, like the image above.

Edit the Widget

The Simple Social Icons plugin is great because there are built-in styling options for background color and icon color for normal and hover states. You can also easily change the icon size and the border-radius. You can read more about using Simple Social Icons.

Go to your WordPress Admin, and click on Appearance > Widgets. Then find Simple Social Icons; mine is in the sidebar of the Genesis Sample child theme. In this case I left the default settings. Since you’ll be editing the settings, it’s just as easy to keep all the styles in one place.

View Simple Social Icons CSS

If you use the Chrome browser, you can use Chrome Developer Tools to view the CSS. Right-click on the social widget in your website page, and then select “Inspect Element”. Then you will see this CSS.

The top section has the styles that can be added to the plugin when you are editing the widget, and the bottom section is added by the plugin stylesheet.

Add a Border

You can start by adding a border around the icons in your child theme style.css. It looks like adding this should override the “border: none !important;”, but it didn’t. There was no border.

.simple-social-icons ul li a {
	border: 1px solid #046ca1 !important;
}

.simple-social-icons ul li a:hover {
	border: 1px solid #77a13b !important;
}

Use a More Specific Selector

So this time look at the HTML side of Chrome Dev Tools.

You see that

<section class="simple-social-icons">

is contained in the

<aside class="sidebar">

So let’s try adding the following to our stylesheet:

.sidebar .simple-social-icons ul li a {
	border: 1px solid #046ca1 !important;
}

.sidebar .simple-social-icons ul li a:hover {
	border: 1px solid #77a13b !important;
}

If you’re adding the social widget to your header right widget, instead of to the sidebar, you could use

.site-header .simple-social-icons ul li a {
	border: 1px solid #046ca1 !important;
}

.site-header .simple-social-icons ul li a:hover {
	border: 1px solid #77a13b !important;
}

Widget Values for the Blue, Round Icons

If you want only a 1px border on your icons, you can just add these values to the social widget for the blue, round icons.

• Icon Size: 32px
• Icon Border Radius: 16px
• Alignment: Your choice
• Icon Font Color: #046ca1
• Icon Font Hover Color: #77a13b
• Background Color: #fff
• Background Hover Color: #fff

Social Icons with a 2px Border

But if you want a 2px border, like I did, your icons will be squashed, and not round, using only the widget values, so more styles are needed.

This is the CSS to add to your style.css.

/* Simple Social Icons
---------------------------------- */
.sidebar .simple-social-icons ul li a {
	background-color: #fff !important;
	border: 2px solid #046ca1 !important;
	border-radius: 16px !important;
	color: #046ca1 !important;
	font-size: 16px !important;
	padding: 7px;
}

.sidebar .simple-social-icons ul li a:hover {
	background-color: #fff !important;
	border: 2px solid #77a13b !important;
	color: #77a13b !important;
        padding: 7px;
}

This CSS is to duplicate the widget values above, with a 2px border and the padding changed from 8px to 7px.
The border radius (16px) should be half the desired icon size (32px). You can add a background of white (#fff), and a blue (#046ca1) for the icon color. The plugin adds a padding that is one-fourth of the icon size (8px), but we need to change the padding to 7px to keep the icons round when the border is 2px wide.
Then we add some green (#77a13b) hover styles.

Using a more specific selector when you are unable to override plugin values will work for other plugins, as well.

Note that if you search, you can find a lot of discussion about the best practices for CSS in plugins, and whether or not !important should be used in the CSS in a plugin or your stylesheet. But if you are using a plugin with !important, this is one method to use to add your own styles.