CSS Styling of widgets

[King Wilder]

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

[Iliana Dyankova]

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

[King Wilder]

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.