Dressing Up Your Blog’s Images and Adding More White Space

When designing your blog, what you don’t put on your blog can have a much bigger impact on your readership that what you do put on it.

Cramming too many widgets, ad banners, and images onto your blog makes it difficult for readers to focus on your content. Effective use of white space contributes to a sense of organization and flow.

To make my point, which of the two websites below is easier to read and navigate?

Two Hour Blogger and arngren.net Screen Grabs

Screen grabs from TwoHourBlogger.com (left) and www.ARNGREN.net (right)

Obviously, Two Hour Blogger is much better designed. See how much space there is between each of its elements?

Today we’ll add more white space around our images and text headings to help separate each section of content. But first, we’ll also polish up our images by adding a drop shadow around them.

Drop shadows then and now

If there’s little contrast between an image and its underlying background, a drop shadow will help it pop off the page.

In the olden days (before 2009), the easiest way to add a drop shadow to an image was by adding it directly to the image using an image editor like Photoshop. The downsides were:

  • Larger images – Adding a drop shadow made the images wider and taller, requiring more bandwidth to download.
  • Irreversible – The only way to remove the drop shadow (e.g. a site redesign) was to go back to Photoshop, remove the drop shadow effect from the original image, re-save it, and then re-upload it to your blog. That’s a lot of work if you have a bunch images.

In 2009, browsers began to support a Cascading Style Sheets (CSS) property that allowed the browser itself to render drop shadows. CSS is a language that allows web designers to define the look of HTML elements such as headings, paragraphs, and images in one place without having to redefine an element each time it is used.

The CSS property is called box-shadow, and its complete usage is detailed at css3.info. You can add this property to any image using the WordPress Image Editor.

Creating the drop shadow

Using WordPress’s post editor in visual mode, click anywhere on the image you want to edit. The “Edit Image” icon will appear at the top left of the image.

WordPress Image Editor Icon

Click the icon to open the image editor. Once you see the editor, click the “Advanced Settings” tab at the top.

Adding Drop Shadow to WordPress Advanced Image Settings Tab

Enter the following text in the “Styles” box:

box-shadow: 0px 7px 7px #888888;

I’ve specified four arguments (aka values) for the box shadow:

  • horizontal offset – number of pixels the shadow is shifted down relative to the image.
  • vertical offset – number of pixels the shadow is shifted right relative to the image.
  • blur – number of pixels over which to the shadow’s edge is blurred. A value of zero means the shadow’s edge is sharp.
  • color – the hexadecimal color code of the shadow.

In my example, the drop shadow is horizontally centered and shifted seven pixels down, its edge is blurred over a span of seven pixels, and its color is medium grey.

Add space above and below image

We’re not done with the image editor just yet. I’m also going to add some space between the text and images using the margin-top and margin-bottom properties. Note that if I didn’t always center my images, I’d probably just use the margin property.

After the box-shadow property, add the following code:

margin-top: 20px; margin-bottom: 20px;

The click the Update button at the bottom left of the image editor window.

Automatic drop-shadow and padding

If you rarely use images on your blog, then the WordPress image editor should be all you need. However, if you regularly add images to your posts, and/or already have a bunch of images in your older posts, this method gets tedious real quick.

The solution is to edit your theme’s CSS template so that all your existing, and future images automatically get the drop shadow and vertical padding.

Make sure you have a copy of your template’s css files before you modify them. That way, if you mess something up, you can always start over.

On your WordPress administration panel, go to Appearance > Editor to get to the “Edit Themes” panel. Next, click on the Stylesheet (style.css) link in the Styles section on the right side of the panel. Scroll all the way down to the end of the file in the text editor, and paste the following code:

/***** My Image Styles ********************/
img {
    -webkit-box-shadow: 0px 7px 7px #888888;  /* Saf3-4, iOS4, Android2.3+ */
    -moz-box-shadow: 0px 7px 7px #888888;  /* Firefox 3.5-3.6 */
    box-shadow: 0px 7px 7px #888888;  /* Opera 10.5, IE9, FF4+, Chrome6+, iOS5 */
    margin-top: 20px; margin-bottom: 20px;
    }

Notice the lines beginning with -webkit-box-shadow and -moz-box-shadow. These lines create drop shadows compatible with older versions of Safari/iOS/Android and Firefox browsers, respectively.

Removing the drop shadow

If you want to remove the drop shadow from an image without affecting the rest of the images on your blog, go back to the Advanced Settings of the image editor, and paste this code into the Styles box:

box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;

Issues with Internet Explorer

On Windows, older versions of the Internet Explorer (IE 6, 7, and 8) do not display the drop shadow. Even though people are gradually moving over to IE 9, many are still using the older versions. In fact, according to one net tracking firm, Internet Explorer versions 6, 7, and 8 combined held about 31% of browser market share in October 2011.

While there are some workarounds that you could implement on your site, they tend to slow down page loads on IE. Drop shadows aren’t worth a performance hit, in my opinion.

On browsers that do render drop shadows, each renders them slightly differently. If you have access to several different browsers, then by all means play with your drop shadow settings to get the best overall look across as many browsers as possible.

Don’t spend too much time tweaking your shadows, though. They won’t make or break your blog. Writing great content is a far better use of your time.

Adding space around major headings

Finally, we’ll add some space above and below our h2 and h3 headings so the breaks between our sections will stand out better. The goal is to have more white space above the heading than below it.

Go again to the end of your theme’s style.css file in the Appearance Editor Screen and paste in this code that will add ten pixels of space above and below the heading:

/***** My Headline Styles ********************/
#content h2, #content h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    }

Depending how your theme adds space before and after paragraphs, you might have to tinker with the sizes of the margins to get it to look just right.

Wrapping it up

Remember, web design isn’t just about making a site look pretty; it’s also about making it function in a way that gets your ideas to readers as easily as possible. Whenever you make design changes, make sure you ask yourself how the change helps the reader.

Article by Bryan Kerr

I love breaking down the techie side of blogging into easy-to-understand tutorials. That's mostly what you'll find here on The Hobby Blogger.

Comments

  1. Wow.. Thanks. It works. I looking for this around the google. It really helpful.

  2. Thank you so much for this, I have been trying to work this out and you have made it so simple. Thank you for sharing your expertise.

  3. YOU ROCK!!! I have spent hours and hours trying to figure out how to add drop shadows, trying old plugins that don’t work, tweaking CSS, etc. This worked perfectly the first time.

    THANK YOU!

    Now my weekend is off to a great start.

    Cheers,
    JC

  4. Hi Bryan,

    Like many of the other comments I’ve been looking for a while to create this effect. I’ve tried it and it works perfectly.

    I notice on a few sites have images with a shadow and curved effect. Do you have a CSS script that can create this effect?

    Many thanks for sharing

    • Bryan Kerr says:

      Thanks for commenting, Sean. Glad it worked. I believe the effect you’re talking about can be found on w3schools. It might be a bit complicated since you might have to create browser-specific code.

  5. Bryan – is there a way to tweak it so it is only for posts and nowhere else? I love the effect but I don’t need it globally.

    • Bryan Kerr says:

      Hi, Jason. Off the top of my head, maybe just add the image style to a

      #content .post img

      rule. Not sure if that’s the exact syntax, but should be close.

  6. Hey Bryan

    So often the bset solution is CSS. I cannot believe I wasted so much time looking for plugins when CSS was all I needed. Thanks for sharing. Damon

  7. How do we remove the faint outline and shadow from a single image in a post or page in free hosting at WordPress.com, when we cannot access theme code and stylesheets?

    This theme, for example: https://wordpress.org/themes/bouquet

    Thank you.

  8. Given the removal of the Advanced Settings (and thus the style box) from the image editor in later versions of WordPress, is there another way to remove the drop shadow from individual images?

Speak Your Mind

*