This is a migrated thread and some comments may be shown as answers.

KendoUI web custom theme

7 Answers 319 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Sameer
Top achievements
Rank 1
Sameer asked on 20 Nov 2013, 05:50 PM
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.

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 21 Nov 2013, 02:27 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sameer
Top achievements
Rank 1
answered on 22 Nov 2013, 01:26 AM
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.
0
Dimo
Telerik team
answered on 22 Nov 2013, 08:13 AM
Hi Sameer,

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

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sameer
Top achievements
Rank 1
answered on 22 Nov 2013, 03:15 PM
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!

0
Dimo
Telerik team
answered on 22 Nov 2013, 04:28 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sameer
Top achievements
Rank 1
answered on 22 Nov 2013, 04:31 PM
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!
0
Dimo
Telerik team
answered on 25 Nov 2013, 08:48 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Sameer
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Sameer
Top achievements
Rank 1
Share this question
or