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

Issue with icons in Theme generated by ThemeBuilder

2 Answers 173 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Christopher
Top achievements
Rank 1
Christopher asked on 20 Mar 2017, 11:35 PM

I have an issue with a theme I generated using the current ThemeBuilder tool at http://demos.telerik.com/kendo-ui/themebuilder/ .  Here is what I did (please let me know if I did something wrong, as I did have to figure some steps out; the documentation is not as complete as I would have hoped). 

  1. I went to the ThemeBuilder site and generated a theme.  I started with the Default theme, and customized from there.  However, the problem happens even when making no changes to the Default theme.  You can load that up, and just hit "Download Theme" . 
  2. After downloading the "kendo.custom.zip" file, I extracted it to a subfolder. 
  3. I renamed the files so that instead of "kendo.custom.css" it was "kendo.xyz.css" (where xyz was the name I wanted).  This step is obviously not required to see the problem, but I just wanted to mention it.
  4. I am only using the .css file; we don't use LESS nor DataViz, so I assume we don't need those files at all.  Is this an incorrect assumption?  Do we need to do something with those files on top of the .css file? 
  5. I copied the "templates" folder from kendo into my project, as well as all of the images from "Default" folder, into my own "xyz" folder. 
  6. Upon opening the .css file in an editor, I noticed all the "background-image" properties were "url('none/sprite.png')" (or similar).  I mass-replaced these with the proper folder name ("xyz/sprite.png").  I also ensured all the "template" folder references were correct.  (This is one step that could use better documentation, instead of leaving to the user to figure out that his urls in the CSS don't work). 
  7. In my HTML file, I referenced the following css files, in this order:
    1. kendo.common.min.js - from my installed kendo folder (which is version 2017.1.118).
    2. kendo.xyz.css - my custom theme
  8. Upon loading a normal grid, I noticed that every place in the grid where an icon should be, the proper icon shows up overlaid on top of what looks like the up-arrow ".k-I-arrow-60-up".  So all the icons appear messed up because of this. 
  9. What's worse, for my custom theme, I wanted some of my icons to be white instead of dark grey.  I copied over the sprite.png file from the "Black" theme, gave it a new name, and had some of my icons reference that one instead.  What happened then was that the ".k-I-arrow-60-up" icon turned white, while the actual correct icon for the button remained dark grey. 
  10. I tried debugging this from within all three browsers' F12 menus, but none of them seem to see the "other" background property.  The one they do see seems to be the incorrect up-arrow one; if I disable that css, that one goes away, so I seem to have no way to reference the other one or fix it.  It's like it's hard-coded into the grid, and somehow it is hidden even from the browsers' dev tools. 

Please follow those steps and see if you see the same issue.  I would attach my files, but it would require all the folders and copies of the image files, and you already have all that.  It's easier for you to just follow the steps and then you can verify the process on your end. 

Thank you,

Chris

2 Answers, 1 is accepted

Sort by
0
Christopher
Top achievements
Rank 1
answered on 21 Mar 2017, 04:02 PM
Never mind, turns out it was some other CSS library messing it up.  When I tried this on a brand new, clean project, it worked ok. 
0
Stefan
Telerik team
answered on 22 Mar 2017, 08:33 AM
Hello Christopher,

I'm glad to hear that the issue is resolved.

Please have in mind that similar issues can occur due to custom CSS.

Also, please check the recent changes to the Kendo UI icons, as it may proove useful when modifying the appearance of the widgets:

http://docs.telerik.com/kendo-ui/backwards-compatibility/2017-backward-compatibility#changes-from-2016-r3-sp2

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Christopher
Top achievements
Rank 1
Answers by
Christopher
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or