CODEWITHSUNDEEP
kendo-ui
user2206329
user2206329

Reputation: 2842

how do I customise the default kendoui menu?

I have implemented the default kendo menu using MVC. how do I change the colour and the look of it? is there any helpful links? or any documentation? I know its all Css. I just need to know what the css is any help would greatly be appreciated.

Thanks

Upvotes: 0

Views: 8759

Answers (1)

Shion
Shion

Reputation: 1499

There are some official documents.

See this link if you are generally interested in how kendo UI can be customized.

And here, you can even style on the go what you like, and export the styles ass CSS or LESS. Alternatively you can also include the ThemeBuilder on your site! See the 3-point instructions guide on the site.

3. Use the ThemeBuilder as a bookmarklet on your own pages! (Drag the button to your bookmarks bar)

EDIT:

Since you are wondering how to style the elements themselves, inspect the menu through a tool like firebug. You would then see the structure of the menu, and can style the classes individually. For example, the menu in this link, contains of the following html:

<ul id="menu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" tabindex="0" role="menubar">
    <!-- snip -->
    <li class="k-item k-state-default" role="menuitem">
        <span class="k-link">
            Blog
        </span>
   </li>
   <!-- snip -->
</ul>

You could then for example style the following:

.k-menu .k-item {
    min-width: 140px;
}

EDIT 2:

To change the menu in the way that only the menu-items are colored, use the following definitions:

.k-menu.k-header {
    background-image: none;
    background-color: none;
}
.k-menu .k-item {
    background-color: red;
}

Upvotes: 2

Related Questions