Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
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 '11 at 14:24
add comment

2 Answers

up vote 0 down vote accepted

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

share|improve this answer
    
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 '11 at 4:52
add comment

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">
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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