How to refer themes for EJWEB Tools control?
Description
The style and appearance of Essential Tools control is based on CSS classes. In order to apply styles to the Tools widget, refer to ej.web.all.min.css file in your project.
There are 13 in-built themes in your Essential Studio ASP.NET platform namely,
- default-theme
- flat-azure-dark
- fat-lime
- flat-lime-dark
- flat-saffron
- flat-saffron-dark
- gradient-azure
- gradient-azure-dark
- gradient-lime
- gradient-lime-dark
- gradient-saffron
- gradient-saffron-dark
- bootstrap-theme
Solution
To apply built-in theme, copy the theme CSS files from the following installed location.
<Installed Location>\Syncfusion\Essential Studio\12.4.0.24\Web\Samples\Web\Content\ej.
And refer to the same in your application.
Use the following code example to refer “flat-saffron” built-in theme in your application.
<%@ Register Assembly="Syncfusion.EJ.Web, Version= XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3D67ED1F87D44C89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Content/flat-saffron/ej.web.all.min.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="http://cdn.syncfusion.com/js/web/ej.web.all-latest.min.js"></script> <script src="http://cdn.syncfusion.com/js/web/ej.unobtrusive-latest.min.js"></script> </head> <body> <form id="form1" runat="server"> <div> <ej:Dialog ID="basicDialog" Width="400" runat="server" Title="My Dialog"> <DialogContent> <div> This is Dialog Content </div> </DialogContent> </ej:Dialog> </div> </form> </body> </html>
Version= XX.XXXX.X.XX - It varies depending up on .Net frame work version and Essential studio version that you are using. When you are using Essential studio version as-12.4.0.24 and .Net frame work as 4.5 use the following “Version=12.4450.0.24”.
The following screenshot displays the Dialog control with Flat-saffron theme.
Figure 1 Dialog control with Flat-Saffron Theme
You also have CDN references for built-in themes, refer to the following UG link for various built-in themes and its CDN references.
CDN theme references can be added into your application as given in the following code example.
<link href=" http://cdn.syncfusion.com/js/web/flat-saffron/ej.web.all-latest.min.css" rel="stylesheet" />
