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. (Last updated on: November 16, 2018).
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 |
Published Date: January 14, 2015 |
Last Revised Date: May 8, 2019 |
.NET Framework: 4.5 |
Product Version: 12.4.0.24
Tags: themes

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>

 

Note:

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.

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.

http://help.syncfusion.com/ug/js/documents/cdn.htm

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

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