Ok, so what is the deal with the Progress/Telerik Theme builder? My hopes was that it would skin the kendo controls so I wouldn't have to mess (much) with the CSS, and to possibly have multiple color versions.
The problem is, it seems there are two, both have issues but the "newer" one seems to have less functionality.
There is this: http://themebuilder.telerik.com (The "newer" builder)
But this "newer" builder just seems to ignore some controls. For example, the Grid's hover feature seems to be ignored, and colorization seems to have no effect on the grid (for example, selecting a row).
I guess more granularized options are out of the question? If I have to add more css AFTER using the theme builder, why am I using the theme builder?
I tried the Bootstrap4 version, but it has weird issues as well. things like headers are out of alignment or just completely malformed. I thought maybe it was because I didn't have Bootstrap4 setup in my project, but that didn't seem to help either!
Then there is this: https://demos.telerik.com/kendo-ui/themebuilder
This one seems to be more complete but has it's issues too. This one seems to work better than the "Progress Sass" version, but I'm worried it is going to disappear because of the "newer", "better" Progress Theme Builder.
Can someone explain/clarify?
Thanks!
11 Answers, 1 is accepted
Rank 1
I think it's a general problem of telerik. since they have been taken over from progress in my opinion the quality went down. they have too many irons in the fire but do not finish properly what they have started. i also asked a while ago about the theme builder, they said they will focus on extend the new themebuilder.. nothing happended.
i'm also very disappointed with the .net core version. we have migrated from the asp.net mvc 5 version to the asp.net core version, we used the document processing libraries. they haven't been migrated yet to .net core (and it doesn't seem that they will do it any time soon) so we had to buy other libraries (and rewrite a lot of code due different api).
Also if you look at the roadmap:
https://www.telerik.com/support/whats-new/aspnet-core-ui/roadmap
https://www.telerik.com/support/whats-new/kendo-ui/roadmap
they are bringing again new features (Conversational UI, Material Theme,... ) instead of focusing on existing features that are not fully finished.
Rank 2
Thanks Valar, I agree, since Progress bought out Telerik, I've seen the changes as well. But I was hoping someone at Progress/Telerik would respond, and hopefully respond with something more than the "standard line" about how they prioritize changes. We all get that, but leaving functionality half-done is just terrible. I'd even settle for them telling me they have no plans to finish it, or at least make is useable, then, I could at least not bother with it anymore.
Greg
The story of the themebuilders is a long one. You could say it has a prologue and 4 chapters: initial concept, Telerik Visual Style Builder, KendoUI Less ThemeBuilder, ThemeBuilder for Asp.Net Ajax and, finally, Progress Sass ThemeBuilder.
Initial concept (for RadControls; deprecated, not available online)
The first iteration had fairly simple interface that was basically a colorization slider that allowed to change the hue, brightness and saturation of existing themes. Since the themes were image-heavy, that was quite easy. We also replaced all the instances of a given color in the entire theme.
There were many limitations. For instance white, grey and black can not be customized regardless how you move the hue slider. Or at times you wouldn't want to change all instances of a given color, just some...
Telerik Visual StyleBuilder (for RadControls; deprecated, available at http://stylebuilder.telerik.com/)
Visual Style builder added much needed features, such as fine tuning individual components on many levels. Say a button would have 3 states (normal, hover, active). Actually a component has as many levels of customization as the developers implemented. And that was one of the biggest drawbacks: each and every such state had to be described rigorously. There were some other limitations, like if you've changed something in a given component, you couldn't reuse that in another and had to do things manually, again.
And because we were still relying on images, changing the border radius, or shadow, was quite hard.
It should be noted that there were no variables involved -- Visual Style Builder was performing text replacement.
KendoUI Less ThemeBuilder (for KendoUI; available at https://demos.telerik.com/kendo-ui/themebuilder/)
Initially, KendoUI themes were built in the browser using less.js. That gave us the opportunity to modify the themes runtime or during page load, to be precise. The entire ThemeBuilder was a javascript snippet that developers could include on their page or use a bookmarklet and customize the theme. Then, they would have the option to download the customize theme and use in production.
Using less allowed us to use variables, inheritance, mixins etc and have a more precise customization of appearance. While we do use myriad of variables, we only expose few for easier and straightforward customization.
ThemeBuilder for Asp.Net Ajax (for RadControls; superseded by Progress Sass Themebuilder)
Prior the release of MetroTouch skin for UI for Asp.Net Ajax (called RadControls at the time), we decided to build the entire theme on sass. Shortly after, we migrated all themes to sass. Just using a pre-processor didn't yield any significant benefit, but combined with lightweight render mode it opened the door for proper themebuilder. The initial prototype allowed huge customization. If I recall correctly, we exposed most variables. During the focus group tests, customers were overwhelmed and confused and not really sure how to customize components. Based on the feedback, we gradually reduced the number of variables to a more reasonable and comprehensible set.
Progress Sass ThemeBuilder (for all web components; available at http://themebuilder.telerik.com/)
When we decided to switch to sass for KendoUI, it was only natural that we extended the aforementioned themebuilder to build themes for either KendoUI (all flavours) or UI for Asp.Net Ajax. Actually, "extended" is a bit of understatement, as we changed things a great deal.
That being said, the amount of variables is what we considered to be the bare minimum, not the absolute maximum.
Something completely new is the ability to choose form swatches.
---
The above was to illustrate how the idea evolved overtime. We also do not consider ThemeBuilder to be complete and will continue to improve it. But for that we need feedback, which bring us to the first post in the thread.
Hover state of grid
The reason why you can not customize the hover row in the grid is that we did not include styles for that. ThemeBuilder works with what's available and looking at the source files (https://github.com/telerik/kendo-themes/blob/develop/packages/default/scss/grid/_theme.scss) that particular bit is not in the theme. I created an issue (https://github.com/telerik/kendo-themes/issues/134) and we'll add it.
Note: since each theme follows a different logic in variable reuse, customizing the hover state of grid will happen in different manner. For default theme it would be a slight darken (or lighten) of the underlying background, where as in bootstrap theme, the hover state is based on the current color of the grid row. If you do not like how the color looks, you can further customize it by changing the appropriate variable and compiling the theme.
On customization
Any reasonable customization should be achievable with variables only i.e. no additional CSS rules. If you find something that can not be easily customized or is counter intuitive, you canand should ask us. If you believe that a given behaviour is wrong or a bug, do file an issue in the kendo-themes repository.
We also would like to allow for more granual customization in themebuilder, but that will have to wait for now. Your requrest is never the less noted. As more customers request a given feature, we will deliver on that feature.
---
Since it's a longish reply, I understand I may have strayed from the original questions you asked. If that's the case, I can further clarify. Just point me in the right direction.
And finally, though I've already mentioned it a couple of times, feedback and discussions are important to us because they tell us what is important to you. There are countless exmamples of features / improvements that wouldn't be there if it wasn't for feedback.
Regards,
Ivan Zhekov
Progress Telerik
Rank 2
Ivan,
Thank you very much for your detailed and rather verbose response! :)
I've been a Telerik customer for a very long time. Only Job changes have caused the forums to show me a member since "Jun 2017". I remember one of the iterations of the theme builder that was so overwhelmingly fraught with options that it was too confusing to use.
That said, I also remember, back in the RadControls days, of what you guys USED to do with your controls. Optimization and customization was quite easy, and satisfied probably 95% of the developers out there. But those old controls let you dig down into the guts of the controls for pin-point customization when you needed it.
These days, that kind of granularity in the controls themselves is not really necessary, but I would think it could be used as a lesson for the theme builder. That said, here's what I had hoped for from the theme builder...
- When I set colorization/shading on a theme, it effects ALL controls. That did not happen with the grid, specifically the hovering. In fact, the hovering was just not there at all (which is worse). I suspect there are other controls that have this issue as well.
- While the current level of customization takes care of almost all of the customization, give me a second level of granularity. Something that lets me alter specific controls (when needed), including fonts. While this functionality is not required to build a theme, it let's me do additional customization when the main level doesn't quite do the trick on a certain control especially in regards to foreground and background colors.
- I'm not sure you've noticed, but the theme builder has a tendency to look good on 5 controls, but perhaps 2 other controls don't look quite right (or at least, not as good).
#2 comes into play for me when I create a theme... get it close, then try to create themes based on my original theme but use different primary colors. I have applications that have different pages that work very much the same way, but work with different data. Changing the colors goes a long way to help the user differentiate between them.
The bottom line here for me (and has always been) with Telerik controls is when using custom theming, having to do any manual alteration to the theme is self defeating... usually because of new versions of the controls that cause the addition of new CSS rules or alter existing rules. It's a pain to have to re-do the theme(s) and then redo the alterations.
I don't mind having to redo the themes in the builder, as I can save the values, and just plug them in again. It's the manual stuff that makes it not worth it.
Anyway, that's my two cents. I'm sure there are some that don't agree, but hey, if everyone agreed with me, life would be boring! :)
Thanks, Greg
you do make an interesting point. While the Grid not having hover is a bug and logged, the precise customization part makes perfect sense. We've also been pondering on ideas how to show which color customizes which component, or to pick variable names that would be pretty much self explanatory.
One thing on the customzation of previous components, namely UI for ASP.Net Ajax... truth is the DevTeam at Microsoft created a huge opportunity for customization. Almost each and every part of the screen was inheriting from a base component (at time a base control) that had the various customization. We simply inherited it (like literally).
Now back to your suggestion: what would you say would be a good addon to ThemeBuilder? You already mentioned controlling the font, but apart from that, would there be anything else you would like to do? Also, how do you envision the precise (advanced) customization -- like a toggle switch thingie that lets you jump between the two modes; or like a setting that you choose when you start with the theme; or like a final step prior downloading the theme? Some customers want to be able to control border radius? What else do you think would be a good fit?
Regards,
Ivan Zhekov
Progress Telerik
Rank 2
Ivan,
I wouldn't want the customization to get too crazy, otherwise you'd be back to "confusing"! :)
What I was thinking was something like this...
- Add a font setting to the current customization.
- The ability to click on (or select) a specific control, which would have the SAME customizations (inherited from the current customization). That way, if I need to "nudge" the colors on a particular control, I could do that in the theme builder.
If the same customization that you currently have (including a font selection, of course) was at the control level, I think it would give us the flexibility we need, without the "confusion".
One last thing I would like to know, because I've never seen anything regarding the subject. When you guys add new functionality to controls or add new controls, we usually have to "redo" the themes. What is your position on this? Should we as developers, by default, "redo" the themes with every new version?
Finally, I realize these changes sound simple, I know they are not, but I think it would go a long way to making the theme builder... eh... more attractive! :) (pun intended!).
Thanks, Greg
For your other question, let mi illustrate whit an example: the entire conversation started, because there is no way to customize the hovered rows of the grid. Actually, there are no such styles. So when we add the styles, the hovered background will be linked to the grid background so the whole thing looks OK. Since this is a new piece of code it works with your existing styles and there is nothing to change in your theme. If we want to allow customers to fine tune that particular property, we'll add a new variable that will have the same value. So from a customer perspective, if one wants to use the default values, nothing will change. In all other cases, one will have to recompile the theme.
In other words, no, you will not have to redo the theme, just recompile it.
Regards,
Ivan Zhekov
Progress Telerik
Rank 1
Darrin,
quick question: are you talking about the Sass theme builder, or Less themebuilder? We are aware of some scrolling issues with Less theme builder, but not with the sass one.
Regards,
Ivan Zhekov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Darrin,
I am attaching a screenshot:
- one side it shows chrome (which should be equivalent to the new Edge)
- on the other is the classic edge
While indeed the scrollbar is not visible (it's hidden) for the gray area, where the color pickers are, the area is still scrollable, as long as you have scroll wheel on your mouse or the mouse / trackpad support gestures.
I tested in both browsers using a mouse with scrollwheel, mouse with gestures, and trackpad and they all scroll the area.
If you have a mouse / trackpad that has a scrollwheel or gesture support, can you try scrolling the gray are using that scrollwheel / gestures?
In hindsight, when we designed the themebuilder we didn't consider the fact that there might be users who dont have pointing device (mouse, trackpad) without a scroll wheel or gesture support. That's why we hid it. And it also made the themebuilder more aesthetically pleasing, because there is only a single scrollbar and not multiple.
Note: the same scrollbar-les approach is applied to the swatches pane -- the scrollbar is hidden, but the pane is scrollable.
Regards,
Ivan Zhekov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.