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 make a widget box

Thread ID:

Created:

Updated:

Platform:

Replies:

126022 Sep 18,2016 02:29 PM Sep 20,2016 08:02 AM JavaScript 3
loading
Tags: General
Greg Gum
Asked On September 18, 2016 02:29 PM

I have some content that I want to put a border around.

How do I do this so that the border color is take from the theme?

In other words, the border color for a dark theme is different from the light theme.

So how do I specify a border color based on the theme so that if a dark theme is being used, my widget has the correct border color?

Do I have to use the less file to create this?  Or is there an existing class I can use that will give me widget the theme border, border-radius, and border-color to match the theme?

I just want to be able to wrap a bootstrap card in the correct border without breaking the theme.

Kasithangam C [Syncfusion]
Replied On September 19, 2016 12:40 PM

Hi Greg, 
Thanks for contacting Syncfusion support. 
We are not maintaining common class for applying border-color, boder-radius when changing the themes. In our themestudio, we have maintained border, boder-color css in a variable not in a class. So, when we changed the dark theme, it will apply the border color, border radius to the control elements.  
For example: If we apply the dark theme and set boder-color for the datepicker component, then it will apply the border-color to the datepicker element as shown below: 
<code> 
<style type="text/css" class="cssStyles"> 
       .e-datewidget .e-in-wrap { 
         border-color:#c43d3d; 
      } 
    </style> 
</code> 
We have prepared the sample for this and it is available under the following link: 
Regards, 
Kasithangam 


Greg Gum
Replied On September 19, 2016 07:11 PM

Ok.

What I did was modify the theme.less file like this:

.content-border-color{
    border-color: @content-border-color;
}

Now I have a class that I can put on any element to take the theme color.   

Greg

Kasithangam C [Syncfusion]
Replied On September 20, 2016 08:02 AM

Hi Greg, 
We are happy to hear that your issue has been resolved. 
Regards, 
Kasithangam 


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.

;