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

Skinning buttons.

24 Answers 315 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
PureCode
Top achievements
Rank 2
PureCode asked on 23 Jan 2008, 01:39 AM
Hi,

Telerik Prometheus seems to be one of the few (if not only) 'UI Suite' products out there that does not have a 'button' control with it.

This means that no matter the amount of skinning applied, we're still looking at either 'default Windows skin' look buttons or 'classic Windows' look buttons, which does not exactly fit in with the rest of the skinned page.

Is there any way to apply one of the CSS styles of one of the Prometheus controls to a standard ASP.NET button and make it look like, say, the root-level RadMenu 'button'?

Also, we are also experiencing that the scroll bars in Prometheus controls are not skinning (while we see screen shots on this website that DO have them skinned).

We run classic Windows look under XP on our development machines, our customers usually run in super-ugly XP blue/olive/silver (at resolutions that would make your eyes fall out), you know, the usual 'idiot' end-user stuff.

At this point it seems not possible to get a consistent 'skin' going for a web site in our environment, and that is a definite issue for us and our customers. After all, a completely skinned and pretty website is great, until you encounter unskinned buttons and scroll bars all over the place.

It seems odd that there is no 'button control' in Prometheus to us tho. The scroll bars issue is probably related to us entirely turning off any theming XP can do.

Thanks,

Mike

24 Answers, 1 is accepted

Sort by
0
PureCode
Top achievements
Rank 2
answered on 23 Jan 2008, 02:06 AM
Ok, i was waiting for my IT guy to come back to me with this. I had asked him earlier to take one of the new PCs, remove Vista (first thing we do with new PCs, 'format c:') and install XP on it.

So, with full 'theming' on in XP in the usual end-user 800x600 (my eyes are bleeding!), for fun and giggles, I went to telerik.com and the online Prometheus demo of the ComboBox, and indeed, the scroll bar is skinned with the XP skin, NOT the selected skin of Prometheus.

So I guess I can conclude that Prometheus simply does not support skinned scroll bars (it does look better with the XP theme scroll bar as compared to our non-skinned dev-PC XPs, but i am not yet ready to have my eyes go down the drain due to the nuclear radiation that the XP (not to mention Vista) default skin produces :) ).

One has to admit tho, it does look horrendous: eek..

Regards,

Mike
0
Shaun Peet
Top achievements
Rank 2
answered on 23 Jan 2008, 03:03 AM
I was actually thinking about this very thing today.  I had converted all the textboxes in a standard asp:login control and didn't have an option when it came to converting the button.  It would be easy enough to find one of the css class definitions to use for the button but it would be nicer to have a button complete with mouseover & select effects built-in to match the rest of the input controls.
0
PureCode
Top achievements
Rank 2
answered on 23 Jan 2008, 07:04 AM
That is exactly what we were doing, templating a login control with Prometheus and no real replacement for the button.

I scanned (quickly, I admit) through the CSS embedded in the UI dll using Reflector and found a few candidates, but using some of those CSS classes on a normal ASP.NET button usually ended up looking funky or working funky.

I tried the 'direct' approach by using a single RadMenu (just a root item, so no menu to expand) but found out that for some reason it has issues with the 'ItemClick' event not firing and I couldn't for the life of me get it to justify right in a table cell. I noticed i could move the actual button and a line + box appearing where it used to be, but i have no clue what THAT is for, still didn't justify right correctly, even when moved by hand to the correct location, the VS2008 designer is anything but WYSIWYG with Prometheus. So, that option went out the window as well.

So, yeah, i agree, an actual 'Prometheus' button control with a bit of nice customization options spread over it would be great. Shouldn't be too hard to do really.
0
Shaun Peet
Top achievements
Rank 2
answered on 23 Jan 2008, 11:43 PM
Probably should throw in the suggestion for a Prometheus checkbox to go with the button - again for the simple reason of matching the rest of the nicely styled application :)
0
PureCode
Top achievements
Rank 2
answered on 24 Jan 2008, 04:10 AM
Indeed :)

Couple more..

- Radio buttons (unless i missed these)
- Panel (skinned panel, like the RadWindow, but then as a panel, title bar, the works.)

What i would LOVE to see, an application styler, automatically styles all non-Telerik controls on pages to match the Telerik Suite skin. It should also allow to change ALL the skinning to another skin in one go.

And, of course, the old favorite, a skin maker app.

We can probably go on for a while like this tho :)
0
Steele
Top achievements
Rank 1
answered on 31 Jan 2008, 12:04 AM
I too would really like to see radButton, radImageButton, radLinkButton, radRadioButton and radCheckBox all of which are fully ajax enabled.

Being able to call a codebehind event without going through the trouble of using AjaxManager (especially when creating ajaxified user controls) is really needed.  I know another vendor is doing exactly what I want, but their controls are very rough compared to the wonderfulness and interoperability of the Telerik controls.

Having all the common themes as well is greatly beneficial when trying to do rapid designs.
0
MB
Top achievements
Rank 1
answered on 04 Feb 2008, 09:04 AM
Sounds like you are describing a Prometheus (and html-graphics) equivilent of the Telerik Winforms Buttons... which could be interesting.
0
Tervel
Telerik team
answered on 06 Feb 2008, 04:04 PM
Hello,

We are glad to introduce the skinnable forms elements demo is here: http://www.telerik.com/demos/aspnet/formdecorator/

It can be downloaded here:
http://www.telerik.com/community/code-library/submission/b311D-bcaecg.aspx

We will be glad to hear your suggestions how to continue with this project from here.

All the best,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
PureCode
Top achievements
Rank 2
answered on 06 Feb 2008, 05:18 PM
Well, what do you know.. ask and ye shall receive :)

Very nice. I'll have a good play with this and tell you what i think and give suggestions where needed.

Many thanks!

Regards,

Mike
0
MB
Top achievements
Rank 1
answered on 07 Feb 2008, 12:01 AM
Custom Skins ??
0
PureCode
Top achievements
Rank 2
answered on 07 Feb 2008, 12:45 AM
Everything is set up the same way as Prometheus, so in theory, a custom skin should work the same. However, you can, indeed, set 'EnableEmbeddedSkins' to false, but there is no property to tell it where to find external skins. Perhaps this isn't implemented yet.

It seems very early in development as far as i can tell. It has four built-in skins but there is no smart-tag (even better, it doesn't show up in the designer at all!) to select a skin and it needs to be typed in by hand in the properties.

It does work inside a master page (the child pages get their 'normal' controls skinned) but any other page outside of that master page need the FormDecorator separately, it does not persist throughout the application.

It should be easy enough to export a skin from the DLL using Reflector and create a custom one, i do not see how it would know where that skin is though, perhaps it can be set in code, i didn't study the code, just looked at the CSS and images in the DLL.

It also doesn't do 'click' effect images yet, it's just an image for a button you click, there are no effects when you click. Only 'normal' and 'hover' are in the CSS and images at the moment.

Considering everything is in the same namespaces as Prometheus, i am assuming this will be merged with Prometheus when done. It seems they already did this with Telerik.Web.Design.dll and Telerik.Web.UI.dll for the upcoming hotfix release.

EDIT: Yeah, i don't really see any way of telling it about a custom skin in the code. Code-wise it is pretty straight-forward, i think they only whipped this up very recently.
0
MB
Top achievements
Rank 1
answered on 07 Feb 2008, 01:19 PM
I would have expected that setting EnabeEmbeddedSkins=false and giving it a Skin=MySkinName  would mean that css rules in the active theme will be applied, provided that they are the correct selector names etc.

Just looking at it, I'm guessing that this is a AOL type of thing, where the original controls have their display set to none, and images are inserted where required ?? If this is so, then you need to know the required selectors before you can create your own css rules. I'm keen to know the details of this.

If this is the case, one thought that this raises for me is the possibility of a tri-state checkbox. -- Select, DeSelect, Default
0
Todd Anglin
Top achievements
Rank 2
answered on 07 Feb 2008, 02:40 PM
Just to keep everyone one track, we have had these styled controls in our labs for quite some time. Depending on the feedback we get from you guys with this basic Code Library example, we'll decide how much interest/demand there is for this project. If it does become an "official" member of the RadControls suite,  you'll get a control with all of the level of polish you guys have come to expect from Telerik.

For now, though, yes, these are very basic controls without some obvious features (like enabling external skins). Tell us what you like, what you don't like, what skins you'd prefer to have available, etc. and we'll use that to guide our future plans.

-Todd
0
PureCode
Top achievements
Rank 2
answered on 07 Feb 2008, 08:13 PM
Well,

What i would like it see it do:

  • Working hover effect (already has the images/css, just not implemented?).
  • Click effect.
  • Scrollbar skinning.
  • Global application support (e.g. drop once into application, work for all pages from there on, master pages or not).
  • Custom skin support (a must).
  • As MB stated above, tri-state check box.
  • All the rest of the 'basics'.

Regarding included skins:

  • All that Prometheus has.

Suggestion:

  • Instead of a separate product, offer it as part of ASP.NET controls and Prometheus (and perhaps Silverlight, even though we as a company will never ever use it, not going to force anyone into downloading crap in order for a site to work).

I hope that this has been on the shelf in your labs for a while ;) since the code is pretty simple. I jest of course, we're very happy to see this appear.

Regards,

Mike
0
MB
Top achievements
Rank 1
answered on 08 Feb 2008, 01:11 AM
Basically, I'd like to see the WinForms Buttons package translated to Prometheus as a html/graphics/script package, for as much as is possible.

Being able to markup the page in normal html input elements and having the webresource script handle the complexities of converting that to image/script elements, is quite attractive to me.

Obviously, custom skins is a given.
0
Tervel
Telerik team
answered on 12 Feb 2008, 07:25 AM
Hi all,

We are glad to see so much activity in this forum thread :)
We already started working on some of the proposals and hope to bring out something new in about 3 weeks from now, right after the Q3 SP2 pack coming by the end of February.

Best wishes,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
PureCode
Top achievements
Rank 2
answered on 12 Feb 2008, 09:11 PM
Hi Tervel,

That's great to hear! Keep up the good work.

Regards,

Mike
0
Tervel
Telerik team
answered on 07 Mar 2008, 08:30 AM
Hi guys,

Thanks for all the valuable feedback so far.
Because of the great interest, the FormsDecorator control will become an integral part of the Prometheus suite for the Q1 2008 release in April.
We will do our best to integrate it in the coming Prometheus Futures release to be released in late March.
We just uploaded an updated version of the FormDecorator

The skinnable forms elements demo is here:
http://www.telerik.com/demos/aspnet/formdecorator/

It can be downloaded here:
http://www.telerik.com/community/code-library/submission/b311D-bcaecg.aspx


What is new?
==========
- 10 skins (two more coming for the official release)
- Hover/Out states for the buttons using pure CSS
- Caching of images for IE6 (smoother user experience)
- CSS for disabled radiobuttons, checkboxes and buttons
- Various CSS look & feel improvements




Regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Remko
Top achievements
Rank 1
answered on 07 Mar 2008, 08:17 PM
I realise that this is very much take what you get, so this is not a complaint, but when using the forms decorator all my currently visible controls are skinned, but not the ones within an initially invisible panel (css visibility toggle, not code behind Visible)
is there a way for me to force a skin refresh? Ajaxified promethius version.

Thanks,
Kevin.
0
Tervel
Telerik team
answered on 10 Mar 2008, 04:37 PM
Hi Kevin,

Thank you for reporting this. We will examine what could be causing this situation.
I hope we will be able to roll out at least one more update of this project before it gets officially bundled in the Prometheus suite in April.
Just to let you know - next on our TODO list are
 - 2 more built-in skins
 - skinned scrollers (IE only)
 - ability to reference external skins
 - skinned zone (restrict decorator to just a portion of the page)

We will also do our best to fix all reported issues like this one to make this decorator trully seamless and easy to use.


Best regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Remko
Top achievements
Rank 1
answered on 10 Mar 2008, 04:45 PM
Excellent, Thanks Tervel.
Just to report one more bug... When the checkbox caption (Text) is empty, the check box will render missing half off the bottom of the check box. If you use a space character as Text, then most skins make the check box itself dissapear.

Kevin.
0
Martin
Telerik team
answered on 11 Mar 2008, 07:16 AM
Hi Kevin,

Thank you for reporting this. We have logged the issue and we will fix it for the next update of Skinnable Form controls.

Best wishes,
Martin Ivanov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Lyle Groome
Top achievements
Rank 2
answered on 26 Mar 2008, 11:18 PM
I love this new functionality being offered.

I do have a few more suggestions for improvement...
  1. I really like you prior concepts of a Manager control (AjaxManager, WindowManager, ToolTipManager, etc) I think it would be nice to Have the RadFormDecorator define an optional list of controls to be decorated where each could receive a different Skin if we wanted to have different areas on a page use different skins.
  2. Also the button text for Web20, WebBlue, Hay (the nice colorful ones) at first glance makes the user think it is disabled because of the light gray color. Can you default the text color to something darker?

 

0
Martin
Telerik team
answered on 27 Mar 2008, 07:16 AM
Hi Lyle Groome,

Thank you for your improvement suggestions, they are important to us.

As a matter of fact, we have already considered the option for input skinning of the elements in a particular parent element, and we will add this feature soon.

On your second suggestion - you are right, the buttons you have reported really look disabled, so we will do the necessary changes in the skins.

Kind regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
General Discussions
Asked by
PureCode
Top achievements
Rank 2
Answers by
PureCode
Top achievements
Rank 2
Shaun Peet
Top achievements
Rank 2
Steele
Top achievements
Rank 1
MB
Top achievements
Rank 1
Tervel
Telerik team
Todd Anglin
Top achievements
Rank 2
Remko
Top achievements
Rank 1
Martin
Telerik team
Lyle Groome
Top achievements
Rank 2
Share this question
or