Customizing the Order Website

How to override the default theme or start a new one to customize the Order Website.

Overview

You have two options when customizing styles:

1. The easiest way is to override the Themes\MyTheme\Views\Shared\_Head.cshtml and decide yourself what CSS you want to include. With this approach you will need to take care of concatenation and minification of the CSS yourself.
2. Start a new theme as instructed in Getting Started With a Custom Order Website Theme and follow the rest of the instructions in this document. Doing it this way Atomia Order Website will take care of bundling and minification automatically.

When you start a new theme the stylesheet Themes\MyTheme\content\css\theme.css is generated by default, and registered with the default StyleBundle.

This stylesheet can be used to override styles from the Default theme style sheet.

If you want to do more than just override the Default styles, you can customize what StyleBundles are registered in App_Start\BundleConfig.

Adding a Stylesheet to the Default Bundle

The Default StyleBundle virtual path can be retrieved by using Atomia.Store.Themes.Default.BundleConfig.DEFAULT_STYLES_BUNDLE.

This is how the generated theme.css is added, and can be done like this:

var styleBundle = bundles.GetBundleFor(Atomia.Store.Themes.Default.BundleConfig.DEFAULT_STYLES_BUNDLE);
styleBundle.Include("~/Themes/MyTheme/Content/css/theme.css");

Completely Replacing the Default Bundle Styles

If you want to completely customize the styles, you might do something like this:

var styleBundle = new StyleBundle("~/Themes/MyTheme/Content/css");
styleBundle.Include("~/Themes/MyTheme/Content/css/theme.css");

bundles.Clear();
bundles.Add(styleBundle);

You then need to override the Themes\MyTheme\Views\Shared\_Head.cshtml view partial to use the bundle you registered instead of the default one:

...
@Styles.Render("~/Themes/MyTheme/Content/css")
..