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.
Unfortunately, activation email could not send to your email. Please try again.

How to change of built-in theme

Thread ID:

Created:

Updated:

Platform:

Replies:

125075 Jul 19,2016 07:19 PM Jul 21,2016 04:47 AM ASP.NET Web Forms 3
loading
Tags: Menu
Edwin Romero
Asked On July 19, 2016 07:19 PM

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

Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On July 20, 2016 05:17 AM

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.   


Edwin Romero
Replied On July 20, 2016 09:19 PM

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

Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On July 21, 2016 04:47 AM

Hi Edwin,  

Thanks for your update.


We will wait to hear from you.

Please let us know if you need further assistance.
 

Regards, 
Dhivyalakshmi.
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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.

;