Radrotator with pagination styling?

[Pierre]

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

[Richard]

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.