Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to style a Widget in Orchard?

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.

like image 305
b3n Avatar asked Oct 24 '11 00:10

b3n


1 Answers

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
like image 151
Bertrand Le Roy Avatar answered Oct 21 '22 09:10

Bertrand Le Roy