How to wrap the widget content with a div or get the widget title outside?

Question

Is there a way to get the widget title outside of the widget area like this:

<ul>
   <li>
      <h2 class="widgettitle">The title here</h2>
      <div class=""widget>
         <!-- any markup here -->
      </div>
   </li>
</ul>

instead of this:

<ul>
   <li>
      <div class=""widget>
      <h2 class="widgettitle">The title here</h2>
         <!-- any markup here -->
      </div>
   </li>
</ul>

the only reason is that i want the title on top of the widget and I want to apply a padding for all .widget elements, I tried solving it with the styling but it needed some negative margins on the title so I was wondering if we can create a sidebar with a markup like the first example ?

and if we can't do that is there a way to wrap the content without the title with a div ? like this

<ul>
   <li>
      <div class=""widget>
      <h2 class="widgettitle">The title here</h2>
         <div class="widgetcontent">
            <!-- any markup here -->
         </div>
      </div>
   </li>
</ul>

and thanks in advance.

Answer 1

this is the solution to wrap the content after the title like this

'before_widget' => '<li>',
'after_widget'  => '</div></li>',
'before_title'  => '<h2 class="widgettitle">',
'after_title'   => '</h2><div class="widgetcontent">' ); ?>

the important markup is the <div class="widgetcontent>" in the after_title, and the closing </div> in the after_widget, this will result in this html markup:

<ul>
   <li>
     <h2 class="widgettitle">Title</h2>
     <div class="widgetcontent">
        <!-- widget stuff-->
     </div>
   </li>
</ul>

Answer 2

you should be able to use the code for widgets to get done what you want done. Read this page widgets api

This page will show you how to code a widget and how you can put whatever you want before or after the widget using before_widget and after_widget