How to style a Widget in Orchard?

Question

I am trying to build a theme (convert an existing template I have) in Orchard but I got stuck when styling the Blog Archives widget. I have a zone "sidebar" in which I placed the widget.

In order to have it output the markup I want I created a new template in my views folder: Widget-BlogArchives.cshtml All the template does it wrap the content of the widget in a div like so:

<div class="box box_small">
    @Display(Model.Content)
</div>

So I expected all the widget content to be inside my div. However the generated HTML looks like this:

<article class="widget-blog-archives widget" shape-id="15">
  <header shape-id="15">
    <h1 shape-id="15">The Archives</h1>
  </header>
  <div class="box box_small" shape-id="15">
    <div class="archives" shape-id="16">
      <ul class="archiveMonthList" shape-id="16">
        <li class="first last" shape-id="16">
      <a href="(shortened)/10" shape-id="16">October 2011 (1)</a>
    </li>
  </ul>
    </div>
  </div>
</article>

What I don't understand is where the whole article wrapping is coming from? How can I get the header into my div and change the to a ?

Could someone also please explain where in the Model the title "The Archives" is stored? I looked through the model in the shape tracing tool but couldn't find it...

Thanks.

UPDATE

As Bertrand explained I made some changes to my Widget-BlogArchives.cshtml:

@using Orchard.ContentManagement
@using Orchard.Widgets.Models
@{
  Model.Metadata.Wrappers.Clear();
  var title = ((IContent)Model.ContentItem).As<WidgetPart>().Title;
}
<div class="box box_small">
  <h3>@title</h3>
  @Display(Model.Content)
</div>

This now generates the HTML I want.

Deist

Answer 1

This markup comes from the widget wrapper. It is possible to suppress the wrapper by calling Model.Metadata.Wrappers.Clear(). You can then completely take over the rendering from your own widget override.

If you open widget.wrapper.cshtml, you'll find the answer to your second question:

var title = ((IContent)Model.ContentItem).As<WidgetPart>().Title;

Which could also be done this way:

 var title = Model.ContentItem.WidgetPart.Title

Call

Thank you Bertrand. Where would I put the code to clear the wrappers? And is this a recommended way of styling widgets or should I override the wrapper instead of the Widget-BlogArchives.cshtml? I'm still trying to grasp all the concepts here and what best practices are. – Deist

You would put that code in your widget template override. something like widget-blogarchives.cshtml, depending on what you're trying to do (look at the available alternates in shape tracing to decide which one you want; you might want to add the widget alternates feature by the way, to get more possibilities). You can't alternate wrappers, so overriding the widget wrapper template would override it for all widgets. Probably not what you want. so yes this is a perfectly reasonable way to do things. – Call

Yes I got the alternates feature enabled, hence overriding Widgets-BlogArchives.cshtml. I just couldn't work out where the heading came from as I couldn't find it in the shape tracing tool. – Deist

As a side note: Model.Metadata.Wrappers.Clear() would also clear the shape tracing wrapper when shape tracing is enabled. Using 'Model.Metadata.Wrappers.Remove("Widget_Wrapper")' fixes this by only removing the wrapper that writes the additional tags. – Aquanaut