How to make circled pagination

[newcoder1010]

Hello,

 

I have this pagination:

<ul class="pagination">
<li class="active"><span>1</span></li>
<li><a title="Go to page 2" href="/?q=home&page=1">2</a></li>
<li><a title="Go to page 3" href="/?q=home&page=2">3</a></li>
</ul>

When active, I would like to make the color circled plus red.

When not active, i would like to make the color circled plus blue.

 

I have tried several different ways but I could not do it. Can you please help me with the css?

 

Thanks.

[Ingolme]

Set the <span> and <a> elements in the list to be blocks.

 

Give them a fixed width and height that are both the same then set the border-radius to half that width.

 

Give them a background color or a border, whichever you prefer.

 

Use the .active span selector to set the span to be red.

[newcoder1010]

I tried the below code. I think something is overwriting. I am getting the partial results. Two main issues: not being circled and not having the blue color.

 

#block-views-testimonial-slideshows-block-1 .pagination li {
    float: left;
    margin: 25px;
    width: 10px;
    height: 10px; /* if i remove this, still same result */
    border-radius: 5px; /* if i remove this, still same result */
    font-size: 20px;
    line-height: 100px;
    text-align: center;
    background: blue;   /* not getting blue */

}

 

Below is working.

    #block-views-testimonial-slideshows-block-1 .pagination span{


    background: red;
    }

Please see the image.

Edited October 15, 2016 by newcoder1010

[Ingolme]

Style the span and a elements, not the list items.

.pagination li span, .pagination li a {
  display: block;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 0.75em;
  color: white;
  background-color: blue;
}

.pagination .active span {
  background-color: red;
}

[newcoder1010]

Thank you. Now, how do I remove the numbers?

[dsonesuk]

I assuming you can't simply remove them, change font color to match background.

[newcoder1010]

Numbers were overlapping. When I change the color to match background, font colors are overlapping to outside the circle.

 

I used this and it is better?

color: transparent;

[dsonesuk]

Yes! that will work, or you could use font-size: 0; as well.