Format for custom icons

6 posts, 0 answers
  1. Anker Berg-Sonne
    Anker Berg-Sonne avatar
    37 posts
    Member since:
    Sep 2009

    Posted 27 Apr 2012 Link to this post

    What is the required format for custom tabstrip icons? White on black, black on white, white on transparent, black on transparent or something different? I see the example uses a jpg, so transparently is apparently out.

    I just can't get my custom icons to show up at all. It would be super helpful if someone could point me at a working example.

    Thanks/Anker
  2. Anker Berg-Sonne
    Anker Berg-Sonne avatar
    37 posts
    Member since:
    Sep 2009

    Posted 30 Apr 2012 Link to this post

    Hey,

    I'm really anxious to get my tab strip working and will appreciate if someone would help me out. One possible way is to post an icon that works so I can see how it is composed.

    I'm very puzzled by some of the stuff I see, For example, the documentation example uses a jpeg, but a response in the forum says that transparency settings are critical. Since jpegs don't have transparency, it just doesn't make sense to me.

    Thanks/ANker
  3. Kendo UI is VS 2017 Ready
  4. Saurabh
    Saurabh avatar
    10 posts
    Member since:
    Mar 2012

    Posted 01 May 2012 Link to this post

    I am also looking for the answer. Please find my project attached. My custom image (also attached separately) is not working.
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 02 May 2012 Link to this post

    Hi,

    Guys, check this thread for more information about the icons, I will get the documentation updated since it is listing just how to set a background image for the icon. The default icons are specified with -webkit-mask-box-image (and dataURI, but this is not mandatory) and are PNG-8/24 images with alpha transparency. Since PNG-8 with alpha can be only made with Adobe Fireworks or a special commercial plugin for Photoshop, I would recommend using PNG-24. The transparency level defines the mask (icon), so the non-transparent areas will get colorized and vice versa.

    @Saurabh: Your PNG image is not transparent and using the above method will be rendered as a colorized square.

    Regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Anker Berg-Sonne
    Anker Berg-Sonne avatar
    37 posts
    Member since:
    Sep 2009

    Posted 04 May 2012 Link to this post

    I am going crazy trying to get this to work.

    I created an icon just using alpha transparency and saved it as a png24 with transparence, and it still doesn't show.

    Attached is my example.

    Anker
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 07 May 2012 Link to this post

    Hi Anker,

    This rule will render your icon:
    .km-login {
        -webkit-mask-box-image: url("Test.png");
    }


    Background-image gets overridden by the icon gradient, if you want to use it, you will need to rise the specificity, like this:
    .km-root .km-tabstrip .km-icon.km-login {
        background-image: url("Test.png");
    }

    however, you will lose the colors this way.

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready