CSS Styling of widgets

3 posts, 1 answers
  1. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 20 Jan 2013 Link to this post

    I've attached a screenshot of a couple KendoUI widgets I'm trying to style, the Menu and the TabStrip.

    I'm trying to remove the outer box and it's background so it matches the clients specifications for their design.

    Here's an attempt I've made with no luck on the Menu:

    #menu
    {
        background-image: none;
        background-color: none;
    }
     
        #menu .k-block, #menu k-widget, #menu .k-header
        {
            background-color: none;
        }
    I was able to modify the k-item, and the hover state, but the background box is not as obvious to me.  Any help is appreciated.

    Thanks,

    King Wilder
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 22 Jan 2013 Link to this post

    Hello King,

    In order to customize the appearance of the Kendo UI Widgets you can inspect the HTML output with some browser inspector (for example Firebug), see what HTML elements and CSS classes are responsible for the visual appearance of the particular object and add custom CSS. For example the following CSS can be used to remove the outer box and the background of TabStrip and Menu: 
    .k-tabstrip,
    .k-menu{
        background: transparent;
        border: none;
    }
     
    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 22 Jan 2013 Link to this post

    Iliana,

    Thanks for the solution.  That did it! 

    I have been looking in Firebug and the page source at the various classes, but .k-block and .k-widget were the only classes that had background properties, so I thought I had to use those.
Back to Top