ColorPicker - Changing Theme

Currant

  • Currant
  • Strawberry
  • Peach
  • Lemon
  • Lime
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This is a sample application scenario which shows how to use RadColorPicker to implement theme customization for your forms. You can apply a different selection of color for a quick change of styles.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ColorPicker.AppScenario2.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <div class="divContainer">
            <div id="loginDiv" class="currantClass">
                <h3 id="Title_H1">Currant</h3>
                <div class="loginForm">
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="Username" Label="Username" Width="100%" Height="25px" CssClass="LoginInput"></telerik:RadTextBox>
                    <div class="margin"></div>
                    <telerik:RadTextBox RenderMode="Lightweight" runat="server" TextMode="Password" ID="Password" Label="Password" Width="100%" Height="25px" CssClass="LoginInput"></telerik:RadTextBox>
                    <div class="margin"></div>
                    <div class="loginBtn">
                        <telerik:RadButton RenderMode="Lightweight" runat="server" ID="Login" Text="Login" ButtonType="LinkButton"></telerik:RadButton>
                    </div>
                </div>
            </div>

            <div id="chooseColorDiv" class="chooseColorClass">
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker1" ShowEmptyColor="false" CssClass="colorPicker"
                    PreviewColor="false" OnClientColorChange="TelerikDemo.ChangeImageColor" SelectedColor="#FFFF00"
                    Columns="1" Width="34px" Preset="None" Skin="Metro">
                    <telerik:ColorPickerItem Title="Currant" Value="#6e3fbc"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Strawberry" Value="#ff256f"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Peach" Value="#ff6600"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Lemon" Value="#fff000"></telerik:ColorPickerItem>
                    <telerik:ColorPickerItem Title="Lime" Value="Lime"></telerik:ColorPickerItem>
                </telerik:RadColorPicker>
                <ul class="colorTitles">
                    <li>Currant        </li>
                    <li>Strawberry    </li>
                    <li>Peach        </li>
                    <li>Lemon        </li>
                    <li>Lime        </li>
                </ul>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?