KendoUI web custom theme

8 posts, 0 answers
  1. Sameer
    Sameer avatar
    22 posts
    Member since:
    Sep 2011

    Posted 20 Nov 2013 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 21 Nov 2013 Link to this post

    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!
  3. Sameer
    Sameer avatar
    22 posts
    Member since:
    Sep 2011

    Posted 21 Nov 2013 Link to this post

    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.
  4. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 22 Nov 2013 Link to this post

    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!
  5. Sameer
    Sameer avatar
    22 posts
    Member since:
    Sep 2011

    Posted 22 Nov 2013 Link to this post

    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!

  6. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 22 Nov 2013 Link to this post

    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!
  7. Sameer
    Sameer avatar
    22 posts
    Member since:
    Sep 2011

    Posted 22 Nov 2013 Link to this post

    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!
  8. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 25 Nov 2013 Link to this post

    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!
Back to Top