Menu not listed in Blazor theme builder?

5 posts, 0 answers
  1. BitShift
    BitShift avatar
    139 posts
    Member since:
    Aug 2014

    Posted 24 Oct 2019 Link to this post

    I don't see it listed in the Blazor themebuilder, am I missing something?  

    https://themebuilder.telerik.com/blazor-ui

     

     

  2. BitShift
    BitShift avatar
    139 posts
    Member since:
    Aug 2014

    Posted 24 Oct 2019 Link to this post

    How can I override the the colors of the bootstrap styles for the menu component, regarding the background color?
  3. BitShift
    BitShift avatar
    139 posts
    Member since:
    Aug 2014

    Posted 24 Oct 2019 Link to this post

    looking at a dev console, its the
    .k-menu:not(.k-context-menu) 

    style that is what I want to change.

    By default, with the bootstrap theme, it is background: #f8f9fa; but I want #ffffff

  4. BitShift
    BitShift avatar
    139 posts
    Member since:
    Aug 2014

    Posted 24 Oct 2019 Link to this post

    Only way I can seem to do it now, is to override this value in my own css file

    eg.

    .k-menu:not(.k-context-menu) {<br>    background-color:#ffffff;<br>}
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5065 posts

    Posted 25 Oct 2019 Link to this post

    Hello,

    We are working on adding an example of the menu in the theme builder. It will be available as soon as possible.

    The general concept of themes is that all components follow the same theme (that is, color scheme), so changing the colors once styles all components without extra effort.

    If you want to alter a single component only, the correct way is, as you have found, to inspect the rendered HTML, review the current classes, structure and CSS rules, and to devise your own that override the built-in ones. You need to create an entire theme if you want to affect all (or most) components.

    For example, if you want to change the main background of the main element, here's how you could do this - this example showcases targeting a particular instance through a specific class as well

     

    <style>
        .specialMenu .k-menu:not(.k-context-menu) {
            background-color:red;
        }
    </style>
    
    <TelerikMenu Data="@MenuItems">
    </TelerikMenu>
    <div class="specialMenu">
        <TelerikMenu Data="@MenuItems">
        </TelerikMenu>
    </div>

     

     

    Regards,
    Marin Bratanov
    Progress Telerik

     UI for Blazor
Back to Top