How To Remove The Image Border In WordPress Widgets

For one of the most popular web page building platforms in existence, WordPress can get pretty frustrating with basic stuff. I guess most of that is due to its organic growth from a blogging platform, to a full-fledged design tool. Sometimes we need to fix basic stuff that you’d imagine would be its bread and butter.

Look at sidebar images for example. Let’s say you want to put a banner, or a profile picture in your sidebar. You start off by going to the widget section, and adding a new “Custom HTML” or “Image” widget like this:

But when you save it, here’s what it looks like in practice:

There’s almost always an inexplicable gap between the edge of the image, and the edge of the sidebar. It might not look too bad if your sidebar color is white, but if you’ve styled it differently, the image looks absolutely awful. This might remind some of you of Google+’s initial image display on their posts where all the pictures had a white border surrounding them.

Fixing the Problem with CSS

Luckily, we can use CSS to create “bleed” images that don’t look like garbage when displayed in the sidebar. The solution I propose is to use CSS that’s specifically targeted towards the particular widget holding the picture. Because in other situations, we usually want to keep the inherent padding. It makes lists like recent posts etc look neater.

Step 1: Get the Widget ID of the Image

Start off by creating the widget with the image, and have it display as shown above with the margin. Now right-click on the image and choose the element inspector. If you’re using Chrome, this will be the last option in the menu called “Inspect”.

This will bring up a panel on your screen showing you the HTML code for each and every element on the page. As you move your mouse cursor over the elements, they’ll be highlighted both in the GUI, as well as in the console.

We need to isolate the container that encompasses the image widget, so move your mouse pointer to the largest box containing the image, which doesn’t also contain the other widgets on the sidebar. Like this:

Specifically, we’re searching for the line which has something like ‘id=”custom_html-xx”‘. This “id” uniquely identifies the image widget in question. Once you find it, make a note of the ID itself. In the screenshot above for example, the ID is “custom_html-2”

Step 2: Creating the CSS

With the ID in hand, we can remove all padding for the widget using the following CSS code:

#custom_html-2 { padding: 0px; }

Replace custom_html-2 with the ID value you got in the previous step. Now we need to place this CSS into your theme. I’ve previously recommended avoiding putting CSS into your theme’s customizer, but it’s up to you. Find a solution that works for you. Once you’ve added the CSS, you will see that the image is now full “bleed” without any space on the sides:

Repeat this with each widget containing an image in the sidebar. Add a new CSS rule for each.

Tip: If you don’t need an image widget anymore, don’t delete it! Instead, drag it down to the “Inactive Widgets” section so that you can reuse it later on. These inactive widgets will retain their CSS IDs, so you don’t need to create new CSS rules for new widgets when you can simply reuse an older one and change the image that it holds!

As I said, we don’t want this to apply to the entire sidebar – just the images. And for those, this quick CSS fix should help you solve the problem!