In moving my blog site from my VPS to Windows Azure, I decided to take advantage of the Windows Azure Websites feature. In doing so, I opted to install Orchard CMS from the Gallery instead of pushing the bits directly from Visual Studio. This works well, in fact, as I mentioned in a previous post, the blog site was set-up within two minutes. However, there was brief bit of awkwardness. This is because during my previous deployment, I had directly modified some of the views associated with the theme that was being used so that I could incorporate elements of my own look and feel to the site. Since I didn’t deploy using Visual Studio, I wondered how can I achieve the same effect in Windows Azure.

As it turns out, Orchard CMS is indeed a very powerful content management system and there are actually two ways to accomplish this. You can either import the theme from your local computer into Orchard from within the themes gallery or you can install the “CSS Edit” module which will provide the functionality to modify theme files directly from within the Orchard CMS administration panel.

I opted for the latter as it is a powerful option. After installing the CSS Edit module, you will find new tabs in the Themes section, each allowing you to modify a certain type of asset such as css stylesheets, Razor views, and/or Javascript files. Layouts in Orchard are composed of content item parts, of which the properties can be overridden by simply adding a view of the same name to the views folder for the theme. So in three quick steps here is how you override the default view for a particular content item part.

Navigate to and log in to the admin panel.

If you haven’t installed them, you will need to install the “Shape Tracing” module as well as the “CSS Edit” module. The shape tracing module helps you to locate the shape (mark-up) that you would like to edit, so that you can easily track with view to override.

While still logged in, view your website and click the window icon in the bottom right to open the shape tracing window. Hover over and click on the element on your page that you would like to customize and then in the window at the bottom, click on the template tab to identify which file it is being rendered from.

This is the file that you need to modify/override. If the file path contains “~/Core” then you know that this content item part is a part of the Orchard.Core and can be overriden. If the path contains the name of the theme, then you know that this content item is already a part of the theme and can be modified.

In order to override the content item part that is a part of Orchard.Core, go to Themes > Razor Views > Create New View. Name the view the exact same name as the Core content item part. Add your desired mark-up and click save. Browse to your site and you should see that the view has been updated.

Modifying an existing view is just as easy. Using the drop down list, select the view that you would like to modify and when the markup appears in the editor, update your code and click save.

Comments


Comments are closed