Telerik Listbox item color

2 posts, 0 answers
  1. Supantho
    Supantho avatar
    1 posts
    Member since:
    Jul 2010

    Posted 22 Jul 2010 Link to this post

    I am searching for an option to change the color of the selected item in a RadListbox from Blue to Black.. tried options in the css file as well as the .aspx file but the color appears to be blue. The code is attached below:
    /* RadListBox Default skin */
     
    /*global*/
     
    .RadListBox_AnaquaSkin *
    {
        margin:1;
        padding:2;     
    }
     
    .RadListBox_AnaquaSkin .rlbGroup
    {
        border: 1px solid #8e8e8e;
        
       background: #FFFFFF;
    }
     
    .RadListBox_AnaquaSkin .rlbText,
    .RadListBox_AnaquaSkin .rlbItem,
    .RadListBox_AnaquaSkin .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbEmptyMessage
    {
        font-size: 11px;
        font-family: Arial, Verdana, MS Sans Sans-Serif;
         
    }  
     
    .RadListBox_AnaquaSkin .rlbText,
    .RadListBox_AnaquaSkin .rlbItem
    {
        line-height: 10px;
         
    }
     
    .RadListBox_AnaquaSkin .rlbGroup .rlbHovered
    {
        background: #ffffff;/* text color when hovered over options */
         
         
    }
     
    .RadListBox_AnaquaSkin .rlbGroup .rlbSelected
    {
        color: #FFF;
        background: #0A246A;/* Listbox item selected background color #C8C8C8,  #140B65*/
         
         
    }
     
    .RadListBox_AnaquaSkin .rlbDisabled .rlbText
    {
        color: #AAA;/*Disabled listbox text color*/
    }
     
    .RadListBox_AnaquaSkin .rlbDisabled .rlbImage
    {
        -moz-opacity: 0.5;
    }
     
    .RadListBox_AnaquaSkin .rlbDropClue
    {
        background-image: url('ListBox/rlbDropClue.png');
        background-position: 0 0;
        background-repeat: no-repeat;
        background-color: transparent;
        left: -10px;
        width: 10px;
    }
     
    .RadListBox_AnaquaSkin .rlbGroup .rlbDropClueAbove
    {
        border-top-style: dotted;
        border-top-color: #8e8e8e;
    }
     
    .RadListBox_AnaquaSkin .rlbGroup .rlbDropClueBelow
    {
        border-bottom-style: dotted;
        border-bottom-color: #8e8e8e;
    }
     
    .RadListBox_AnaquaSkin .rlbGroup .rlbSelected.rlbDropClueAbove,
    .RadListBox_AnaquaSkin .rlbGroup .rlbHovered.rlbDropClueAbove,
    .RadListBox_AnaquaSkin .rlbGroup .rlbSelected.rlbDropClueBelow,
    .RadListBox_AnaquaSkin .rlbGroup .rlbHovered.rlbDropClueBelow
    {
        border-color: #FFF;
    }
     
    /* Buttons normal state vertical layout*/
    .RadListBox_AnaquaSkin .rlbButtonText
    {
        background: transparent url('ListBox/rlbSprite.png') no-repeat;
    }
     
    .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonTL,
    .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonTR,
    .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonBL,
    .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonBR
    {
        background-image: url('ListBox/rlbButtonHover.png');
    }
     
    * html .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonTL,
    * html .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonTR,
    * html .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonBL,
    * html .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonBR
    {
        background-image: url('ListBox/rlbButtonHoverIE6.png');
    }
     
    .RadListBox_AnaquaSkin .rlbButton .rlbButtonTL,
    .RadListBox_AnaquaSkin .rlbButton .rlbButtonTR,
    .RadListBox_AnaquaSkin .rlbButton .rlbButtonBL,
    .RadListBox_AnaquaSkin .rlbButton .rlbButtonBR,
    .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonTL,
    .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonTR,
    .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonBL,
    .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonBR
    {
        background-image: url('ListBox/rlbButtonNormal.png');
    }
     
    * html .RadListBox_AnaquaSkin .rlbButton .rlbButtonTL,
    * html .RadListBox_AnaquaSkin .rlbButton .rlbButtonTR,
    * html .RadListBox_AnaquaSkin .rlbButton .rlbButtonBL,
    * html .RadListBox_AnaquaSkin .rlbButton .rlbButtonBR,
    * html .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonTL,
    * html .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonTR,
    * html .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonBL,
    * html .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonBR
    {
        background-image: url('ListBox/rlbButtonNormalIE6.png');
    }
     
    .RadListBox_AnaquaSkin .rlbButton:hover .rlbButtonText
    {
        color: #FFF;
    }
     
    .RadListBox_AnaquaSkin .rlbDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbDisabled:hover .rlbButtonText
    {
        color: #888;
    }
     
    .RadListBox_AnaquaSkin .rlbMoveUp .rlbButtonText { background-position: 0 0; }
    .RadListBox_AnaquaSkin .rlbMoveUp:hover .rlbButtonText { background-position: -400px 0; }
    .RadListBox_AnaquaSkin .rlbMoveUpDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbMoveUpDisabled:hover .rlbButtonText { background-position: -200px 0; }
     
    .RadListBox_AnaquaSkin .rlbMoveDown .rlbButtonText { background-position: 0 -25px; }
    .RadListBox_AnaquaSkin .rlbMoveDown:hover .rlbButtonText { background-position: -400px -25px; }
    .RadListBox_AnaquaSkin .rlbMoveDownDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbMoveDownDisabled:hover .rlbButtonText { background-position: -200px -25px; }
     
    .RadListBox_AnaquaSkin .rlbDelete .rlbButtonText { background-position: 0 -50px; }
    .RadListBox_AnaquaSkin .rlbDelete:hover .rlbButtonText { background-position: -400px -50px; }
    .RadListBox_AnaquaSkin .rlbDeleteDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbDeleteDisabled:hover .rlbButtonText { background-position: -200px -50px; }
     
     
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferTo .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferFrom .rlbButtonText { background-position: 0 -100px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferTo .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferFrom .rlbButtonText { background-position: 0 -75px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferFrom:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferTo:hover .rlbButtonText { background-position: -400px -100px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferTo:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferFrom:hover .rlbButtonText { background-position: -400px -75px; }
     
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferToDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferFromDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferFromDisabled:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferToDisabled:hover .rlbButtonText { background-position: -200px -100px; }
     
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferToDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferFromDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferToDisabled:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferFromDisabled:hover .rlbButtonText { background-position: -200px -75px; }
     
     
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllTo .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllFrom .rlbButtonText { background-position: 0 -150px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllTo .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllFrom .rlbButtonText { background-position: 0 -125px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllFrom:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllTo:hover .rlbButtonText { background-position: -400px -150px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllTo:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllFrom:hover .rlbButtonText { background-position: -400px -125px; }
     
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllToDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllFromDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllFromDisabled:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllToDisabled:hover .rlbButtonText { background-position: -200px -150px; }
     
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllToDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllFromDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaLeft .rlbTransferAllToDisabled:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaRight .rlbTransferAllFromDisabled:hover .rlbButtonText { background-position: -200px -125px; }
     
     
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferTo .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferFrom .rlbButtonText { background-position: 0 -200px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferTo .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferFrom .rlbButtonText { background-position: 0 -175px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferFrom:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferTo:hover .rlbButtonText { background-position: -400px -200px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferTo:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferFrom:hover .rlbButtonText { background-position: -400px -175px; }
     
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferToDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferFromDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferFromDisabled:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferToDisabled:hover .rlbButtonText { background-position: -200px -200px; }
     
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferToDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferFromDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferToDisabled:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferFromDisabled:hover .rlbButtonText { background-position: -200px -175px; }
     
     
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllTo .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllFrom .rlbButtonText { background-position: 0 -250px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllTo .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllFrom .rlbButtonText { background-position: 0 -225px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllFrom:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllTo:hover .rlbButtonText { background-position: -400px -250px; }
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllTo:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllFrom:hover .rlbButtonText { background-position: -400px -225px; }
     
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllToDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllFromDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllFromDisabled:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllToDisabled:hover .rlbButtonText { background-position: -200px -250px; }
     
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllToDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllFromDisabled .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaTop .rlbTransferAllToDisabled:hover .rlbButtonText,
    .RadListBox_AnaquaSkin .rlbButtonAreaBottom .rlbTransferAllFromDisabled:hover .rlbButtonText { background-position: -200px -225px; }


    ASP code below contains a simple Listbox and a special RadListBox:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListBoxTest.aspx.cs" Inherits="Anaqua.Web.UI.ListBoxTest"
        MasterPageFile="~/MasterPages/ApplicationPage.Master" %>
    <%@ MasterType VirtualPath="~/MasterPages/ApplicationPage.Master" %>
     
    <asp:Content ID="ListBoxTestContent" ContentPlaceHolderID="PageContentPlaceHolder" runat="server">
     
        <asp:ListBox ID="testlistbox1"  width="250" Height="80px" runat="server">
            <asp:ListItem selected="true" Text="1" Value="0"  />
            <asp:ListItem selected="False" Text="2" Value="1" />
            <asp:ListItem Text="3" Value="2" />
            <asp:ListItem Text="4" Value="3" />
            <asp:ListItem Text="5" Value="4" />
            <asp:ListItem Text="6" Value="5" />
            <asp:ListItem Text="7" Value="6" />
            <asp:ListItem Text="8" Value="7" />
            <asp:ListItem Text="9" Value="8" />
            </asp:ListBox>
         
       <Anaqua:AnaquaRadListBox
       ID="TestRadListBox" Width="250px" Height="80px" color="Black"
                 AllowTransfer="false"
                 AllowReorder="false"
                 AllowTransferDuplicates="false"
                 AllowTransferOnDoubleClick="false"
                 EnableDragAndDrop="false"
                 SelectionMode="Single"
                 runat="server">
                  
            <Items>
                <telerik:RadListBoxItem Text="1" Value="0" />
                <telerik:RadListBoxItem Text="2" Value="1" />
                <telerik:RadListBoxItem Text="3" Value="2" />
                <telerik:RadListBoxItem Text="4" Value="3" />
                <telerik:RadListBoxItem Text="5" Value="4" />
                <telerik:RadListBoxItem Text="6" Value="5" />
                <telerik:RadListBoxItem Text="7" Value="6" />
                <telerik:RadListBoxItem Text="8" Value="7" />
                <telerik:RadListBoxItem Text="9" Value="8" /> 
            </Items>        
        </Anaqua:AnaquaRadListBox>
     
    </asp:Content>
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 28 Jul 2010 Link to this post

    Hello Supantho,

    Your skin seems okay. How do you set the skin on this RadListBox? Can you open a support ticket and send a sample project or a live URL, so that we can take a look? Thank you in advance.

    Greetings,
    Kamen Bundev
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top