Item Background Color

5 posts, 0 answers
  1. Justin
    Justin avatar
    2 posts
    Member since:
    Feb 2008

    Posted 13 Aug 2008 Link to this post

    I am trying to implement a RadRotator.  For the most part, it works.  However, I'd like a color other than the default white to be behind the frames (including the margin between frames).

    I've tried setting the back color for the rotator itself, the ajax panel as well as the div around the items.  The best I can seem to get is the color to the left of the items (this is a vertical, buttonsover rotator) to change - but not the color to the right or the margins between.

    Any suggestions would be much appreciated.
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 19 Aug 2008 Link to this post

    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.
  3. Justin
    Justin avatar
    2 posts
    Member since:
    Feb 2008

    Posted 19 Aug 2008 Link to this post

    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
    ;
    }

  4. Remi
    Remi avatar
    38 posts
    Member since:
    Oct 2007

    Posted 20 Aug 2008 Link to this post

    Hello,

    Thanks for the solution, it's what I was going to attempt next.

    Like you, I had the same issue, and like you, I attempted the same solution Telerik recommended with no success.

    I was also surprised that there was no property to set that in the control -- seams bizzar, I would expect such functionality to be easy to implement. Creating a custom skin or asking the developer to implement custom CSS is not the easiest solution -- having a property for the background color at the item level is.  

    Thanks for the post. It's appreciated.

  5. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 21 Aug 2008 Link to this post

    Hi guys,

    Can you please send us a small sample project where we can see the problem that you faced with the approach that we suggested? If there is a problem with RadRotator in such scenarios, we will do our best to fix it from our side.


    Kind regards,
    Georgi Tunev
    the Telerik team

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