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

Format for custom icons

5 Answers 270 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Anker Berg-Sonne
Top achievements
Rank 1
Anker Berg-Sonne asked on 27 Apr 2012, 06:03 PM
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

5 Answers, 1 is accepted

Sort by
0
Anker Berg-Sonne
Top achievements
Rank 1
answered on 30 Apr 2012, 03:36 PM
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
0
Saurabh
Top achievements
Rank 1
answered on 01 May 2012, 10:52 PM
I am also looking for the answer. Please find my project attached. My custom image (also attached separately) is not working.
0
Kamen Bundev
Telerik team
answered on 02 May 2012, 09:53 AM
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!
0
Anker Berg-Sonne
Top achievements
Rank 1
answered on 04 May 2012, 08:33 PM
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
0
Kamen Bundev
Telerik team
answered on 07 May 2012, 08:04 AM
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!
Tags
TabStrip (Mobile)
Asked by
Anker Berg-Sonne
Top achievements
Rank 1
Answers by
Anker Berg-Sonne
Top achievements
Rank 1
Saurabh
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or