Applying skin elements and decorations to other elements

4 posts, 0 answers
  1. Mooka
    Mooka avatar
    16 posts
    Member since:
    Aug 2006

    Posted 22 Oct 2009 Link to this post

    Hi All,

    I've got to say the Telerik controls are awsome, and the community is even better. I have converted my entire project from a competitor to Telerik over the past 6 weeks and have gotted all the info I need from the forums and documentation.

    Well up until now, but I dont think this is a hard one....

    I'm enabling my users to select their own skins. this is all great for the Rad controls and Decorated form elements.

    However I'm missing the boat on how to apply the same styles to some simple elements like an html link. When using the black theme links show up in the standard blue which is hard to see.

    I know I can apply a style for the links using regular CSS but that wont work so well when I have a black vs white background.

    The second item I want to know is if I can reuse some of the background images that are present in the headers of elements like the grid and splitter for things like a table row background that would be reflected when the skin is changed (So I can't apply a specific styl e name like Telerik_Web20_class).

    Thanks in advance for any replies!

  2. Martin
    Martin avatar
    585 posts

    Posted 27 Oct 2009 Link to this post

    Hi Mooka,

    We are happy you like out control suite and we do our best to constantly improve it.

    Straight on your questions about FormDecorator. The control is meant to style primarily form controls - buttons, input boxes, fieldsets, checkboxes and radiobuttons. When we planned the features of the control we decided to leave it up to the users to decide on the non-form controls, and this is why, for example there isn't special styling for links. However, with a little trick you may manage to achieve what you've started. Here we go:

    Use FireBug or IE Dev Toolbar on a page with FormDecorator to locate the HTML element of the page (or the decoration zone ID). You will notice that a couple of classes have been added to these, i.e:

    <html class="RadForm RadForm_Vista rfdButton rfdScrollBars rfdZone rfdLabel rfdHeading rfdTextbox rfdTextarea rfdFieldset rfdRadio rfdCheckbox" xmlns="" jQuery1256626419551="13">

    Among all of these you will notice the class in red, which is skin-specific, and will allow you to style any element inside that parent. For example you will be able to specify CSS for headings for the different skins:

    .RadForm_Vista h1
        color: red;

    ... for the Vista skin, or:

    RadForm_Black h1
        color: lime;

    ... And so on... You just need to add your new rules in a separate CSS file and make sure it is loaded on the page. Also, please, have in mind that certain settings may need to have a higher CSS specificity (or the magic of the !important flag of CSS), otherwise that may not apply.

    Best wishes,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Bryan Kowalchuk
    Bryan Kowalchuk avatar
    19 posts
    Member since:
    Dec 2009

    Posted 12 Apr 2010 Link to this post

    I also love the Telerik stuff, but the overall skinning strategy is a little short. It appears that If I want to skin an entire site, I would need two sets of skins for each theme; the Telerik skin and another one for all the other elements. It would be great if the Telerik skinning could also work for other elements ( H1, A ), that way it could be used for skinning a entire site.
  4. Georgi Tunev
    Georgi Tunev avatar
    7207 posts

    Posted 15 Apr 2010 Link to this post

    Hello Bryan,

    We considered such option when we started working on the RadFormDecorator control, but our research showed that the majority of developers prefer to have control over the styling of links, major headings (H1 / H2 / H3) etc. elements that are most commonly used on a page.

    Georgi Tunev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top