Visual Style Builder is Awesome!

[Steve]

The Telerik Suite of tools is just plain Awesome, but now with the ability for a programmer to be able to also easily tweek the look and feel of the controls without having to know all that CSS crap is just genious.  I will be using the VSB as soon is it is made available in the control suite.  Thank you Telerik for making my job easier!

Steve

[Alex Gyoshev]

Hello Steve ,

Glad you like it! If you have any ideas on how to improve it and make your life even easier, please let us know.

All the best,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[-DJ-]

Hi guys,

The Colorize option doesn't seem to work at all if you select some other skin than Simple to start from, at least I can't get any changes applied. /* Edit */ It works sometimes and sometimes not, depending on the skin and the control. Default skin for panelbar doesn't work for example. /* Edit Ends */

But when using the Simple skin it's a nifty function.

A few random notes, written as I test (testing with the Panelbar):

1. If you select a background image, it works perfectly for all states of the top level items, the hovered background position is obviously preset to the skin, so if you have edited an existing skin image it aligns correctly. But I would still like to have the option to edit the background position. I tried inserting px value in the position fields but it doesn't work.
2. In fact, as it is now VSB feels limited. If we continue with the panelbar, you cannot edit the border around the control itself for example.
3. I would also like to be able to edit a hex value directly into the colorpicker, selecting one of the preselected colours is too limited for my taste.
4. What about an option to edit the css directly? At your own risk of course.
5. Clicking on the transparent option in the colorpicker doesn't work (at least for borders).
6. I would like to see an option setting all borders at once instead of having to edit each side individually.
7. Well, changing the border colours doesn't work at all. It has no effect when you do it, and on top of that it goes back to the original colour when you switch between tabs.
8. Looks like you can't use more than one background images, so if you want to change the expand/collapse arrows for example you can't if you are already using a background image for the panelitems themselves.

For me it feels like VSB could be a useful tool, but it only takes you half the way. Unless you are making very small changes to existing skins you still need to edit the css after you are done with VSB.

Regards,
-DJ-

[Alex Gyoshev]

Hello -DJ-,

Thank you for the great feedback!

Regarding the colorization - currently, this functionality mimics the "Hue/Saturation" filter in Photoshop. It doesn't work on the Default skin, since it is in grayscale, and therefore, no colors can get changed. We will provide further options (currently, I plan for adding the "colorize" checkbox - like "tinting" of grayscale colors).

1. We'll address this with the next upload.
2. True! I added this option to the PanelBar. Please notify us of such problems - we can fix them easily and let you style whatever you like.
3. This is critical, indeed, and is already on our to-do list.
4. We have plans for this (actually, designs too!), but its priority is lower than most of the other "point-and-click" aspects. Nevertheless, do you mean editing the whole CSS file or only the section that is selected through the interface?
5. Fixed. The bug was caused by an overlay over the control that is being edited - you actually clicked the overlay instead of the color picker.
6. Great idea! Added to the list!
7. Fixed (there were many problems with the CSS editing - I've re-written this part and now it behaves much better.
8. I've added these to the PanelBar editing.

We are trying to make the tool powerful enough to let you style most of the controls without having to edit any CSS at all. Of course, it would never replace a custom-written CSS, but we hope that it will help in most cases (writing an e-mail to ask how to change fonts is a tedious process, right?).

I'd love to hear more feedback from you, as you are one of the most active community members that engage in skinning our controls. Your Telerik points are, of course, updated.

Greetings,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[-DJ-]

Hi Alex,

First let me say I perfectly understand any reluctancy to add a "edit css" button to VSB, as it's main point is not having to edit the css :)
But it still feels like a great finishing point on a very promising application. Most users would probably not use it, but for some it could prove a time saving functionality, even when working with a fully optimized and finalized version of VSB.

Imagine this scenario for example:
I've just made a skin in VSB, and now I want to make a slightly modified version of it. I could load it up in VSB, enter css mode and from there quickly replace all border and/or background colours.

Obviously I could do this in any text editor, but I'm sure the aim is that we all end up using VSB for skinning, and we won't even have to think about fireing up some other program.

A really cool functionality (in regards to item 4) would be that if you entered css mode while editing a special portion of the skin, that class/es would be highlighted in the css and you would automatically scroll to these classes. Perhaps a bit extravant, I am as often before just thinking outloud.

I'm not sure about how much detail I should go into regarding the VSB as it is now, but I'm having some problems editing the skins.
For example it doesn't look like you can edit any window properties in the fine tune mode. I foresee a problem using one and the same colorize function for the window icon as well as the window titlebar background. Perhaps this is already covered in your future plans.

The "Apply Changes" button has made me wonder quite a bit. It feels uncertain when you actually need to click it, probably in part because not all changes do work at the moment.

I also question the current location of it. As it is now (at the top right) it's quite obvious because there are no other controls near it. But it's a long trip for a lazy mousehand to travel there (especially if you have to click it often, which I'm not sure about), and perhaps a more traditional placement at the bottom would be better.

One final thought. When you start a new skin, a "Select all" button would surely come in handy, once there are more controls to skin.

Enough rambling for now.

Regards,
-DJ-

[Alex Gyoshev]

Hello Daniel,

Regarding the "edit CSS" button, I'll certainly post some designs once we get to its implementation. I guess that prototyping it with you, our customers, would shape it up in the way that you'll find most useful.

I didn't get your point in the following paragraph - could you please explain what you mean?
For example it doesn't look like you can edit any window properties in the fine tune mode. I foresee a problem using one and the same colorize function for the window icon as well as the window titlebar background.

I guess the "Apply changes" button will get more intuitive if it gets enabled when the currently edited skin gets "dirty", i.e. when there are changes that can be applied. Its location is rather off, indeed - I guess that positioning it in the bottom would be more intuitive. I'll discuss it with our designers.

"Select all" is a nice button, indeed! I guess it can make it into one of the upcoming uploads, it's not necessary to wait for more controls...

Sincerely yours,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[-DJ-]

Hi Alex,

These are actually two different points:

 "For example it doesn't look like you can edit any window properties in the fine tune mode. I foresee a problem using one and the same colorize function for the window icon as well as the window titlebar background."

... and the first one is moot, as I can't see any problems with the window fine tune mode any more. The second point is that when you are playing with the hue and saturation in the colorize section of the window, it influences both the titlebar background as well as the window icon. So you can easily end up with really random color combinations there. For example if you start with the Vista skin, which has a blue background and a yellow icon, you get pink & green, red & blue when you colorize it.

So I guess what I'm saying is that we probably need individual colorization sliders for the titlebar background and the window icon.

Keep up the good work!

Regards,
-DJ-

[Alex Gyoshev]

Hello -DJ-,

The current idea is to provide per-element colorization. I guess this will cover this scenario, and it should be quite a powerful feature.

Kind regards,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[-DJ-]

Hi Alex,

Sounds great!

Regards,
-DJ-

[steven schmalfeld]

Thank heaven, I can hardly wait for the production version. One of the great pains in using the controls has been trying to deal with th eCSS (I love the controls otherwise). This will make skinning them quickly and painlessly a breeze.

[Bart Welch]

Is the Colorize tool working yet?  If I select a skin such as sunset and then try to change the color through the colorize option, nothing changes.