Revindex Storefront

Styling Telerik controls

Last updated on 2019-02-20 2 mins. to read
This topic only applies to older display templates running WebForms type. Newer templates using Razor type makes this step very easy.

Many of the Storefront controls utilize the Telerik controls and are officially supported by DNN (any control you see that has the Dnn<Control> prefix are all RadControls from Telerik such as "DnnCalendar"). To style the Telerik controls, you have several options:

1. Either create a custom display template and edit the HTML/ASP.NET properties of the controls to change the button styles. Here's some demo and property reference online at Telerik (you'll also find examples for other Telerik controls on that same page on the left menu):

2. You can make use of the Telerik style builder site. Give the Skin name "Default" and select any Base skin. Then select the control you want to adjust and click Create. Edit the styles and click Save. Download the CSS package and extract it to open up the included CSS file. Copy and paste the entire CSS styles to the bottom of your portal CSS file under Admin > Site Settings page.

3. The other way is to modify/include CSS as part of your skin templates under the WebControlSkin folder for each control type. You can follow the example of standard DNN skin (_default or MinimalEntropy) that already includes some WebControlSkin CSS if you look under your Web site folder:


Follow the CSS reference on the Telerik web site:

4. If you simply what to modify it to follow a theme, you can also try to use certain standard skins that are included with Telerik controls by setting the Skin="xxx" property on the Dnn<Control> tag. Not every skin is included but the common ones should work. For example:

<dnn2:DnnRadButton ... Skin="Simple" ... 

You can see the examples here by clicking on the top right button to switch skin or see the reference:



Powered by Revindex Wiki