Customizing the default css theme

[Randy Craven]

Hello,

I would like to customize the default CSS theme that comes with Essential Studio.  Some changes would be to change the basic color scheme, and others would be extensions:  For example a 'Delete' button might have a red background so this would be an additional CSS class.

Is there a reference for doing this or can someone explain the best way to accomplish this?  I assume the starting point would be to copy the default theme to a new folder and then reference those new files in my project.

In particular I would like to know the best way to prevent my changes from breaking as new versions of Essential Studio, with new CSS properties, are introduced.

thank you,

Randy

[Saranya Sivakumar]

Hi Randy,

Thanks for using Syncfusion products.

We would like to let you know that, we can customize the theme of our control using “cssClass” property. You can also refer the following class reference link for JavaScript. Since, our ASP.NET MVC components are created as wrapper for the JavaScript components the properties, methods and events will be same for MVC components.

http://help.syncfusion.com/cr/js

Also we have a documentation which contains more detailed information of our controls for getting started. You can find it under the following link.

http://help.syncfusion.com/web

For your convenience we have prepared the sample for customizing the theme for Button control. Please find the sample from the following location.

Sample Location: Sample

Also we didn’t make any changes in the cssClass property in the new versions. So could you please let us know in which way it breaks new versions of Essential studio? Please provide detailed information about the break along with the replication procedure this will be helpful for us to serve you better.

Please let us know if you have further concern.

Regards,

Saranya.S

[Randy Craven]

Hello Saranya,

Thank you for your reply.  Using your sample as a guide I was able to do the customization I needed.

My problem was that I was creating a new css class for the customization like this:

<style>

    .redButton:hover{

        background:red;

    }

</style>

<button id=deleteButton>Delete</button>

<script>

$(function(){

    $('#deleteButton').ejbutton({

        cssClass: "redButton"

    )};

)};     

From your example I see that I need to extend the existing Syncfusion css classes to create a "red" class:

.red.e-btn.e-select:hover {

background-color: red;

}

There isn't anything broken in the css of the new version to my knowledge.  Rather, I just wanted to know if there is a best practice for maintaining my customizations so that they work with new versions of css.  I assume the most basic step would be to put my customizations in a separate file, like your custombutton.css.  If there are any other ideas I would like to hear them.

Lastly, as a suggestion, I think that additional online documentation around how to create and apply customizations to the Syncfusion supplied themes would be very helpful.

Thank you,

Randy

[Saranya Sivakumar]

Hi Randy,

We would like to let you know that, we can use the cssClass property as the following steps.

Step 1: Define the cssClass property in the script section as shown below.

[Script]

$('#deleteButton').ejbutton({

    cssClass: "redButton"

});

 

Step 2: By defining the root class using this API, we need to include this root class in the Button.css file.

[CSS]

.redButton.e-btn.e-select:hover {

 background-color: red;

}

.redButton.e-btn.e-select:focus {

  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);

}

 

We can customize your style in the css file. If we want to change the background color of the Button on hover then we have to set “background-color:red” as given in the above code snippet. We have modified the sample as per your code, please find the sample from the following location.

Sample Location: Sample

We accept your suggestion to include documentation for creating and applying customizations to the themes. We will include it and update you once our online documentation has been refreshed. Please be patience until then.

Please let us know if you have further concern.

Regards,

Saranya.S