CSS from page controls

[Bill Deihl]

I would like to access the CSS elements of a skin for other items on the page. My goal is to keep a consistent look and feel across all items without spending a lot of time recreating the work that the Telerik team has already done.

For example, I have a radgrid on my form with the web20 skin selected.

How would I go about extracting the font, color and background image of the radgrid header to apply to the neighboring controls on the page. The form decorator seems useful for form controls but not for box header, literals, etc.

Thanks for any help.

Bill

[Stuart Hemming]

I suspect many of us need to do this but have simply done it the 'hard' way and created styles for out own elements to match those of the skins employed.

Whilst I don't think that there would be a way of doing this, it would be nice if there were.

--
Stuart

[Bill Deihl]

Thanks for the reply Stuart.

 What got me thinking about this was a line from the ajax loading panel. The spinner image is pulled from a resource file.

 That go me thinking that there must be a standard trail into the css information. I’m just not smart enough to crack it on my own,

 <img alt="Loading..." src='/myapp/WebResource.axd?d=x4ZphnwnpasjjrNoV0i31-849R3m3gAt-pU7_TVzFjQnH3L7YF1BO634ApRCnAdZDLkIjsioO7VcWGEAN3FPbw2&amp;t=633438057600000000'            style="border: 0px;" />

[Stuart Hemming]

Bill, there's not a trail as such, at least, not in the way that I think you mean.

The gibberish after the .axd?is a link to a file resource (image, javascript file, css file, etc) that the system generates when the program compiles. There is nothing more to it than if the same resources were stored externally. The reference to the style was generates 'cos the programmer (either you or the chanps at telerik towers) explicitly set that attribute on that instance of the control.

--
Stuart

[Simon]

Hi there,

Indeed, the axd file that is in the path of the image source means that the image is loaded from a web resource.

However, every image used by a particular skin is also available on the machine where RadControls are installed.

More specifically, there is a Skins sub-directory in the installation directory of RadCntrols for ASP.NET AJAX where all skins' definitions and images are located. You can use these images for your own purposes.

Finally, regarding Bill's initial concern - you could use a Dom Tree Inspector tool (like FireBug) to examine all elements of a particular RadControl and extract their CSS attributes' values. Then you could use them to style other elements on the page and to preserve the consistent look.

I hope this is helpful, too.

All the best,
Simon
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Bill Deihl]

Thanks to both of you for your help with this.

 I installed the developer toolbar for IE and walked the DOM of the radgrid. From there I can find the class names.

 So just something simple like:

<div class="GridHeader_Office2007">
           This is a test

</div>

Shows the radgrid header background. I can eaisly find the rest of the classes and get the rest of items to look consistent.

The drawback is if I decide to change skins, I have to refactor but that is not a big deal.

Thanks.

Bill 

[Dimo]

Hello Bill,

Taking a CSS class from a Telerik skin and using it for another element on the page to achieve a consistent look is OK, however, I have to warn you about two things:

1) Sometimes Telerik CSS classes carry styles, which also influence layout, not just appearance.

2) Sometimes Telerik CSS classes apply styles to child elements, which may not be expected or desired.

Both (1) and (2) mean that using our CSS classes may yield unexpected results, so you should be careful.


All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center