I need some help with restyling my alternate widget areas. I've created some new widget areas, and placed one into the main content of my index.php. This works just fine, however i want to style it differently.

  • WordPress: 3.0.4
  • Theme: Twenty Ten Child (twentyten-child)
  • Server: Local/MAMP

I've tried creating new style definitions for this particular widget area, mainly wanting to get rid of the list bullets.

I've also tried list-style: none with every one of the widget css definitions in my child theme's stylesheet, this doesn't appear to be working.

Firebug shows that the widget has a class of xoxo so i removed reference to that class in my file sidebar-content.php and there’s no such string in either the parent or child theme's functions. The widget I’m calling to the area is WP's default blogroll widget.

  1. Is there any way to remove the xoxo class attached to this widget from within the theme twentyten, perhaps using a filter?
  2. How can I resize the widget widths to allow them to fill up the custom widget area – or will they automatically do so?

The sidebar html for this widget area as follows:

/* Theme:twentyten-child-kw
Alt Sidebar containing the content widget areas.
@package WordPress
@subpackage Twenty_Ten
@since Twenty Ten 1.0 */ ?>

<div id="content" class="alt-widget-area" role="complementary">

<?php /* When we call the dynamic_sidebar() > function, it'll spit out the widgets for that widget area. If it instead returns false, then the sidebar simply doesn't exist, so we'll hard-code in some default sidebar stuff just in case. */
if ( is_active_sidebar( 'alt-content-widget-area' ) ) : ?>
<?php dynamic_sidebar( 'alt-content-widget-area' ); ?>
<?php endif; // end content widget area ?>

</div><!-- #content .alt-widget-area -->

In my child theme's style sheet, created definitions for the class alt-widget-area are based on the parent theme's definitions for widget-area, however, the class xoxo is taking precedence over everything.

Any suggestions please?

  • Do any other elements have the content ID(id="content"), IDs must be unique, if you have another element with that ID it could possibly contribute to the problem.
    – t31os
    Mar 9, 2011 at 14:24

2 Answers 2


you can either use the !important property or ensure that your style definition has precedence by making it more specific.


  • Thanks, Anu and t31os. Turned out that making the style definition more specific was the cure. Blogroll is assigned the class xoxo, which defaults to list; however, I found that the declaration under the 'main' ID ( #main .alt-widget-area ul {list-style:none} and #main .alt-widget-area ul ul {list-style:square} gave me what I was looking for. Firebug helped to detect the specificity conflict.
    – Das
    Mar 11, 2011 at 4:52

xoxo is a micro format class which allow the data to easily for most browsers including mobile browser. You can use more than one class or as many class class in any html properties. See example.

<div id="content" class="class-1 class-2 class-3 class-4" role="complementary">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.