• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Remove The Image Border In WordPress Widgets

Bhagwad Park

Published on: February 6, 2019

Categories: WordPress 0

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:

Select the Image Container

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:

Images without Borders in the WordPress widget area

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!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA