This blog uses the MistyLook theme. You may have noticed (either here or on your own MistyLook blog) that when images are posted, they are automatically given a sort of “shadow” under the bottom and right edges.
I can’t speak for everyone, but I don’t like having the shadow placed under my images by default. Here’s how you can go about removing it. This solution is a bit of a kludge, so it’s up to you whether or not you want to use it. Also, keep in mind that this information has only been tested on the MistyLook theme, even though there may be other themes that put effects on images, in which cases a similar solution could work. Here we go.
This is what you normally get when you insert an image.
As you can see, there’s a shadow under the bottom and right edges. This link will show you the background image that the theme uses to create the shadow effect. It gets placed underneath each image after being resized accordingly. One way to avoid the shadow border is to use the caption feature that’s built into WordPress. A captioned image will turn out like this:
However, you may not always want (or need) captions. Sometimes you might just want a plain image. To achieve this you can use the HTML tab of the Edit Post screen.
Be aware: Sometimes, returning to the Visual tab after using the HTML tab can cause certain changes to be lost—non-breaking spaces, for example. For more on this issue, see the note at the end of this post.
In the HTML tab, you’ll see your image tag (which is sometimes surrounded by a link tag):
<img class="aligncenter size-full wp-image-602" title="Late Tulip" src="https://walkingthepattern.files.wordpress.com/2011/05/stargrass.jpg" alt="Late Tulip" width="170" height="210" />
To remove the shadow border, we have to override the image style that has been specified by the theme. To do this, add the following line after “img” in your image tag.
style="background:#fff; border:none; border-top:0; border-left:0; padding:0;"
You should end up with an image tag that looks something like this (the added line is in red):
<img style="background:#fff; border:none; border-top:0; border-left:0; padding:0;" class="aligncenter size-full wp-image-602" title="Late Tulip" src="https://walkingthepattern.files.wordpress.com/2011/05/stargrass.jpg" alt="Late Tulip" width="170" height="210" />
Now if you preview your post, your image should look nice and clean-cut, like so:
Basically, we have forced the image to ignore the theme’s style by specifying our own. If you find that your images are being displayed too close to your text, you can substitute your own values for the borders and padding, which are now set to zero. This will give your image a little more breathing room.
Note on the Visual and HTML tabs
If, before using the HTML tab, you’re worried about messing something up, I suggest taking advantage of the Save Draft, and Revisions features. You can access the revisions (which act sort of like restore points) by clicking on Screen Options near the top of the Edit Post page, then checking off the box labeled “Revisions”. You should then see the Revisions section at the bottom of the page, which allows you to restore a previously saved version of your post should you ever make a mistake.
Read Full Post »