Customizing Orchard Themes using Shape Tracing and Url Alternates in Designer Tools

If you started developing Orchard Websites and custom Orchard Themes when Orchard 1.1 was released, consider yourself lucky! The new Designer Tools, like Shape Tracing and URL Alternates, that were released with Orchard 1.1 are an incredible leap forward in creating Orchard Themes. Shape Tracing is absolutely amazing and gets all the love, but let's not forget about the incredible usefulness of URL Alternates when it comes to overriding how things are displayed based on URL!

Orchard Designer Tools

If you download Orchard CMS via the Web Gallery in WebMatrix, the Orchard Designer Tools won't be downloaded and installed on your PC. You will need to browse or search the Orchard Module Gallery and download, install, and enable the features. The Designer Tools come with two features: Shape Tracing and URL Alternatives.

Why are these Orchard Designer Tools important? One word - customization! Often you want to customize and override the default templates in Orchard to create a custom look to your website. The Shape Tracing Tool helps you identify and override the active templates used to display content, and URL Alternates allows you to name your custom templates based on URL!

Let's see these two designer tools in action.

Shape Tracing and URL Alternates

Once Shape Tracing is enabled on your Orchard Website you will be able to browse and identify the wonderful parts that compose your website. In the image below, we can see that the content on the Blog Page of the Orchard Website by default is displayed via "~/Core/Contents/Views/Content.cshtml". Nine times out of 10 that is fine, but in this case we want to create a custom template and override the default behavior.

Shape Tracing provides a list of alternate names we can call our new template. Several of these names include url in them. These will only work if URL Alternates is enabled, because it is URL Alternates that allows us to override templates using it's URL! This gives us very fine-grained customization capabilities as well as often can allow the custom templates to be much more flexible as we apply this custom Orchard Theme to other websites!

Thanks to the wonderful new Shape Tracing Tool we are now able to click the Create button to create the new template in the Views Directory of our current theme.

Once the new template is created, you can now make any necessary custom changes!

Now Create Your Custom Orchard Themes and Templates!

With the wonderful Shape Tracing and URL Alternates features in the new Orchard Designer Tools in Orchard 1.1 you have a very powerful way to harness the composition features of Orchard and have it do your bidding! Go explore your Orchard Website with the designer tools and create custom themes and templates!

If you get stuck and need help customizing your Orchard Website, please contact us!