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
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
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
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
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
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
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
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
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!