Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 11, 2015 at 9:18 pm #501880
    PPCHound

    Hi,

    I am styling the pagination for blog grid (see private link below) with:

    
#top .pagination .current, #top .pagination a, #top .fullsize .template-blog .pagination a {
  float: left;
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  padding: 0;
  border-radius: 100px;
  margin-right: 3px;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
  background: red;
  color: #ffffff;]
}

    The link below shows page two of the current posts.

    How can I get only the current page number to have a red background, with the other pages having a black background please? Right now all page numbers have a red background as the link shows.

    kindest regards,

    PPCHound

    • This topic was modified 8 years, 7 months ago by PPCHound.
    September 12, 2015 at 7:53 am #501989
    Rikard

    Hi PPCHound,

    Please try the following CSS to target the active item:

    #top .pagination .current {
    background: yellow !mportant;
}

    Thanks,
    Rikard

    September 12, 2015 at 10:28 am #502046
    PPCHound

    Hi Rikard,

    Many thanks for the pointer. It helped me to achieve my goal. Your help was much appreciated.

    Now I must spend time each day improving my CSS skills so I can do this myself. ;)

    kindest regards,

    PPCHound

    • This reply was modified 8 years, 7 months ago by PPCHound.
    September 13, 2015 at 8:31 am #502219
    Rikard

    Hey,

    Hehe no problem. Good luck on learning CSS, it’s fun! :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Styling blog grid pagination’ is closed to new replies.