To much <div> is created, how to remove them?

Topics: Customizing Orchard, Writing modules, Writing themes
May 17, 2011 at 1:20 PM

I want to do a clean template but Orchard creates div element that I want to remove, for example the div that a zone generates. 

<div class="zone zone-content"><div class="widget-recent-blog-posts widget">
    

I have tried to override but I can't get it right.

/dag

 

May 17, 2011 at 1:38 PM

But surely you want zones and widgets wrapped in a div of some sort, even on a fairly clean template, otherwise how do you visually or semantically differentiate the areas of the page?

May 17, 2011 at 2:09 PM

I use <section>, <nav> and <article> instead.

/dag

 

Coordinator
May 17, 2011 at 5:05 PM

By default, zones get rendered by the Zone shape method that can be found in CoreShapes.cs but you can override it with your own Zone.cshtml in your own theme. Here is the code for the Zone method:

[Shape]
public void Zone(dynamic Display, dynamic Shape, TextWriter Output) {
    string id = Shape.Id;
    IEnumerable<string> classes = Shape.Classes;
    IDictionary<string, string> attributes = Shape.Attributes;
    var zoneWrapper = GetTagBuilder("div", id, classes, attributes);
    Output.Write(zoneWrapper.ToString(TagRenderMode.StartTag));
    foreach (var item in ordered_hack(Shape))
        Output.Write(Display(item));
    Output.Write(zoneWrapper.ToString(TagRenderMode.EndTag));
}

As you can see, it's outputting the div.

May 17, 2011 at 5:18 PM

Thanks

I have tried to create a Zone.cshtml but I get the following error when I start the site: An item with the same key has already been added.

Can you give me an example of a working Zone.cshtml. I really want to see how it should look like. I know how to create Layout and Documents templates, but not for a Zone.

/dag

 

Coordinator
May 17, 2011 at 6:22 PM

Yes, tht is this bug: http://orchard.codeplex.com/workitem/17844

You can override for specific zones though, for example zone-AsideSecond.cshtml.

May 17, 2011 at 6:28 PM

Yes, I have read it.

But, please. Could you give me an example?

/dag

Coordinator
May 17, 2011 at 6:47 PM

Sure. Here is a Zone-AsideSecond.cshtml that works (note that you may have to modify your layout.cshtml to remove markup around the zone that may be defined there, depending on the theme you're using):

<aside class="zone zone-asidesecond" id="zone-asidesecond">
    @foreach (var item in @Model) {
        @Display(item)
    }
</aside>
May 17, 2011 at 7:02 PM

yes, and it work right away. You saved several hours for me.

By the way. This is the site. Swedish, and is in Alpha state: www.migbi.se. (A microsoft developer site.)

/dag

 

Coordinator
May 17, 2011 at 7:03 PM

Very nice.