0

Is there any way I can change the arrow icon color in the Kendo Panelbar widget? I have changed the colors of the elements within the panelbar and the arrows need more contrast. I need them to be white instead of dark grey. I have used google developer tools and I think I have isolated the css. I tried to style it like below:

.k-icon.k-i-arrow-s.k-panelbar-expand {color:#FFF!important;}

I'm not a big fan of using !important, but with Kendo it seems to be the way to go, lest I put the styles inline in the index.html file.

Anyway, it is not changing the colour of the arrow icons on the panelbar. Does anyone have any suggestions?

UPDATE: Ok, I have just been informed that I'm trying to style an image file with css which is not going to get me anywhere. But I can't find the offending icon file.

Ryan Coolwebs
  • 1,611
  • 5
  • 22
  • 44
  • 1
    The arrow is part of an image so you cannot change it using `color`. You might try something as explained in [Change color of PNG image via CSS?](http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css) – OnaBai Jul 07 '14 at 09:21
  • Wow! It's actually an image? I had no idea. I just assumed it was an SVG icon as they are so popular and easy to implement these days. I think it is the sprite.png file. I did try and change the icon colors but it did not work. – Ryan Coolwebs Jul 07 '14 at 09:50
  • WTF, I just went through all my icon files looking for the image file. I even deleted all icon files and the grey arrows are still present on the panelbars. Is this icon loaded remotely or something? Since I am using a web widget rather than a dedicated mobile one. – Ryan Coolwebs Jul 07 '14 at 09:57
  • @OnaBai, it's not actually an image at all, it is the kendoui.ttf file. So it is technically a font file and I should be able to style it. – Ryan Coolwebs Jul 07 '14 at 10:22
  • maybe it depends on the browser but if I go to http://demos.telerik.com/kendo-ui/panelbar/index and open Chrome developer tools and inspect it, I see that it is defined in "Default/sprite.png"... What are you using? – OnaBai Jul 07 '14 at 10:25
  • Hmmm I am using chrome dev tools too and all i can see is k-icon k-i-arrow-n k-panelbar-collapse selector for the arrow icon. I will attach screenshot – Ryan Coolwebs Jul 07 '14 at 10:33
  • Sorry, i think you are right, i can see background-image: url('Default/sprite.png'); too. So many icon types flying around this framework – Ryan Coolwebs Jul 07 '14 at 10:38

1 Answers1

1

Thanks for the help @OnaBai. I was running my app through Cordova and terminal and some files were not being updated properly and I was being pointed in the wrong direction. After closer inspection using the Chrome dev tools I confirmed that the issue was the sprite.png file all along.

So to change panelbar arrow icon, I need to edit the sprite.png and sprite_2x.png files.

I just had to change just about every arrow I could find there to white until I selected the correct one. I'm not even sure why Kendo has used some fonts as icons and the sprite.png file for others.

Ryan Coolwebs
  • 1,611
  • 5
  • 22
  • 44