This project is read-only.

Placement for HTML Widget

Topics: Customizing Orchard, Troubleshooting
Sep 19, 2011 at 5:44 PM

I would like to modify the placement of the HTML widget so that the header sits underneath the content.  Any ideas? The shape tracing doesn't seem to show a part to manipulate for the header, only the body.  I wondered about setting the position of the body element in the Placement, but wasn't sure how to target the widget in the particular zone?


Sep 19, 2011 at 8:31 PM

Not sure I understand, but it seems like you want to change the order of local zones? It seems weird that you would want to put the head at the foot: why not just place the parts that you want into the footer zone? Anyway, if you really want to do that, you can use a widget-specific alternate to the content shape and redefine zones as you see fit.

Sep 19, 2011 at 10:04 PM

If I understand what you're asking, you can override the Widget.Wrapper.cshtml template (from the Views folder in the Orchard.Widgets module) in your theme. You can then reorganize the html in the wrapper to put the title/header below the body (which is being displayed in the "Child" local zone of the wrapper).

Sep 20, 2011 at 11:39 AM

I know its a bit of a strange one!!

Basically our designer wants the title at the bottom for a block, so I thought I would just try and move the widget title.

Thanks for your suggesstion Kevin, however I think this would change the layout for all widgets on the page, I have tried it for a particular zone, but it isn't picked up.

Bertrand, I'm not too sure how to do that as the only two shapes in the widget are Parts_Contents_Publish and Parts_Common_Body, neither of which hold the title.  The only layout file I could find that dictates the layout is the wrapper that Kevin has pointed out.  The alternative widget shape just has

I was hoping to use the Placement file to change ordering, as this seems to be its responsibility.

Not too worry too much though, its probably a fair assumption that everyone would want the header at the top, and so its not easily customisable!!  I can get around it by just leaving the title blank and getting them to add a h1 to the bottom of the html content.

Thanks for both your help.

Sep 20, 2011 at 1:54 PM

It should be possible to do what you want. See this StackOverflow question:

Bertrand commented on that question that you can't really have alternates for wrappers, but you can modify the collection of wrappers for a shape. So for example, you could remove the default wrapper from the collection and add your own HtmlWidgetWrapper when displaying HtmlWidgets. I haven't tried this, but in theory it should work.

Sep 20, 2011 at 6:15 PM
Edited Sep 20, 2011 at 6:15 PM

I went ahead and tried it because it sounded like fun. :-)  Here's how you could swap the widget wrapper for all HTML widgets:


using Orchard.DisplayManagement.Descriptors;

namespace UserSubmissions {
    public class Shapes : IShapeTableProvider {
        public void Discover(ShapeTableBuilder builder) {
                .OnDisplaying(displaying =>
                    var widget = displaying.Shape.ContentItem;
                    if (widget != null && widget.ContentType == "HtmlWidget") {

Put that code in your theme for example (or a custom module if you have one - if you put it in the theme your theme needs to have a project file which includes this code file). You'll need to restart your site in order for this provider to be picked up by Orchard. But this will allow you to have a HtmlWidget.Wrapper.cshtml template in your theme which will be used instead of the Widget.Wrapper template from the Widgets module. So your content editors can still use widgets like normal by entering the title instead of having to know to add an <h1> to the bottom of the body content. You can extend this farther to include the Zone name too if you need.

Sep 20, 2011 at 7:26 PM

Cheers for  the code Kevink, I will give that a try :)

If I could give u rep I would!