Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Telerik Listbox item color

1 Answer 217 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Supantho
Top achievements
Rank 1
Supantho asked on 22 Jul 2010, 03:01 PM
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>

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 28 Jul 2010, 08:04 AM
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
Tags
ListBox
Asked by
Supantho
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or