color of k-icon k-i-close

9 posts, 1 answers
  1. Bastian
    Bastian avatar
    9 posts
    Member since:
    May 2014

    Posted 29 Sep Link to this post

    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.

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 30 Sep Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Bastian
    Bastian avatar
    9 posts
    Member since:
    May 2014

    Posted 04 Oct in reply to Iliana Nikolova Link to this post

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

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 06 Oct Link to this post

    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.
     
  6. Bastian
    Bastian avatar
    9 posts
    Member since:
    May 2014

    Posted 07 Oct in reply to Iliana Nikolova Link to this post

    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
  7. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 10 Oct Link to this post

    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.
     
  8. Bastian
    Bastian avatar
    9 posts
    Member since:
    May 2014

    Posted 14 Oct in reply to Iliana Nikolova Link to this post

    Thank you, I will give it a try.

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

  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 18 Oct Link to this post

    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.
     
  10. Bastian
    Bastian avatar
    9 posts
    Member since:
    May 2014

    Posted 27 Oct in reply to Iliana Nikolova Link to this post

    Hello Iliana,

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

     

    Bye (for this time)

Back to Top
Kendo UI is VS 2017 Ready