Home > Digital Design > WordPress Hates White Space

WordPress Hates White Space

WordPress, or at least some of its templates, really hates white space. Even the &nbsp; or <br> tags for HTML will not work and something overrides the code to remove empty space. I personally don’t think text, images and video should be rammed together. I was particularly tired of embedded videos and images being run together with each other or jammed together with text above and below. I came up with a simple hack if you want to space elements out in your blog posts and put negative space between different parts.

My solution for giving space is to insert a blank image. The background of this template is white, so I just made two white rectangles in Photoshop. Here is one at 550 x 20 pixels. You can save it and use it:

WP-White-Bar

Here is a thinner blank image giving a gap of 550 x 10 pixels:

WP-White-Bar-550x10

I just insert these blank images as I would any other image in areas that WordPress is not allowing space between items. If the text is against the video box, add in a white rectangle. If you want to make sure there is a gap between photos in a series, then put a rectangle between each photo.

Making a different size rectangle is simple; just give it the pixels dimensions you want when you create a new file. If your template has a different color background, just screen cap a page of text, sample the background color with Photoshop’s eyedropper tool and use the bucket tool to fill your rectangle. Test it out in a block of text in a draft post to make sure the color matches and the rectangle blends in invisibly.

The nice part of this process is that you do not have to upload the rectangles over and over again. You can use an uploaded rectangle repeatedly. I just select the uploaded blank rectangles from the images gallery: when writing your post go to Add Media > select the Media Library tab > select your rectangle to insert.

Advertisements
Categories: Digital Design
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: