newcoder1010 Posted October 14, 2016 Share Posted October 14, 2016 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. Link to comment Share on other sites More sharing options...
Ingolme Posted October 14, 2016 Share Posted October 14, 2016 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. Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 15, 2016 Author Share Posted October 15, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted October 15, 2016 Share Posted October 15, 2016 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; } Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 15, 2016 Author Share Posted October 15, 2016 Thank you. Now, how do I remove the numbers? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 15, 2016 Share Posted October 15, 2016 I assuming you can't simply remove them, change font color to match background. Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 15, 2016 Author Share Posted October 15, 2016 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; Link to comment Share on other sites More sharing options...
dsonesuk Posted October 15, 2016 Share Posted October 15, 2016 Yes! that will work, or you could use font-size: 0; as well. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now