Hi;
I'm adding a custom tool ("save") to my editor. The tool works great but it looks lousy ( ^_^ ). The out of the box tool set icons are in a single .png file and I'm not familiar with how the individual icons are accessed.
Any tips on creating/adding icons for custom tools?
EDIT:
Nevermind. I implemented "Save" outside the editor.
I'm adding a custom tool ("save") to my editor. The tool works great but it looks lousy ( ^_^ ). The out of the box tool set icons are in a single .png file and I'm not familiar with how the individual icons are accessed.
Any tips on creating/adding icons for custom tools?
EDIT:
Nevermind. I implemented "Save" outside the editor.
3 Answers, 1 is accepted
0
Jesse
Top achievements
Rank 1
Rank 1
answered on 15 Jun 2012, 03:01 PM
From the documentation any custom tool can be referred to by k-toolname. So in the case of my custom tool the css reference is
.k-viewHtml
So in order to add a custom icon I used
.k-viewHtml {
background: transparent url(Styles/Default/editor.png) no-repeat 0% 50%;
}
where as the last part is the location of the image in the sprite sheet. Hope this helps
.k-viewHtml
So in order to add a custom icon I used
.k-viewHtml {
background: transparent url(Styles/Default/editor.png) no-repeat 0% 50%;
}
where as the last part is the location of the image in the sprite sheet. Hope this helps
0
David
Top achievements
Rank 1
Rank 1
answered on 16 Apr 2013, 03:21 AM
Anyone know the css tag for the hover event? I'm getting a dropdown arrow graphic when i hover. Tried tagging hover onto the end of the class name in the style but doesn't work.
0
Hello,
Dimo
the Telerik team
Jesse is right - each custom tool button has a k-toolName class applied. The letter casing is exactly as specified in the Editor's configuration.
There is no need to apply special hover state styling to to the icon, although this is possible.
Here is a simple example.
http://jsfiddle.net/dimodi/caueS/
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!