Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rotator > Radrotator with pagination styling?

• Pierre

  Posted on Jan 9, 2012 (permalink)

  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
  

  Attached files

  • Correct-Styling.png
  • Incorrect-Styling.png

  Reply

• jumpstart Master

  Posted on Jan 10, 2012 (permalink)

  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.
  
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rotator > Radrotator with pagination styling?