banner ad
RSS
banner ad

How to Properly Style Sidebar Text Widgets

August 11, 2008 | | Comments 10

Due to the nature of the sidebar design, you may have to use a small bit of HTML code to properly style your sidebar text widgets.

This is an Improperly Styled Text Widget

Improperly Styled

Improperly Styled

If you were to enter the following text in a sidebar widget, your text would appear but without the nice little box around it (see thumbnail to the right):

I was pleased to learn the New York Times is using Wordpress to power their blog network. If WP is good enough for the Times, it’s certainly good enough for you, don’t you think? Well, that’s another post. What I really wanted to share was this job opening:

This is a Properly Styled text Widget

Properly Styled

Properly Styled

Instead, this is the text you want to enter in your sidebar text widget:

<div class="sidebox">
I was pleased to learn the New York Times is using Wordpress to power their blog network. If WP is good enough for the Times, it’s certainly good enough for you, don’t you think? Well, that’s another post. What I really wanted to share was this job opening:
</div>

Notice the application of the <div class="sidebox"></div> tags. You can use these tags in either the right or left sidebar.

When Should You NOT Use the “Sidebox” Div Class?

If you place your text widget in a list format, the “sidebox” div class is not necessary. For example, this code would not require it:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Filed Under: Tutorials

Tags:

About the Author:

RSSComments (10)

Leave a Reply | Trackback URL

  1. Martin says:

    Thanks for that tweak. Just a question thought along the same lines.

    When using a plugin which includes a built in widget, how can I get it show the little box around it if it does not show the box automatically? Some plugins with a widget only show the fancy heading.

    Cheers.

  2. Jeff Lowy says:

    Hi Martin,

    You will have to go to the “Plugins” page, then click edit on the widget you want to have the box around. Once you are in the editor for that widget you will have to enter the (see above) in to that widget.

  3. Dusty says:

    Can someone please explain how I can customize my right sidebar? I have a couple categories I want to display in the right sidebar only. ie Editors Choice. What I want to do is when I post something and categorize it for Editors Choice that it will show up in the Editors Choice section of the right sidebar. I need to do this with a couple categories so any input would be much appreciated. I have tried using Text widget but had no luck due to it not processing PHP.

  4. Michael Pollock says:

    Dusty:

    It looks like you may have figured this out. If not, there is a plugin that allows you to use PHP in sidebar text widgets.

    See it here:
    http://wordpress.org/extend/plugins/php-code-widget/

    Best – Michael

  5. Dusty says:

    Michael,

    Thanks for the link. This is exactly what I was after.

  6. Dusty says:

    Michael,

    Could you please explain how I can block a category from being displayed in the Recent Articles of the home page. I’m trying to keep my Daily Tips Category displayed in the right side panel only.

    Thanks,

  7. Michael Pollock says:

    Dusty:

    Open your Main Index Template and find this code:

    <?php
    $id = $wpdb->get_var("SELECT term_ID FROM $wpdb->terms WHERE slug='featured'");
    $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
    query_posts("cat=-' .$id. '&paged=$page"); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    Change this line:

    query_posts("cat=-' .$id. '&paged=$page"); ?>

    to this:

    query_posts("cat=-X,-' .$id. '&paged=$page"); ?>

    In the above, X=the category ID of the category you are excluding.

    To find the category ID …

    There was a time when the category IDs were listed right next to the category. For some reason the WP development team changed that. So now, here’s how to find the category ID.

    In your WP control panel, click Manage >> Categories.

    Place your cursor over the category link and look in the bottom left corner of your browser. you should see a link appear in the browser status bar (If you don’t use the status bar, just click on the category, and the link will appear in the browser Address bar at the top).

    it will look like this:
    http://mysite.com/wp-admin/categories.php?action=edit&cat_ID=22

    The ID in the above example is 22.

    You can read more here:
    http://codex.wordpress.org/Template_Tags/query_posts#Exclude_Categories_From_Your_Home_Page

  8. Alistair Barnett says:

    Hi everyone,

    If you are looking for support, please visit our forum at http://www.solostream.com/forum/ for immediate answers to your support questions. Otherwise, there will be a delay in answering your support-related comment if left here.

    If this doesn’t apply to you, feel free to comment!

    Alistair

  9. mma sports says:

    I have been searching for this for a while today thanks very much for your support.

Leave a Reply

If you want a picture to show with your comment, go get a Gravatar.