Radrotator with pagination styling?

2 posts, 0 answers
  1. Pierre
    Pierre avatar
    4 posts
    Member since:
    Feb 2011

    Posted 09 Jan 2012 Link to this post

    Hi,

    I have copied the radRotator Pager Integration page from the examples. I have managed to get it to display my own images, but for some or other reason, the page numbers do not appear as they do in the example. In the example, they appear as numbers in little buttons, but mine show as plain text.

    Please see the attached images.

    Does anyone know what I am doing differently to the example? I also want the little buttons.


    Thanks,
    Pierre
  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 10 Jan 2012 Link to this post

    Pierre:

    I believe that you're buttons display as text because you have not properly integrated the "Styles.css" file that was associated with the demo. Here's a copy of the code from my local insatallation of the demos:

    "Styles.css":
    .rotatorCont
    {
        width: 800px;
        height: 400px;
        margin: 10px auto;
        padding-top: 54px;
        background: url(../Images/rotator_back.jpg) no-repeat;
    }
     
    .rotator
    {
        margin: 0 auto;
        width: 500px;
        height: 220px;
    }
     
    .links
    {
        margin: auto;
        width: 381px;
    }
     
    #ButtonsContainer
    {
        height: 22px;
        line-height: 22px;
        padding: 0 5px 0 2px;
    }
     
    #ButtonsContainer .buttonClass
    {
        display: inline-block;
        float: left;
        width: 22px;
        text-align: center;
        text-decoration: none;
        color: #eee;
    }
     
    #ButtonsContainer .buttonClass, .leftButton, .leftButton:hover, .rightButton, .rightButton:hover
    {
        background: url('../Images/ArrowSprite.gif') no-repeat;
    }
     
    .btnHighlight
    {
        background-position: 0 -110px !important;
        color: #9EDA29 !important;
    }
     
    #ButtonsContainer .buttonClass
    {
        background-position: 0 0;
    }
     
    #ButtonsContainer .buttonClass:hover
    {
        background-position: 0 -110px;
        color: #9EDA29;
    }
     
    #ButtonsContainer, .leftButton, .rightButton
    {
        float: left;
    }
     
    .leftButton, .rightButton
    {
        display: block;
        width: 22px;
        height: 22px;
    }
     
    .leftButton
    {
        background-position: 0 -22px;
    }
     
    .leftButton:hover
    {
        background-position: 0 -44px;
    }
     
    .rightButton
    {
        background-position: 0 -66px;
    }
     
    .rightButton:hover
    {
        background-position: 0 -88px;
    }
     
    .conf
    {
        clear: both;
        height: 100px;
    }
    .itemTemplate
    {
        width: 570px;
        height: 230px;
    }
    .imageStyle
    {
        float: left;
        width: 226px;
        height: 226px;
        margin: 0 0 0 5px;
        padding: 5px 0 0 5px;
        background: url('../Images/item_back.png') no-repeat -7px -6px !important;
    }
    .info, .title
    {
        font-size: 14px;
    }
     
    Using Firebug in Firefox 9, it looks like the display for the individual page buttons is set using the following CSS Style from the above script:

    #ButtonsContainer .buttonClass
    {
        display: inline-block;
        float: left;
        width: 22px;
        text-align: center;
        text-decoration: none;
        color: #eee;
    }

    Hope this helps.

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top