Orchard CMS How to Transfer My ASP.NET MVC Layout(Header, Footer etc)/Theme in Orchard CMS?

278 views Asked by At

I want to create a theme of website in Orchard which is already built in ASP.NET MVC5.

Do I need to copy my markup from previous Layout.cshtml page into orchard themes/MyTheme/Views/Layout.cshtml page or is anything else required?

1

There are 1 answers

0
Sipke Schoorstra On

TLDR;

Essentially, yes: copy your MVC5 Layout contents to your Orchard theme's Layout.cshtml file.

But there's something else: your source MVC5 Layout.cshtml file probably contains things like <doctype>, <head> and <body> elements.

These elements need to go into a new file called Document.cshtml (also in the Views folder of your theme).

The net result will be that your Document.cshtml file contains the outer HTML structure, including the <body> element, but the contents of the <body> element reside in the Layout.cshtml file.

Orchard Theming Basics

Although you don't need to necessarily understand this in order to create an Orchard theme when starting out, but I found that ultimately it will make you a much more effective themer when you do. So here's a brief primer on Orchard templating and shapes.

Orchard's templating engine works with an hierarchy of shapes, which are dynamic objects. Each shape is rendered using a shape template (typically in the form of a Razor view).

The root of each page is the Layout shape, which is rendered by the Layout.cshtml shape template.

Shapes can have 'wrappers'. For the Layout shape, there is a wrapper defined called Document. What this means in practice is that in your theme, you can have a Document.cshtml file and a Layout.cshtml file (if you don't have a Document.cshtml file in your theme, a default one will be used).

The Document.cshtml view typically defines the doc type, the <head> element and the <body> element. The contents of the <Layout> shape will be rendered within that <body> element.

So depending on what you have in your MVC5 Layout.cshtml file, you may or may not need to create a Document.cshtml file in your theme's Views folder. Personally I typically do so, so that it's easy to make a change when I need to.

Things such as Header and Footer typically go into the Layout.cshtml file of your theme, so you can just copy them over from your MVC5 Layout.cshtml file.

Eventually you'll want to replace "hardcoded" HTML with content coming from the CMS. Then it's time to start declaring zones to your Layout.cshtml file.

To define a zone, all you need to do is add the following to your Layout.cshtml:

@Display(Model.MyZoneName)

You can use any zone name as you like, and on the fly (you don't need to define them anywhere else; except in your Theme's manifest file (Theme.txt) in case you want to allow the CMS user to add widgets to these zones).

There are a number of pre-defined zones that Orchard knows about. In the Layout.cshtml file, the most important one is the Content zone:

@Display(Model.Content)

The Content zone is where things such as the current page's content is inserted. But also other views such as the login form when you're on the login page of the CMS.

There is much more to shapes and zones, but I hope that this will at least get you started.

For more information on shapes, zones and theming, here are a number of useful resources: