New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Build the Team Efficiency Dashboard Project

Step 10 (Last): Add and Configure the Kendo UI Themes

Kendo UI widgets include a number of predefined themes. In this chapter you'll learn how to make your app look amazing using Kendo UI themes.

Theme Change

Exercise: Theme the Application

  1. If running, stop the project.

  2. In the Visual Studio's Project Explorer, right-click the project and choose Telerik UI For MVC > Configure Project from the menu.

  3. From the Project Configuration Wizard, choose the Nova theme.

  4. Open Views/Shared/_Layout.cshtml and move @Styles.Render("~/Content/css") just above the closing head tag </head>.

  5. Run the application to see the theme applied to the Kendo UI widgets.

  6. Next, you'll be finishing the theme by adding styles to non-Kendo UI elements creating a completely custom look. A style sheet was installed with the boilerplate to give you a jump-start. Add it to the application by opening Views/Shared/_Layout.cshtml and adding a reference to ~/Content/site-nova.css just above the closing head tag </head>.

    This is CSS, so the order in which the style sheets are added is very important.

    Razor
     <link href="~/Content/site-nova.css" rel="stylesheet" />
  7. Refresh the application and notice the look is starting to come together. There's just a few items that could use some fine-tuning. Let's add some additional styles to site-nova.css to complete the theme.

  8. Open site-nova.css and find the /* Side Panel - Employee List */. Add a style that sets the date picker widgets inside the menuPanel to 100% width of the container.

    The resulting code should be like the one shown in the example below.

    Razor
     /* Side Panel - Employee List */
     #menuPanel .k-widget.k-datepicker {
         width: 100%;
     }

    UI for ASP.NET MVC The DatePicker width

  9. Add a style to offset the employee list so its content lines up with the left edge of its container.

    Razor
     #employee-list > ul {
     	margin: 0 -10px;
     }

    UI for ASP.NET MVC The ListView container

  10. Find /* Small Devices, Tablets, and Up */. Here you'll find a media query that will hold some styles that are only applied to scree sizes above 768px.

    Razor
     @media only screen and (min-width : 768px) {
    
     }
  11. Inside the media query, add a selector for .app-wrapper and set a left margin of -15 and set the position to relative. This style will align the app with the left hand edge of the screen.

    Razor
     /* Small Devices, Tablets, and Up */
     @media only screen and (min-width : 768px) {
         .app-wrapper {
             position: relative;
             margin-left: -15px;
         }
     }

    UI for ASP.NET MVC App Wrapper margin

  12. Finally, set the Kendo UI Chart themes. Open _MontlySalesByEmployee.cshtml and set the Theme property to nova on the EmployeeAverageSales chart.

    Razor
     @(Html.Kendo().Chart<KendoQsBoilerplate.MonthlySalesByEmployeeViewModel>()
         .Name("EmployeeAverageSales")
         ...
         .AutoBind(false)
        	.Events(e => e.DataBound("onAverageSalesDataBound"))
         .Theme("nova")
     )
  13. Open _QuarterToDateSales.cshtml and set the Theme property to nova on the EmployeeQuarterSales chart.

    Razor
     @(Html.Kendo().Chart<KendoQsBoilerplate.QuarterToDateSalesViewModel>()
         .Name("EmployeeQuarterSales")
         ...
         .AutoBind(false)
         .Events(e => e.DataBound("onQuarterSalesDataBound"))
         .Theme("nova")
     )

And... that's it! You've created an interactive dashboard application using Telerik UI for MVC and Kendo UI. In the process you've mastered scaffolding, Kendo UI templates, charts, server and client-side APIs, responsive web design and themes.

Congratulations!

UI for ASP.NET MVC Finished App - Nova theme

Next Steps

Your journey with Telerik is just beginning. Here are some resources to help you figure out where to go from here.