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
  1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. How to change of built-in theme

How to change of built-in theme

Well I'm beginner and I am not found out how to change of built-in theme in Menu,
I try put in the property "cssClass"  his name of theme but I don't see any change

I'll be very thankful, if someone help me or guide, how to do, I have read several  post here, but I don't found anything.

thanks I hope you can help me

3 Replies
DT Dhivyalakshmi Thirumurugan Syncfusion Team July 20, 2016 09:17 AM UTC

Hi Edwin,   
  
Thanks for contacting Syncfusion support.   
  
1) To Apply Syncfusion Built-in Theme   
   
We can apply built-in theme, please copy the theme CSS files from the following installed location.   
<Installed Location>\Syncfusion\Essential Studio\14.2.0.26\Web\Samples\Web\Content\ej   
And refer to the same in your application.   
Use the following code example to refer “flat-saffron-dark” built-in theme in your application and kindly refer the below link in Site.Master page of your application   
  
<link rel='nofollow' href="Content/ej/web/flat-saffron-dark/ej.web.all.min.css" rel="stylesheet" />   
  
   
We have prepared sample for you reference, please find the sample link below.   
  
  
Other References:   
  
  
2) To create the new theme based on existing theme we can use “Theme Studio”   
  
You can change the style of the control using Syncfusion theme studio and it will generate the css file. Please refer those file in your application. Kindly check the below references.   
  
  
3) Using CssClass:   
  
You can override the style of the Menu like the selection color and hover color using CssClass property. Please check the below code.   
  
<ej:Menu ID="JobSearch" runat="server" EnableCenterAlign="true" SubMenuDirection="right" CssClass="Purple-dark" EnableRTL="false">   
            <Items>   
                <ej:MenuItem Id="Home" Text="Home"></ej:MenuItem>   
                <ej:MenuItem Text="Search Jobs">   
                    <Items>   
                        <ej:MenuItem Text="Advanced Search"></ej:MenuItem>   
                        <ej:MenuItem Text="Jobs by Company"></ej:MenuItem>   
                        <ej:MenuItem Text="Jobs by Category"></ej:MenuItem>                        
                    </Items>   
                </ej:MenuItem>                  
            </Items>   
</ej:Menu>   
  
   
  
Main Menu   
Sub Menu   
Hover color   
  .Purple-dark .e-menu.e-horizontal .e-mhover > a {   
             background: #ffbf80;   
  
     }   
   .Purple-dark .e-menu.e-horizontal .e-list > ul li.e-haschild:hover > a    {   
        background: #ffbf80;   
    }   
Selection color   
.Purple-dark .e-menu.e-horizontal .e-list.e-active > a{   
        background: #ff8c1a;   
    }   
.Purple-dark .e-menu.e-horizontal .e-list > ul li.e-haschild.e-active > a   
    {   
        background: #ff8c1a;   
    }   
  
   
In the above code the value of “CssClass” property is set as “Purple-dark”. We have changed the selection color and hover color for both the Main Menu and also for the subMenu on using CssClass property.   
  
We have prepared a sample for your reference.   
  
  
Please let us know if you need any further assistance.   


  
Regards,   
Dhivyalakshmi.   


ER Edwin Romero July 21, 2016 01:19 AM UTC

Thank a lot  Friends, I try to do and I'll try to do it, I'll be feeding back to you 

DT Dhivyalakshmi Thirumurugan Syncfusion Team July 21, 2016 08:47 AM UTC

Hi Edwin,  

Thanks for your update.

We will wait to hear from you.

Please let us know if you need further assistance. 

Regards, 
Dhivyalakshmi. 


Loader.
Up arrow icon