How to override the default theme or start a new one to customize the Order Website.
You have two options when customizing styles:
- The easiest way is to override the
Themes\MyTheme\Views\Shared\_Head.cshtmland 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.
- 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
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
Adding a Stylesheet to the Default Bundle
StyleBundle virtual path can be retrieved by using
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");
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") ..