KendoUI web custom theme

[Sameer]

Hi,
 
I am using KendoUI web widgets in my enterprise app. I need to create/customize a Theme as our corporate branding. After reading the docs, I realized that there is a tool called ThemeBuilder for this purpose available here http://demos.kendoui.com/themebuilder/web.html
 
Now I need to understand the logic behind the color options this tool (ThemeBuilder) shows me. All the Themes are based on 4 primary colors as shown in the selection options. However, when i try to modify/customize any theme, I found that there are more to it? How the ThemeBuilder is calculating all other colors besides the 4 Theme colors?
If I need to create my own corporate theme with 4 primary colors, how do I pick rest of the colors as shown in ThemeBuilder?
 
On the second note, ThemeBuilder can generate css and less. Is there a way to generate Scss as we are using scss in our organization?
 
Does Telerik provides scss version of their source styles. I know they provide css and less in their source directory. But converting them to scss looks like a nightmare to me!
 
 
Appreciate your help.

[Dimo]

Hi Sameer,

Indeed, each theme has several primary colors, mostly related to hover and selected states, and the menu/header backgrounds. However, a lot more colors are also defined in a given theme, and those are not calculated based on the primary ones - you need to define them separately, using all provided options and colorpickers inside the ThemeBuilder.

In addition to using the online ThemeBuilder, you can use the LESS files we ship as part of our source code, and create a custom theme by modifying the color variables in the LESS code. I am afraid we do not deal with Sass or SCSS.

Regards,
Dimo
Telerik

[Sameer]

Thanks Dimo for the clarification. I have converted your less files into Scss to align with our technology stack.

Background:
I am using out of the box KendoUI's flat theme. All the widgets on my screen are displayed and decorated with the KendoUI theme and I get some basic
styling on primitive controls like checkbox, radiobutton etc. by applying ".k-textbox" class on those. I have referred:
http://docs.kendoui.com/getting-started/web/appearance-styling for details.

Question:
As per HTML standards, border-color on checkbox, radiobutton elements can not applied. But when I use KendoUI Flat theme, somehow I get border-color on mouse hover? Strange! Any clues to override hover border color on some specific scenarios/elements only.

Thanks for your help.

[Dimo]

Hi Sameer,

The k-textbox CSS class is intended to be used for <input type="text"> and <textarea> elements.

Regards,
Dimo
Telerik

[Sameer]

Ok. So can I style checkbox and radio-buttons as per Telerik theme?
I referred http://docs.kendoui.com/getting-started/web/appearance-styling but not so clear. I am particularly interested in setting hover color of these controls. 

Thanks for your help!

[Dimo]

Hello Sammer,

Checkboxes and radio buttons cannot be styled. "Achieving" that requires additional HTML markup and Javascript. Kendo UI does not deal with such scenarios for the time being.

Regards,
Dimo
Telerik

[Sameer]

I understand. But my question was how did I get styles applied on checkbox and radiobuttons even if I hadn't applied any classes to them explicitly.
So something is in there in your theme files which work on checkboxes and radiobutton as well. I just want to override that behavior.

Hope I'm clear this time.

Thanks again!

[Dimo]

Hi Sammer,

>> my question was how did I get styles applied on checkbox and radiobuttons even if I hadn't applied any classes to them explicitly

Well, based on what you said, it seems you had:

>> I get some basic styling on primitive controls like checkbox, radiobutton etc. by applying ".k-textbox" class on those

If you check the checkboxes and radio buttons with any DOM inspector, you will see that the Kendo UI CSS contains the following rule related to the .k-textbox class:

.k-textbox > input,
.k-input[type="text"],
.k-input[type="number"],
.k-textbox,
.k-picker-wrap .k-input,
.k-button
{
    font-size: 100%;
    font-family: inherit;
    border-style: solid;
    border-width: 1px;
    -webkit-appearance: none;
}

Regards,
Dimo
Telerik