color of k-icon k-i-close

[Bastian]

Hi,

 

we use our own bootstrap and kendo themes. All works well, but one problem: because we use a very dark accent color (default is #428bca, we use #242b46) the close icon (x) is not visible on the buttons. This happens because the x-sprite is black or a very grey dark that leads to very low contrast and quasi invisibility.

So please, how to achieve, that the x-sprite is white?

Thanks for your reply.

[Iliana Nikolova]

Hi Bastian,

Changing color in a sprite image is not supported - to achieve the expected result you should change the sprite entirely. For example, you could use the sprite from Kendo UI Black or Moonlight themes.

Regards,
Iliana Nikolova
Telerik by Progress

 

 

[Bastian]

Hello Iliana.

Thanks for your response.

I tried it the following: replacing sprite.png and sprite2.png within the local Bootstrap-folder from black-theme
Result: no remarkable result, the k-close image still is dark.

After some investigation I found out the sprite.png is loaded from a kendo cdn (http://kendo.cdn.telerik.com/2015.3.1111/styles/Bootstrap/sprite.png). The problem: there is no point, where a cdn is configured.

Leads this to another problem? Is loading from a kendo-cdn a fallback, if kendo cannot find the appropriate image within the (potentially missconfigured?) configured folder?


My bundle config within bundleconfig.cs

bundles.Add(new StyleBundle("~/Content/kendo/kendo").Include(
    "~/Content/kendo/kendo.common-bootstrap.min.css",
    "~/Content/kendo/kendo.custom.min.css"));


Layout.cshtml:
@Styles.Render( "~/Content/kendo/kendo" )

[Iliana Nikolova]

Hi Bastian,

Kendo UI ThemeBuilder generates background-image url-s from CDN-s. In order to achieve the expected result I would suggest to edit the kendo.custom.css and manually change the image URL: 

/* ... */
.k-icon,
.k-tool-icon,
.k-grouping-dropclue,
.k-drop-hint,
.k-column-menu .k-sprite,
.k-grid-mobile .k-resize-handle-inner:before,
.k-grid-mobile .k-resize-handle-inner:after,
.k-pager-numbers .k-current-page .k-link:after,
.k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view > .k-link:after,
.k-gantt-views > .k-current-view > .k-link:after {
  background-image: url('http://kendo.cdn.telerik.com/2016.3.914/styles/Black/sprite.png');
  border-color: transparent;
}

Regards,
Iliana Nikolova
Telerik by Progress

 

 

[Bastian]

Hello and thank you.

I understand. But as afraid there are side effects by using a sprite.png from another theme: the little triangle used for showing where  kendo-grids detail-template can be expanded now is white and therefor virtually invisible. But the button within multi-select now looks fine with its white 'x' ;-)

I guess I must maintain my own version of sprite.png and deliver it via an own 'cdn' or an appropriate way to handle local files within css. However, is there any documentaion which of the 4 'x' (I found after a short look) within sprite.png must be changed to only effect multi-select?

Sincerly

[Iliana Nikolova]

Hi Bastian,

The following CSS rule can be used to change only the MultiSelect buttons icons: 

.k-multiselect .k-i-close {
     background-image: url('/* ... */');
     background-position: 0 0;
}

Regards,
Iliana Nikolova
Telerik by Progress

 

 

[Bastian]

Thank you, I will give it a try.

And there is no documentation for sprite.png which symbol is used where?

[Iliana Nikolova]

Hi Bastian,

You could find a list with the sprite icons in the following documentation page:

http://demos.telerik.com/kendo-ui/styling/icons 

Regards,
Iliana Nikolova
Telerik by Progress

 

 

[Bastian]

Hello Iliana,

thank you. I marked the thread as answered. Currently I cannot further check ist, but it should work.

 

Bye (for this time)