This is a migrated thread and some comments may be shown as answers.

Item Background Color

4 Answers 153 Views

Rotator

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 19 Aug 2008, 08:08 AM

Hi Justin,

In general, the RadRotator control is not intended to control the look of the ItemTemplate - that task is up to the developer. What we recommend in your case is to add the style to a div that wrap the items.
e.g:

    
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
                <style type="text/css"> 
        
               .rotatorItemColor 
        
                { 
        
                    background-color:red; 
        
                    width:305px; 
        
                    height:74px; 
        
                } 
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="ScriptManager1" runat="server"> 
        
                    </telerik:RadScriptManager> 
        
                    <telerik:RadRotator ID="RadRotator1" Width="305px" Height="114px" RotatorType="ButtonsOver" 
        
                        ScrollDirection="Down, Up" DataSourceID="AccessDataSource1" runat="server"> 
        
                        <ItemTemplate> 
        
                        <div class="rotatorItemColor"> 
        
                            <%# DataBinder.Eval(Container.DataItem, "ProductName")%> 
        
                            </div> 
        
                        </ItemTemplate> 
        
                    </telerik:RadRotator> 
        
                    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb" 
        
                        SelectCommand="SELECT [ProductName], [UnitPrice] FROM [Alphabetical List of Products]"> 
        
                    </asp:AccessDataSource> 
        
                </form> 
        
            </body>

Greetings,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 19 Aug 2008, 12:56 PM

I had already attempted the provided solution with no success.

I did, however, eventually find a solution and for the benefit of others I'll post it here.

What I had to do was create a custom skin and modify a couple css styles.

.radr_Default

.radr_clipRegion {
    border: solid 1px #626262;

    /* I added this line */
    background-color:Transparent;
}

.radr_clipRegion

{
    width: 100%;
    height: 100%;
    /* I turned this offed */
    /* background: white; */
    /* We change the width and height from the code, and then this setting becomes active! */
    overflow: hidden;
    position: absolute;
}