This is a migrated thread and some comments may be shown as answers.
button inside
10 Answers 69 Views
This is a migrated thread and some comments may be shown as answers.
Kjell
Top achievements
Rank 1
Kjell asked on 10 Jan 2013, 08:14 AM
How to set the button inside the rotator?

10 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 10 Jan 2013, 09:32 AM
Hi,

You can set RotatorType to show buttons in rotator. Check the following demo which explains the same.
Rotator / Rotator Types

Thanks,
Shinu
0
Kjell
Top achievements
Rank 1
answered on 10 Jan 2013, 11:57 AM
As the attached image. Buttons (own pictures) and the buttons inside / above banner / image
0
Shinu
Top achievements
Rank 1
answered on 11 Jan 2013, 04:30 AM
Hi,

Try overriding the default CSS as shown below.
CSS:
.rrButton.rrButtonRight
       {
           right: 0px !important;
       }
        
       .rrButton.rrButtonLeft
       {
           left: 5px !important;
       }

Thanks,
Shinu
0
Kjell
Top achievements
Rank 1
answered on 11 Jan 2013, 09:30 AM
And how do i define/link my own button image
0
Slav
Telerik team
answered on 11 Jan 2013, 02:36 PM
Hello Kjell,

The easiest way to specify custom control buttons for the RadRotator control is through its inner property ControlButtons, as shown in this help article. You can check it in action in the following demos:
 - Rotator / Thumb Scroller;
 - Rotator / Slide Show;

Regards,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Shinu
Top achievements
Rank 1
answered on 14 Jan 2013, 07:21 AM
Hi,

Try the following CSS.
CSS:
.RadRotator_Default .rrButton
{
 background-image: url("Images/img.jpg") !important ;
 }

Thanks,
Shinu
0
Kjell
Top achievements
Rank 1
answered on 14 Jan 2013, 07:50 AM
Does not work
And I need to link the left and right buttons...
0
Shinu
Top achievements
Rank 1
answered on 15 Jan 2013, 09:06 AM
Hi,

Try the following CSS.

CSS:
<style type="text/css">
    .rrButton.rrButtonRight
    {
        right: 0px !important;
        background-image: url("../Images/image1.jpg") !important;
    }
    .rrButton.rrButtonLeft
    {
        left: 0px !important;
        background-image: url("../Images/image2.jpg") !important;
    }
</style>

Regards,
Shinu.
0
Kjell
Top achievements
Rank 1
answered on 15 Jan 2013, 09:33 AM
Nothing happens, below my code ....
The test url: http://www.junis.net/xdefault.aspx

<telerik:RadRotator ID="RadRotator1" skin="Simple" DataSourceID="xmlDataSource1" Width="1000px" ItemWidth="960px" Height="350px" ItemHeight="350px" RotatorType="Buttons" EnableDragScrolling="True" ScrollDuration="700" runat="server">
  <ItemTemplate>
    <div class="itemTemplate">
      <asp:HyperLink ID="imgBanner" ImageUrl='<%# "~/banner/images/" + XPath("Image") %>' NavigateUrl='<%# XPath("Url") %>' target="_blank" ToolTip='<%# XPath("Alt") %>' BorderWidth="0" BorderStyle="none" runat="server" />
    </div>
  </ItemTemplate>
</telerik:RadRotator>

.rrButton.rrButtonRight
{
    right: 10px !important;
    background-image: url(../picture/Rotator/right.png);
}
  
.rrButton.rrButtonLeft
{
    left: 10px !important;
    background-image: url(../picture/Rotator/left.png);
}
  
.rrClipRegion
{
    border: 0px !important;
}


0
Slav
Telerik team
answered on 15 Jan 2013, 11:32 AM
Hello Kjell,

The RadRotator is designed to use a sprite image for defining the appearance of the control buttons. If you want to change the buttons by customizing the skin of the rotator, you need to follow the steps in this help article and create a new sprite from an existing one by keeping its original size. Any change of the sprite's size would require modifications in the rotator's skin to adjust the background position.

Another possible approach is to use the ControlButtons inner property of the control to customize the buttons, which I already suggested in my previous post.

All the best,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Asked by
Kjell
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Kjell
Top achievements
Rank 1
Slav
Telerik team
Share this question
or