Color based theme

3 posts, 0 answers
  1. Kaushal
    Kaushal avatar
    4 posts
    Member since:
    Mar 2009

    Posted 24 Oct 2013 Link to this post

    Hello friends,
    I am working on a new project which is having about 15 different big modules. we are having requirement like each module should be having its own recognition factor by color. That means Module1 is having Red, Module2 is having Blue, Module3 is having Green and so on. This means when a user get inside the module all look and feel should resemble this color across controls. If user get inside Module1 (which should be using Red color), then all controls (RadGrid, RadCombo or whatever control that is used) should give look and feel of Red. This will give a recognition factor to user.
    So, I am trying to figure this out in Telerik Controls. As, we also require to use some advanced functionalities like scheduler, advanced functionality in Grid. My question is; does telerik controls having  any type of mechanism to change the color of the controls based on the theme color of the module? I see that it has only some few set of read available skins. So, any option to above specified requirement?
    Thanks for any help
  2. Kaushal
    Kaushal avatar
    4 posts
    Member since:
    Mar 2009

    Posted 25 Oct 2013 Link to this post

  3. Bozhidar
    Bozhidar avatar
    693 posts

    Posted 29 Oct 2013 Link to this post


    I am not quite sure what you are trying to achieve, but you could set a different skin for the different modules you are using. As we do not have a RedColored skin, you should choose between the existing skins, or you could create a custom one. So if you have a Grey Module and you set a Office2010Silver skin for that module, when the user enters i, the colors will match that specific module. This a simple example showing a tab strip and each tab strip represents a different module. Under each different module I placed EadEditor control using different skin:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head id="Head1" runat="server">
        <style type="text/css">
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Orientation="HorizontalTop"
            SelectedIndex="0" MultiPageID="RadMultiPage1" CssClass="tabstrip" Skin="Glow">
                <telerik:RadTab Text="Module Grey">
                <telerik:RadTab Text="Module Blue">
                <telerik:RadTab Text="Module Sunset">
        <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" Width="400px"
            <telerik:RadPageView runat="server" ID="RadPageView1">
                <telerik:RadEditor runat="server" Skin="Office2010Silver"></telerik:RadEditor>
            <telerik:RadPageView runat="server" ID="RadPageView2">
                <telerik:RadEditor ID="RadEditor1" runat="server" Skin="Office2010Blue"></telerik:RadEditor>
            <telerik:RadPageView runat="server" ID="RadPageView3">
                <telerik:RadEditor ID="RadEditor2" runat="server" Skin="Sunset"></telerik:RadEditor>

    This is a simple example but shows how you could set different skin in different situation. I have prepared a short video file showing the result in the browser from the above code and how the color scheme is changes when you switch between different modes.

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top