newcoder1010 Posted March 26, 2017 Share Posted March 26, 2017 Hello, I have this html when I am on page 1: <ul class="pagination"><li class="active"><span>1</span></li> <li><a title="Go to page 2" href="/content/we-buy-houses-baltimore-md?page=1">2</a></li> <li><a title="Go to page 3" href="/content/we-buy-houses-baltimore-md?page=2">3</a></li> <li><a title="Go to page 4" href="/content/we-buy-houses-baltimore-md?page=3">4</a></li> <li class="next"><a href="/content/we-buy-houses-baltimore-md?page=1"> ›</a></li> <li class="pager-last"><a href="/content/we-buy-houses-baltimore-md?page=3"></a></li> </ul> When I am on page 2, I see this html: <ul class="pagination"><li class="pager-first"><a href="/content/we-buy-houses-baltimore-md"></a></li> <li class="prev"><a href="/content/we-buy-houses-baltimore-md">‹ </a></li> <li><a title="Go to page 1" href="/content/we-buy-houses-baltimore-md">1</a></li> <li class="active"><span>2</span></li> <li><a title="Go to page 3" href="/content/we-buy-houses-baltimore-md?page=2">3</a></li> <li><a title="Go to page 4" href="/content/we-buy-houses-baltimore-md?page=3">4</a></li> <li class="next"><a href="/content/we-buy-houses-baltimore-md?page=2"> ›</a></li> <li class="pager-last"><a href="/content/we-buy-houses-baltimore-md?page=3"></a></li> </ul> Unfortunately, I do not have the option to hide the numbers in template file at this point. Instead, I would like to hide only the numbers using css. Please advise how to hide the numbers from the pagination class. Thank you in advance. Link to comment Share on other sites More sharing options...
Ingolme Posted March 26, 2017 Share Posted March 26, 2017 If you can afford to ignore Internet Explorer 10 and below, the :not() selector will do the job. .pagination > li:not(.prev):not(.next):not(.pager-first):not(.pager-last) { display: none; } If you want to support more browsers, you would first hide all the list items, then show the ones you need: .pagination > li { display: none; } .pagination > .prev, .pagination > .next, .pagination > .pager-first, .pagination > .pager-last { display: inline-block; /* Or whatever display they're supposed to have */ } But the best solution would actually be to prevent these links from appearing in the HTML in the first place, and the reason for that is that search engine robots may think you're trying to show different content to search engines than to the user. How are these links being generated? Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 26, 2017 Author Share Posted March 26, 2017 I use drupal. I create content type "testimonials". Add each content to the content type "testimonials". So each content is becoming one link. Link to comment Share on other sites More sharing options...
Ingolme Posted March 26, 2017 Share Posted March 26, 2017 I've worked with Drupal before and it does have different pagination options, at least for the views. Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 26, 2017 Author Share Posted March 26, 2017 (edited) VIews does not option to hide the numbers. What pagination option are you referring and recommending? As for css, I will take the first option you provided. Thank you much. Another question but not required. Currently, when I am on page 1, I see next class only. I see prev class when I am on page 2, 3,4. Is there way I can also display prev class when i am on page 1 as well. Prev class should point to page 4. If Prev class link is disabled on page 1, that will be fine too. Again, it is not required. I thought it would better to have prev and next on all pages. Edited March 26, 2017 by newcoder1010 Link to comment Share on other sites More sharing options...
Ingolme Posted March 26, 2017 Share Posted March 26, 2017 If you're using Drupal 7 and Views UI then the pager options are in the middle column when editing views. You have the following options for pagers: Display a specified number of items Display all items Paged output, full pager Paged output, mini pager The mini pager option has only previous, next, first and last buttons. Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 26, 2017 Author Share Posted March 26, 2017 I did change to mini pager option. Now, I see the numbers like this 1 of 4 > Numbers are still displaying but in different format. Link to comment Share on other sites More sharing options...
Ingolme Posted March 26, 2017 Share Posted March 26, 2017 There doesn't seem to be an option to remove those numbers, so you'll have to hide them with CSS, at least they're not links. The CSS for this kind of pager is easier: .pager-current { display: none; } Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 26, 2017 Author Share Posted March 26, 2017 You just read my mind. I came to post it. You already did. I will choose mini pager option if I want to hide numbers. Thanks. <ul class="pager"><li class="pager-previous"><a href="/content/we-buy-houses-kings-ny">‹ </a></li> <li class="pager-current">2 of 4</li> <li class="pager-next"><a href="/content/we-buy-houses-kings-ny?page=2"> ›</a></li> </ul> 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