button inside

11 posts, 0 answers
  1. Kjell
    Kjell avatar
    221 posts
    Member since:
    May 2011

    Posted 10 Jan 2013 Link to this post

    How to set the button inside the rotator?
  2.
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Jan 2013 Link to this post

    Hi,

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

    Thanks,
    Shinu
  5. Kjell
    Kjell avatar
    221 posts
    Member since:
    May 2011

    Posted 10 Jan 2013 Link to this post

    As the attached image. Buttons (own pictures) and the buttons inside / above banner / image
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Jan 2013 Link to this post

    Hi,

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

    Thanks,
    Shinu
  8.
  9. Kjell
    Kjell avatar
    221 posts
    Member since:
    May 2011

    Posted 11 Jan 2013 Link to this post

    And how do i define/link my own button image
  11. Slav
    Admin
    Slav avatar
    1359 posts

    Posted 11 Jan 2013 Link to this post

    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.
  13. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Jan 2013 Link to this post

    Hi,

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

    Thanks,
    Shinu
  14.
  15. Kjell
    Kjell avatar
    221 posts
    Member since:
    May 2011

    Posted 14 Jan 2013 Link to this post

    Does not work
    And I need to link the left and right buttons...
  17. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 15 Jan 2013 Link to this post

    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.
  19. Kjell
    Kjell avatar
    221 posts
    Member since:
    May 2011

    Posted 15 Jan 2013 Link to this post

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


  21. Slav
    Admin
    Slav avatar
    1359 posts

    Posted 15 Jan 2013 Link to this post

    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.
Back to Top