Remove Borders on Images With WordPress


WordPress LogoI’m using a WordPress theme called Hemingway by Anders Noren. It’s professional looking and easy to customize. However, I ran into the case where I have a PNG file with a transparent background that I’d like to have right justified alongside some text (like the WordPress logo you see to the right). A border would not look so appealing, see how I got rid of it!

To remove borders we need to get our hands dirty, just a little… Let’s alter our theme’s CSS file. Login to your hosting account and get to cPanel – you should know how to do this. If your lucky enough your hosting company has provider you with a File Manager utility that you can easily start by double-clicking the icon. This is how mine looks like:

 

cPanel File Manager

cPanel File Manager Icon

Once there, navigate to your theme’s folder. My path is as follows:

/public_html/wp/wp-content/themes/hemingway

Highlight the file style.css and click the Edit Button in the File Manager toolbar. Next, add the following CSS snippet at the very end. Save and exit.

img.noborder {
    border-width:0px;
}

We’ve just created a CSS class called noborder. To use it simply add that class to the class attribute of an image tag like so:

<img src="image.png" class="alignright noborder" width="100" height="100" />

Leave a comment

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