We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to refer themes for EJWEB Tools control?

Platform: ASP.NET Web Forms |
Control: Dialog |
.NET Framework: 4.5 |
Product Version:
Tags: themes


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


To apply built-in theme, copy the theme CSS files from the following installed location.

<Installed Location>\Syncfusion\Essential Studio\\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">
    <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>
    <form id="form1" runat="server">
            <ej:Dialog ID="basicDialog" Width="400" runat="server" Title="My Dialog">
                        This is Dialog Content



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- 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.

Dialog - 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" />


2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile