kendo classes and corresponding images or sprites ?

20 posts, 0 answers
  1. RichardAD
    RichardAD avatar
    105 posts
    Member since:
    Feb 2012

    Posted 10 Apr 2012 Link to this post

    Is there a document that shows all the k-* classes and their corresponding sprites?

    Thanks
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 10 Apr 2012 Link to this post

    Hello Richard,

    To begin with, I recommend you to take a look at the Appearance and Styling help article (if you haven't already done so), which outlines the most important CSS classes used across the Kendo widgets.

    With regard to icon CSS classes and sprite images, we have no explicit documentation, as tweaking sprites and modifying corresponding styles is generally for front-end developers that are already familiar with the theory and can quickly find what they need. However, if you need to know more about the sprites and styles, you can use the following information:

    kendo.common.css - line numbers, widgets and sprite images:

    205 - 257 : various icons (sprite.png)
    2297 - 2313 : Editor icons (sprite.png)
    2646 - 2688 : Slider ticks (slider-h.gif and slider-v.gif)
    2808 - 2860 : Tooltip callouts (sprite.png)
    2995 - 3005 : Splitter icons (sprite.png)
    3099 - 3111 : Upload icons (sprite.png)

    If you need more information, please explain what are you trying to do, so that I can provide more relevant advice. If needed, I can send you a specified theme's sprite PSD file with layers and guides, so that you can easily see which icon goes where and replace only what you want.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Andrew
    Andrew avatar
    34 posts
    Member since:
    Dec 2010

    Posted 15 Apr 2012 Link to this post

    Right now I'm having to discover the icons by reverse engineering - scanning the CSS files and visually scanning the sprite.png images.

    I don't understand why telerik doesn't just put up a page displaying all of the sprite images and their corresponding CSS classes. 


  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 16 Apr 2012 Link to this post

    Hi all,

    Everybody, which is interested in this topic, please describe the most common scenarios in which you need to modify sprite-related CSS code and images, so that we know how to structure the documentation to be of greatest benefit. For example, do you modify only a couple of images or all of them, do you modify images of one widget or all widgets, do you create custom sprites or use a combination of the built-in sprites and custom standalone icons, etc.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 16 Apr 2012 Link to this post

    Hi Dimo,
    In my case, sometimes I only want to change a couple of images. For example, I want to use a trash can image instead of a cross icon for deleting records in a grid, as I use a cross image exclusively for closing windows. Kendo uses the same cross icon for both closing windows and deleting records in a grid.
    Sometimes, I need to change the color of all of them (e.g white) or putting them within a circle.

    Regards.

    P.S. It would be nice if you provided a "metro style/android trash can icon".
  7. RichardAD
    RichardAD avatar
    105 posts
    Member since:
    Feb 2012

    Posted 16 Apr 2012 Link to this post

    The cases for a listing of the k- classes with corresponding sprites are:
    1. Complete documentation
    2. Help determine if I could reuse a k- class for some custom visual feedback during certain drag and drop operations.
  8. C
    C avatar
    6 posts
    Member since:
    Jun 2012

    Posted 18 May 2012 Link to this post

    I had this very same need. Thus after digging into the CSS file for all classes with a background-position, I came up with a little over 60. I went ahead and created an example that references these sprite icons. I skipped some of the slider icons and a few others that seemed less likely to be used.

    Enjoy

    http://jsfiddle.net/csdietrich/LVVPH/
  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 18 May 2012 Link to this post

    Hello C,

    Thanks for sharing. I am awarding you some Telerik points for that.

    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Jeremy
    Jeremy avatar
    3 posts
    Member since:
    Mar 2012

    Posted 23 May 2012 Link to this post

    You rock, C. Thank you so much.
  11. Sean McLellan
    Sean McLellan avatar
    4 posts
    Member since:
    Feb 2010

    Posted 03 Sep 2012 Link to this post

    This is horrible

    there isn't a corresponding sheet such as http://twitter.github.com/bootstrap/base-css.html#icons that makes this absolutely easy?! 

    C's post is nice... but it doesn't include 'spriteCssClass' entries (pdf, image, folder, rootFolder, etc...)
     
  12. Calvin
    Calvin avatar
    42 posts
    Member since:
    Jul 2011

    Posted 20 Mar 2013 Link to this post

    Here's an update to csdietrich's fiddle for v2013.1.319

    http://jsfiddle.net/calvindale/NJdjU/1/
  13. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Mar 2013 Link to this post

    Hello,

    You can also refer to:

    http://demos.kendoui.com/web/styling/icons.html

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Robert
    Robert avatar
    5 posts
    Member since:
    Jul 2013

    Posted 14 Jul 2013 Link to this post

    Hi Everyone,

    I'm new to Kendo, but I've been at it every waking moment for about a week. I'm amazed that this one package (in combination with JQuery) has everything I need to build an amazing web application.

    I also think it's awesome that Kendo provides an extensive list of sprite icons we can use in our applications. That, combined with the theme support will really help produce a consistent, professional look. Unfortunately, not all of the icons I need are in included. For example, there's no question mark (?) icon for my tooltips.

    Does anyone know if anyone has extended the available icons and is selling them? They would have to be consistent with the ones Kendo provides, or be "close enough". Or does anyone know if there's a tutorial anywhere on adding additional Kendo icons?

    Thank you,

    Robert
  15. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 15 Jul 2013 Link to this post

    Hi Robert,

    Thank you for your kind words.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Simon
    Simon avatar
    159 posts
    Member since:
    Sep 2010

    Posted 17 Dec 2014 in reply to Dimo Link to this post

    Hello,

    Sorry to bump this tread but is there any update regarding the icons document?

    Sure, kendo has a styling example but it's many icons are not listed there.  Calvin example has more icons but some are still missing (like the k-i-sort-asc and k-i-sort-desc).

    Kendo's staff took some time to make a lot of great icons so I think it's unfortunate that we can't use all of them just because we don't know they exist.  A simple official list or an up-to-date sample would take only few minutes to do but it would benefit to every developers.

    Regards,

    Simon




  17. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Dec 2014 Link to this post

    Hi Simon,

    The Styling / Icons demo has been updated.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  18. Hillary
    Hillary avatar
    1 posts
    Member since:
    Jul 2016

    Posted 19 Sep in reply to Oscar Link to this post

    how do you make the icons in white instead of black?
  19. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Sep Link to this post

    Hi Hillary,

    Currently, this can be achieved only with a custom sprite image, or a custom background image for a specific icon CSS class.

    In the future, when we drop legacy browser support and switch to font icons, the icon color will be changed a lot more easily. However, I am not able to provide a time frame for that.

    Regards,
    Dimo
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  20. gregory
    gregory avatar
    6 posts
    Member since:
    Jun 2006

    Posted 29 Sep Link to this post

    I actually agree that there is a need for Telerik to provide more documentation on these images and classes (k-alt, etc). I've been doing design and programming for 20 years, and I am very conscious about design- indeed- that is what attracted me to Kendo in the first place! My users can choose their own 'skin' (theme), and the controls are rich. Now, I want to reuse them so I will continue to let my users choose their own 'skin'. I am not going to design custom images that match each them, but I would like to reuse the stuff that Telerik developers use. I get that if you show stuff, it may get stolen, but even so, those who use it for free and are extending off of your own classes and themes, and if they spend that much time working with the innards of your project, they will come to you anyway one would think. 
  21. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 29 Sep Link to this post

    Hi all,

    This discussion started before the following two resources existed. Now the sprite icons and their CSS classes are demonstrated in the following example:

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

    The font icons are showcased on the following documentation page:

    http://docs.telerik.com/kendo-ui/styles-and-layout/icons-web

    The exact background position styles, and the exact pseudo-element content styles, these can be seen in the browser's DOM inspector. This will also reveal the specificity that is used, so that a developer can use a higher one, if overriding is necessary.

    Regards,
    Dimo
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top
Kendo UI is VS 2017 Ready