All the Revindex Storefront module controls use the native DNN container skins so you have a consistent look across your Web site that you can modify from your normal Manage > Themes page. The user interface design follows the Bootstrap 3 and 4 and DNN UX Guide standards so that it can be modified easily in a consistent manner across your site. In addition, the content and internal look-and-feel of public facing module controls can be customized per portal.
Creating a new display template
You must first enable the Display templates feature under Configuration > General. Once enabled, you can create display templates from the Configuration > Display templates menu. For example, you can customize the Product Detail module to change the layout, color, font, CSS style, add text and images.
Always start by making small incremental changes, save and view your changes you just made. Once you get comfortable, go back, repeat and make more changes. It’s also a good practice to write HTML comments next to your line edits so you remember what changed.
<!-- This is a comment ignored by the browser... Changed layout to show a darker color -->
If you want syntax highlighting, you may prefer to copy the code into a local file and edit it using the free Microsoft Visual Studio. See How to edit template in Visual Studio for more information.
Once you have saved your changes, you need to tell the system to use this new template (either portal-wide, module-wide or for a specific product only). For example, if you created a new custom template for the Product Detail module, you can change the default template portal-wide under Display template in the Configuration > Product detail menu. Please note you must first enable the Product detail feature under Configuration > General to access this functionality. You could also change the default template module-wide under the module’s Settings. Alternatively, you can configure your individual product to use this new custom template in place of any of the portal or module default template.
Template life cycle
We live in a period of time where technology changes very quickly introducing us to new and exciting ways to do things. Our commitment is to keep base display templates active for 2 or more years when possible. In the past, some of our base templates have endured for over 6 years. To help with changes, as the software evolves, new features introduced in base display templates carry a different version number (e.g. “Standard1”, “Standard2”, “Standard3”) providing an upgrade path for users who are not ready to upgrade their custom template. Base display templates that have become obsolete will eventually be removed from future versions. Custom display templates based on these removed templates will no longer function. You are, therefore, encouraged to continuously upgrade any custom templates to use the latest base display templates as they become available to avoid disruption to your site.
Razor is one of the most popular server-side markup code that is easy to learn. By consuming structured models, you can generate highly complex HTML code easily. Learning Razor is beyond the scope of this topic. However, there are many Razor tutorials and help online to get you started.
To reference another file within the same folder, you can use the Razor @VirtualPath property. For example, to reference a script located in the same folder, you can use src="@VirtualPath/Include.js".
Bootstrap is the most popular CSS standard for typography, forms, buttons, navigation and other interface components used by millions of sites. The CSS standard makes it easy to customize changes elements of a page. There are countless tutorials for Bootstrap. A good tutorial to start learning Bootstrap can be found here.