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

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

4 Answers 19 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Kenneth
Top achievements
Rank 2
Kenneth asked on 14 Oct 2016, 03:48 PM

...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)

4 Answers, 1 is accepted

Sort by
0
Kenneth
Top achievements
Rank 2
answered on 15 Oct 2016, 02:01 AM

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

 

 

0
Kenneth
Top achievements
Rank 2
answered on 15 Oct 2016, 02:24 AM

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


0
Preslav
Telerik team
answered on 19 Oct 2016, 03:01 PM
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
0
Kenneth
Top achievements
Rank 2
answered on 20 Oct 2016, 01:26 PM

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.

Tags
General Discussions
Asked by
Kenneth
Top achievements
Rank 2
Answers by
Kenneth
Top achievements
Rank 2
Preslav
Telerik team
Share this question
or