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

color of k-icon k-i-close

8 Answers 653 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Bastian
Top achievements
Rank 1
Bastian asked on 29 Sep 2016, 09:51 AM

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.

8 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 30 Sep 2016, 12:32 PM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Bastian
Top achievements
Rank 1
answered on 04 Oct 2016, 10:44 AM

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

0
Iliana Nikolova
Telerik team
answered on 06 Oct 2016, 11:56 AM
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 {
  border-color: transparent;
}


Regards,
Iliana Nikolova
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Bastian
Top achievements
Rank 1
answered on 07 Oct 2016, 06:12 AM
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
0
Accepted
Iliana Nikolova
Telerik team
answered on 10 Oct 2016, 03:19 PM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Bastian
Top achievements
Rank 1
answered on 14 Oct 2016, 08:53 AM

Thank you, I will give it a try.

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

0
Iliana Nikolova
Telerik team
answered on 18 Oct 2016, 06:42 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Bastian
Top achievements
Rank 1
answered on 27 Oct 2016, 11:44 AM

Hello Iliana,

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

 

Bye (for this time)

Tags
MultiSelect
Asked by
Bastian
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Bastian
Top achievements
Rank 1
Share this question
or