…because good design helps sell your ideas.



Adjust Vertical Spacing of WordPress Widgets

Posted on September 19, 2007 by Blog Design Journal

Sometimes the quickest, easiest way to accomplish a design task is to “cheat.” Instead of editing PHP code for example, you can adjust the space above or below a WordPress widget in a couple of simple ways.

1. Go to Presentation > Widgets, and click on the text icon on the widget to open it.

Note: Some widgets won’t open and can’t be edited,
but usually the widget above or below them can be.
In that case, pick one of those, or rearrange widgets.

2. If you know the widget is a text widget, but the text icon is not visible,
even when you click on it, you may need to drag the widget out of the sidebar,
replace it in the unused widgets area below, and then drag it back. The text
icon will then reappear.

3. With the text for the widget displayed, add an empty paragraph or two
above or below the existing text. For example: < p > < / p >

Note: The example has spaces added between parts of the code
so it will show in WordPress (instead of WP reading it as actual code
and inserting a blank line in this post). When putting the code in your
widgets, do not use the spaces. (Remember that if you need to show code.)

4. Close the text box and Save Changes.

5. Click on the View Site link.

Now there should be extra space wherever you added a line < p > < / p >.
If not, go back and add a period ( . ) between the < p > and < / p >.
For example: < p > . < / p >

6. Save your changes again. Click on the View Site link again.

7. Check to see if the spacing is what you wanted.

If not, add or delete lines (by adding < p > . < / p > for each new line)
until you are happy with the vertical spacing (or it’s the best you can do).

The periods are hardly noticeable on screen. If you scroll down and look closely, you can see one above the BlogRush widget, where I added an extra line.

You can make these changes very quickly. More important, you can make them without really knowing PHP or HTML.

Leave a Reply

You must be logged in to post a comment.

  • Categories

  • Archives

  • Recent Comments

  • Advertise Here

  • Business Directory for Houston, Texas
  • Blogarama - The Blog Directory

↑ Top