Nova theme km-light on navbar hides title and button icons

5 posts, 0 answers
  1. Kenneth
    Kenneth avatar
    101 posts
    Member since:
    Apr 2014

    Posted 14 Oct Link to this post

    ...because the title text is white as are the button icons in the navbar.

    so how do I get the nova km-light theme to apply to title test and button icons in a navbar?

    The docs just show the km-light applied to the navbar and it should all just work...

    <header data-role="header">

        <div data-role="navbar" class="km-light">

        </div>

    </header>

    also this does not work for me:

    <div data-role="navbar" style="background-color: green">My View Title</div>

    navbar stays km-dark (default)

  2. Kenneth
    Kenneth avatar
    101 posts
    Member since:
    Apr 2014

    Posted 14 Oct in reply to Kenneth Link to this post

    I inspected the CSS using F12 and found that the km-light class does override the km-view-title color however for some reason the color: #ffffff remains.  If I uncheck the overridden white color the red nova light color then shows for the text as it should.  Very strange.

    before shows the error, after shows when I uncheck the overridden white color, and viola, the text appears.

    before

    after

     

     

  3. Kenneth
    Kenneth avatar
    101 posts
    Member since:
    Apr 2014

    Posted 14 Oct in reply to Kenneth Link to this post

    This edit in overrides.css 

    /*.km-nova .km-navbar *, */
     .km-nova .k-toolbar *,
     .km-nova .km-navbar
    .km-leftitem .km-back:before,
     .km-nova .km-tabstrip *,
     .km-nova .km-drawer .km-list > li,
     .km-nova .km-drawer .km-list > li > .km-listview-link,
     .km-nova .km-drawer .km-list > li .km-icon
    {color: #ffffff;}

    fixes it except in the case where I use one of the special (no included) icons


  4. Preslav
    Admin
    Preslav avatar
    51 posts

    Posted 19 Oct Link to this post

    Hello Kenneth,

    From your post, I understand that the CSS code that you provided does not change the color of the Kendo UI additional hybrid fond icons. Is that correct?

    Following your approach, I was able to change the color of those icons, after inspecting the CSS using the Debugger. The code that I used is:
    .km-nova .km-accent.km-navbar,
    .km-nova .km-accent.k-toolbar,
    .km-nova .km-accent.km-tabstrip,
    .km-nova .km-accent.km-navbar .km-back:before,
    .km-nova .km-accent.k-toolbar .km-back:before,
    .km-nova .km-accent.km-navbar .km-button {
        color: #00acc1;
    }

    Let me know if this helps.

    Regards,
    Preslav
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Kenneth
    Kenneth avatar
    101 posts
    Member since:
    Apr 2014

    Posted 20 Oct in reply to Preslav Link to this post

    By commenting out the portion of the CSS as indicated in my post the km-light class works as expected, that is, displays red text on a white background.

    With the portion not commented out km-light displays white text on  a white background.

    Again, this is when the km-light class is applied to a NavBar.

Back to Top