0
Welcome Guest! Login
0 items Join Now

Pagination CSS style

Last Post
Search Topic

  • Pagination CSS style

    Posted 13 years 6 months ago
    • Hello, I'm working to improve the pagination syle for a category blog layout by CSS.
      http://www.100anniditennis.it/future/index.php/press-area?start=8
      The only one problem I'm not able to solve by myself, is the backgroung color for "Start-Prev-Next-End" links.
      I worked around the style for
      <li class="pagination-start">
<li class="pagination-prev">
<li class="pagination-next">
<li class="pagination-end">
      without success.
      Some suggestions?
      Thank you in advance.
    #722287
    • Adamck's Avatar
    • Adamck
    • Elite Rocketeer
    • Posts: 546
    • Thanks: 2
    • Web Developer, IT Assistant, Graphics design, App Developer

    Re: Pagination CSS style

    Posted 13 years 6 months ago
    • Goto:
      www.100anniditennis.it/future/templates/...x_j16/css/joomla.css

      On line 205
      find
       
.component-content .rt-pagination ul li {border-top: 1px solid #CDCDCD; border-bottom: 1px solid #CDCDCD; border-left: none; border-right: none; padding-top: 5px; padding-bottom: 4px; background-color: rgba(0, 0, 0, 0.04); font-family: "Trebuchet MS",Verdana,Arial,sans-serif;}
 

      Change to:
       
.component-content .rt-pagination ul li {border-left: none; border-right: none; padding-top: 5px; padding-bottom: 4px;font-family: "Trebuchet MS",Verdana,Arial,sans-serif;}
 

      then find
       
.component-content .rt-pagination li {display: inline;padding: 2px 5px;text-align: left;border: solid 1px #eee;margin: 0 2px;}
 

      and replace with
       
.component-content .rt-pagination li {display: inline;padding: 2px 5px;text-align: left;margin: 0 2px;}
 

      Now its all clean :)

      This image is hidden for guests.
      Please log in or register to see it.
    • Kiss my RSS
    #722309

  • Re: Pagination CSS style

    Posted 13 years 6 months ago
    • Dear Adamck,
      thank you very much for your support.
      I change the code how you suggested: now everything is clear, but I would like to have clear Start-Prev-Next-End label only.
      All the pages numbers with a background color.
      Do you think is possible?
    #722316
    • Adamck's Avatar
    • Adamck
    • Elite Rocketeer
    • Posts: 546
    • Thanks: 2
    • Web Developer, IT Assistant, Graphics design, App Developer

    Re: Pagination CSS style

    Posted 13 years 6 months ago
    • ok find:
      .component-content .rt-pagination li {display: inline;padding: 2px 5px;text-align: left;border: solid 1px #eee;margin: 0 2px;}

      replace with
      .component-content .rt-pagination li {display: inline;padding: 2px 5px;text-align: left;margin: 0 2px;background:#e0e0e0}
.component-content li.pagination-start {background: none;}
.component-content li.pagination-prev {background: none;}
.component-content li.pagination-next{background: none;}
.component-content li.pagination-end{background: none;}

      Should put agrey background on the numbers but not the Star - Prev - Next - Last
    • Kiss my RSS
    #722335

  • Re: Pagination CSS style

    Posted 13 years 6 months ago
    • Dear Adamck,
      it works fine!
      Thank you very much: you saves me a lot of time.
      Regards,
    #722383

Time to create page: 0.072 seconds