Styling a widget

  • Design Wave

    (@design-wave)


    15 years, 1 month ago

    Hello everyone!

    I’m designing a theme and I’ve got a trouble:
    there’s no separate DIV‘s for widget title and widget body (actual content).
    I think it’s a real issue for designing a look of a widget.
    For example, I want different backgrounds for widget title and widget content,
    or different padding, margin, etc.
    We have a good class .widgettitle for styling a title, but it would be great to have a class like .widgetcontent for styling a widget content.
    Right now I’m styling widget titles and UL‘s for widgets like recent-posts and archives. But many widgets (eg. tag_cloud) don’t have a class for its content.

    Any solution to that?
    Thanks in advance!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Kikemonk

    (@kikemonk)

    15 years, 1 month ago

    Hi I have done something like that on the site http://www.wizdome-mexico.com.

    Is quite easy, you just need to style each element with a div, for example

    .widgettitle1{
    /* your widget title style for categories here */
    }

    .cat_sidebar{
    /* Your style for the categories widget */
    }

    .widgettitle2{
    /* your widget title for links */
    }

    .links_sidebar{
    /* Your Style for the links widget */
    }

    and into your functions.php add this

    <!– The style for the sidebar categories –>
    if ( function_exists(‘register_sidebar’) )
    register_sidebar(array(‘name’=>’cat_sidebar’,
    ‘before_widget’ => ‘<div class=”cat_widget”>’,
    ‘after_widget’ => ‘</div>’,
    ‘before_title’ => ‘<div class=”widgettitle1″><h1>’,
    ‘after_title’ => ‘</h1></div>’,
    ));

    <!– The Style for the sidebar links –>
    if ( function_exists(‘register_sidebar’) )
    register_sidebar(array(‘name’=>’links_sidebar’,
    ‘before_widget’ => ‘<div class=”links_widget”>’,
    ‘after_widget’ => ‘</div>’,
    ‘before_title’ => ‘<div class=”widgettitle2″><h1>’,
    ‘after_title’ => ‘</h1></div>’,
    ));

    and that´s it, if you need any more support feel free to contact me

    Thread Starter Design Wave

    (@design-wave)

    15 years, 1 month ago

    Thanks for your response.
    You’ve got a good example, how to add DIV‘s before and after a widget.
    But what I need is to add class inside a widget.

    For example, what we have now:

    <li id="tag_cloud" class="widget widget_tag_cloud">
<h2 class="widgettitle">Tags</h2>
<div>...</div>
</li>

    And what I need:

    <li id="tag_cloud" class="widget_tag_cloud">
<div class="widget">
<div class="widgettitle"><h2>Tags</h2></div>
<div class="widgetcontent">...</div>
</div>
</li>

    I know, I can hack default-widgets.php, but it’s not a very good solution,
    because you have to do it every time after update.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Styling a widget’ is closed to new replies.