Here is the code I have. Thanks in advance
<
div class="rotator_mainimage" style="height: 344px; margin-top: 14px">
<div style="width: 90%">
<telerik:RadRotator ID="NewsRotator" runat="server" DataSourceID="xmlDataSource1"
RotatorType="Buttons" ScrollDirection="Up, Down" Height="351px"
Width="403px" BorderStyle="None" style="margin-top: 0px"
FrameDuration="4000">
<ItemTemplate>
<div class="rotator_eventtitle" style="text-align: left">
<%
#XPath("EventTitle")%>
</div>
<div class="rotator_eventdetails" style="text-align: left">
<%
#XPath("EventDetails")%>
</div>
<div class="rotator_eventdetails_url" style="text-align: left">
<a href='<%# Xpath("EventDetailsURL") %>' target="_blank">
More
</a>
</div>
</ItemTemplate>
</telerik:RadRotator>
</div>
</div>
<asp:XmlDataSource ID="xmlDataSource1" runat="Server" DataFile="~/App_Data/NewsRotator.xml"></asp:XmlDataSource>
</
div>
6 Answers, 1 is accepted

Check out a little ways down in this post, looks like you can override the background with some custom CSS:
RadRotator customization post
Hope this was helpful. :)

Here is the code to get this to work:
<style type="text/css"> |
.RadRotator_Default .radr_clipRegion |
{ |
width: 100%; |
height: 100%; |
background-color: Transparent; |
overflow: auto; |
position: absolute; |
} |
.newsFeed |
{ |
background: url('newsFeedBgr.gif') no-repeat; |
background-color: Green; |
width: 438px; |
height: 42px; |
padding: 14px 0 0 20px; |
margin: 0 0 2px 0; |
} |
</style> |
Note the background-color: Transparent;, that is the key here. :)
Here's the rotator I used to test:
<telerik:RadRotator ID="RadRotator1" RotatorType="AutomaticAdvance" |
ScrollDirection="Up" ScrollDuration="2000" runat="server" DataSourceID="xmlDataSource1" |
Width="450" Height="200" FrameDuration="1" InitialItemIndex="-1" CssClass="RadRotator_Default" > |
<ItemTemplate> |
<div class="newsFeed"> |
<strong><a href='<%# XPath("link") %>'> |
<%# System.Web.HttpUtility.HtmlEncode(XPath("title").ToString())%> |
</a></strong> |
<br /> |
<%# XPath("pubDate") %> |
</div> |
</ItemTemplate> |
</telerik:RadRotator> |
<asp:XmlDataSource ID="xmlDataSource1" XPath="rss/channel/item" runat="server" DataFile="http://blogs.telerik.com/Blogs.rss"> |
</asp:XmlDataSource> |
It's nice when you figure something out on a Friday afternoon. ;D

I'm still having this problem, but in a slightly specific situation. I have tried Q2 and Q3 controls and they act the same.
In IE7 (not firefox) the second and subsequent frames of the rotator change to white, BUT only when my rotator is set to either...
SlideShowAnimation-Type="Fade" |
or
SlideShowAnimation-Type="Pulse" |
If it set it to "None" it works fine.
Here is my rotator code...
<telerik:RadRotator Skin="Default" RotatorType="SlideShow" SlideShowAnimation-Type="None" SlideShowAnimation-Duration="500" FrameDuration="3000" width="350px" height="60px" ItemWidth="350px" ItemHeight="60px" runat="server" id="Rotator"> |
<Items> |
<telerik:RadRotatorItem> |
<ItemTemplate> |
Some text here |
</ItemTemplate> |
</telerik:RadRotatorItem> |
</Items> |
<Items> |
<telerik:RadRotatorItem> |
<ItemTemplate> |
Some more text here |
</ItemTemplate> |
</telerik:RadRotatorItem> |
</Items> |
</telerik:RadRotator> |
I am not quite sure what exactly do you mean when you say "frames of the rotator change to white". I have tried your code and I cannot see white frames in RadRotator control.
Could you please provide more information about the issue or open a new support ticket and send me a simple demo project where I can observe the problem? Once I have a better view over your setup, I will do my best to help.
Best wishes,
Fiko
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

I have played a little more so I can better explain the situation.
Using the code below it seems that when the rotator is set to eithe SlideShowAnimation-Type="Fade" or SlideShowAnimation-Type="Pulse" the rotators 2nd and susequent frames "cut" through to the body's background image to the background colour. Try changing the body's background colour.
If you set the rotator to SlideShowAnimation-Type="None", it works as expected with the background image behind all frames.
<asp:ScriptManager ID="ScriptManager" runat="server" /> |
<style> |
body |
{ |
background:#202020 url(../Images/body-bg.jpg) repeat-x left top; |
} |
.radr_Default .radr_clipRegion |
{ |
width:100%; |
height:100%; |
background-color:transparent !important; |
overflow:auto; |
position:absolute; |
} |
</style> |
<div> |
<telerik:RadRotator Skin="Default" RotatorType="SlideShow" SlideShowAnimation-Type="Fade" SlideShowAnimation-Duration="500" FrameDuration="3000" width="350px" height="60px" ItemWidth="350px" ItemHeight="60px" runat="server" id="Rotator"> |
<Items> |
<telerik:RadRotatorItem> |
<ItemTemplate> |
Some text here |
</ItemTemplate> |
</telerik:RadRotatorItem> |
</Items> |
<Items> |
<telerik:RadRotatorItem> |
<ItemTemplate> |
Some more text here |
</ItemTemplate> |
</telerik:RadRotatorItem> |
</Items> |
</telerik:RadRotator> |
</div> |
Thank you for the clarification - now I was able to reproduce the problem. This behavior is browser specific and with the current animation mechanism it is not possible to override it. The good news is that we are currently reworking the RadRotator's animations and we are implementing the jQuery effects in it. The new feature will be available in the middle of March with the Q1 2009 version of the controls.
Best wishes,
Fiko
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.