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

CSS Styling of widgets

2 Answers 106 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
King Wilder
Top achievements
Rank 2
King Wilder asked on 20 Jan 2013, 07:21 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 22 Jan 2013, 05:11 PM
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!
0
King Wilder
Top achievements
Rank 2
answered on 22 Jan 2013, 05:57 PM
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.
Tags
General Discussions
Asked by
King Wilder
Top achievements
Rank 2
Answers by
Iliana Nikolova
Telerik team
King Wilder
Top achievements
Rank 2
Share this question
or