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 Metronic theme styles can be mapped to our Theme Studio generated files

Process to create Metronic theme from our Bootstrap theme using Theme Studio application

  1. Consider, let we need to create default Metronic theme using our bootstrap theme of Theme Studio application.

 

 

  1. First, open our online theme studio application http://js.syncfusion.com/themestudio/

 

  1. Select bootstrap theme in Theme Studio as show below

 

 

 

  1. Under the personalize option of Theme Studio, please apply below specified color values in the above bootstrap theme of Theme Studio.

 

HEADER

 

Header Background

#2b3643

Header Border

#818e9e

Header font

#ffffff

Header icon

#ffffff

CONTENT

 

Content Background

#ffffff

Content Border

#818e9e

Content font

#000000

DEFAULT STATE

 

Default Background

#e1e5ec

Default Border

#C2CAD8

Default font

#666666

Default icon

#666666

HOVER

 

Hover Background

#C2CAD8

Hover Border

#93A1BA

Hover font

#666666

Hover Icon

#666666

ACTIVE STATE

 

Active Background

#4B8DF8

Active Border

#2F7EF2

Active font

#ffffff

Active icon

#ffffff

 

Or else, simply you can upload the below attached JSON file in Theme Studio in order to get the Metronic themes

Metronic JSON file

 

  1. In right side content panel, our components are rendered with default Metronic theme. So now you can check the customized color changes with the demo.

 

  1. Finally, you can download the created Metronic theme using download option of Theme Studio and can use the downloaded CSS in your application.

 

Notes: Please refer following link to check our online Theme Studio help document https://help.syncfusion.com/js/theme-studio

 
Article ID: Published Date: Last Revised Date: Platform: Control:
7766 06/14/2017 06/14/2017 JavaScript General
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.