If a theme sidebar is created correctly, the entire sidebar should actually be a list controlled and styled with css to make the sidebar look nothing like a list. Theme designers usually start and end a sidebar with a ul tag. You just need to make sure your content is inserted betweent the ul tags as list items (li).


Advertise With Us

In most cases, you will want to insert content in your sidebar as a list item like this: <li>sidebar content</li>

You can of course continue to make the list deeper by adding sub lists to the list like this:

<li><h2>sidebar content header</h3>
<ul>
<li>main sidebar or widget content</li>
</ul>
</li>

One common mistake I see is with the use of text widgets in a widgetized sidebar. it is a good idea to start the text of your text widget as an unordered list all by itself. This will make the text box of the widget a sub-list of the main sidebar list.

For example, this screenshot of a text widget does not start the text form content area with the correct ul (unordered list) li (list item) tags:

Sidebar text widget not formatted properly

The improper formatting of the text in the text widget box produces the following improperly formatted sidebar widget with no border space as the developer intended:

Improperly space text in a sidebar text widget

Properly formatting the text in the text widget as an unordered list item looks like this:

Properly formatted text widget content

Properly formatting the text in the text widget form area as an unordered list makes the sidebar widget content space properly as the developer intented like this:

Properly formatted sidebar text widget content

Tags: , , ,

"How To Place Content In Your Sidebar Properly" by Tommy was published on November 2nd, 2007 and is listed in Themes.

Follow comments via the RSS Feed | Leave a comment | Trackback URL

Comments on "How To Place Content In Your Sidebar Properly": 2 Comments

  1. Tonia Moxley wrote,

    Can you have nested categories in shifter sidebars? For example, on my blog I have a “dining and drinking” category, and I would like for subcategories “restaurants,” “wine” etc. show up nested beneath the parent category. Right now, the subcategories are listed in the same format as parents.

  2. Tommy wrote,

    @Tonia, sure you can have nested list items.

    <ul>
    <li>Nest Items Like This
    <ul>
    <li>Just make</li>
    <li>another nested list</li>
    <li>within the original list</li>
    </ul>
    </li>
    </ul>

    Displays as:

    • Nest Items Like This
      • Just make
      • another nested list
      • within the original list

Leave Your Comment

Subscribe without commenting

Click Screenshots To Enlarge

  • Wordpress Theme Skin for Shifter - Over It (Glass)
  • Change between thin, wide and full width layouts without destroying your site structure.
  • Wordpress Theme Skin for Shifter - Over It (Light)
  • Choose between single or double sidebars and then shift sidebar width or position with the flip of a switch.
  • Wordpress Theme Skin for Shifter - Lizard (Dark)
  • One, two or three column layouts have never been easier.
  • Wordpress Theme Skin for Shifter - Brown
  • 15 skins let you choose the end look for your site without destroying the structure of your perfect layout.
  • Wordpress Theme Skin for Shifter - News Red
  • Shifter makes designing your site easier, faster and more enjoyable - all with the flip of a switch!

Wearing the Basic Skin for Shifter by Buzzdroid