Customized widget area - how to override or filter class xoxo?

Question

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:

<?php 
/* 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?

Answer 1

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

http://www.google.com/search?q=css+specificity

Answer 2

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">