Moving the header zone to Branding.cshtml or vice versa in Theme machine.

Topics: Customizing Orchard, Writing themes
Nov 14, 2011 at 5:33 PM

I've created a custom theme based on the theme machine. I need every header that gets renedered (which contains the title of my page) to appear in the Branding section at the very top of the page. In other words at the very top of the page where Branding.cshtml is rendered.

I have tried copying and pasting  all the html and @Zone(Model.Header) and pasted it into the Branding cshtml file. All that does is delete the branding altogether. The Header remains in the same place it originally was.

In short. What is the easiest/ cleanest way to move the <h1>@Model.Title</h1> into the top of my page where Branding.cshtml gets rendered?

Nov 14, 2011 at 6:20 PM

I had the same requirement - unfortunately it's not so straightforward to work around!

The problem is that the zones in Content.cshtml are not the same as the zones in Layout.cshtml - Placement determines where your parts appear in the Content template's zones, and it's simply not aware of anything in the Layout template and especially not Branding (which is an ad-hoc shape that simply happens to be created in TheThemeMachine's Layout.cshtml).

I might actually have a really neat way around this soon in one of my modules. But for now, there's a manual way.

You'll see in Content.cshtml this code:

    if (Model.Title != null) {
        Layout.Title = Model.Title;
    }

So - the content title is getting stored in Layout.Title. This gets used for the title element in <head> - but you can also use it in branding, as follows:

<h1 id="branding"><a href="@homeUrl">@Layout.Title</a></h1>

 

Nov 14, 2011 at 6:51 PM

Thanks. Worked like a charm. I still had the title rendering in the original place. In other words. It is now rendering in both places. So I commented out : <h1>@Model.Title</h1> in the Parts.RoutableTitle.cshtml file. And that seemed to work. If this is the wrong hack way to do this please let me know.

Nov 14, 2011 at 7:52 PM

You can use Placement to hide the title:

<Match DisplayType="Detail">
    <Place Parts_RoutableTitle="-"/>
</Match>

Nov 14, 2011 at 10:08 PM

I used css.

.metadata .published { display: none; margin: 0 6px 0 0; }

Coordinator
Nov 14, 2011 at 10:15 PM

It is still rendering, you're just hiding it from view. You should use placement.