Themes

MVC controls are styled using CSS. The default look is provided by registering the styles, and over 20 beautiful themes that can be registered as follows:

        @Html.C1().Styles().Theme(theme)
    

In addition to the CSS included in the MVC edition, you can use standard CSS selectors to customize the look of any control.

Below are some input controls:

April 2025
SunMonTueWedThuFriSat
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 1 2 3
4 5 6 7 8 9 10

This is a FlexGrid:

Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35
1
2
3
4
5
6
7
8
9
10
11
12
13
// This file locates: "Content/css/Lesson/C1Mvc/Themes.css".
.wj-flexgrid {
  height: 150px;
}
.wj-control {
  margin-bottom: 6px;
}
.wj-calendar {
  max-width: 400px;
}
.demo-Control .wj-control {
  border: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: Themes
        public ActionResult Themes()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1Mvc.Themes_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.Themes_Text1)
    <pre>
        @@Html.C1().Styles().Theme(<i>theme</i>)
    </pre>
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Themes_Text2)
</p>
 
<label>
    @Html.Raw(Resources.C1Mvc.Themes_Text3)
    @Html.Partial("_ThemeSelector")
</label>
 
<p>@Html.Raw(Resources.C1Mvc.Themes_Text4)</p>
@Html.C1().ComboBox().Id("theCombo").Bind(Model).DisplayMemberPath("Country")
@Html.C1().InputDate().Id("theDate")
@Html.C1().Calendar().Id("theCalendar")
 
<p>@Html.Raw(Resources.C1Mvc.Themes_Text5)</p>
@(Html.C1().FlexGrid().Id("theGrid")
    .Bind(Model)
    .ShowMarquee(true)
    .ShowSelectedHeaders(C1.Web.Mvc.Grid.HeadersVisibility.All)
    .ShowAlternatingRows(false)
)