Pagination on product pages

19 posts from 5 voices

• Started 11 months ago by tremblayly
• Latest reply from Mya
• This topic is resolved

Tags:

• product page pagination elements

1. 

   tremblayly
   Member

   Hi,

   I have successfully increase the font size of the pagination, however I can't seem to be able to increase the size of the previous "<" and next ">" etc text.

   Can you help figure this one out?

   Thanks,
   Lyse

   Posted 11 months ago #
2. 

   Dude
   Dude

   Hi,
   I think you mean these images: http://www.kriesi.at/themes/abundance/wp-content/themes/abundance/woocommerce-config/images/slideshow-arrow-left-dark.png and http://www.kriesi.at/themes/abundance/wp-content/themes/abundance/woocommerce-config/images/slideshow-arrow-right-dark.png - you need to resize them by using tools like Photoshop or Gimp.

   Posted 11 months ago #
3. 

   tremblayly
   Member

   Hi Dude,

   These are not images. Here's one of the HTML elements used »

   Thanks
   Lyse

   Posted 11 months ago #
4. 

   Ismael
   Moderator

   Hello,

   Can you give us a link?

   Regards,
   Ismael

   Posted 11 months ago #
5. 

   tremblayly
   Member

   Sure Ismael,

   Here's a link http://tremblaytechweb.com/TWdev/shop

   Thanks

   Posted 11 months ago #
6. 

   Ismael
   Moderator

   Hello,

   You can use this to change the font-size.

   #top .pagination span, #top .pagination a {
   font-size: 15px;
   }

   Regards,
   Ismael

   Posted 11 months ago #
7. 

   tremblayly
   Member

   Hi Ismael,

   This increases the text size which looks too big in comparison to the > and >> symbols. Is there a way I can get the symbols larger but not the text?

   Thanks,
   Lyse

   Posted 11 months ago #
8. 

   tremblayly
   Member

   Hi,

   Any progress on this issue?

   Thanks,
   Lyse

   Posted 11 months ago #
9. 

   Devin
   Moderator

   Hi Lyse,

   Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
   

   .breadcrumb-trail .sep {
   font-size: 16px;
   }

   Playing with it a bit, the font for the breadcrumbs seems to have small symbols but 16px makes it noticeably larger though a little less aligned with the rest of the breadcrumbs.

   Regards,

   Devin

   Posted 11 months ago #
10. 

    tremblayly
    Member

    Hi Devin,

    It is not in the bredcrumb-trail that I am trying to get the symbols larger it's in the pagination div where it uses the following:

    ›
    »

    I used the following to get the page numbers larger, but the symbols are still to small:
    #top .pagination span, #top .pagination a {
    border-right: 1px solid #EEEEEE!important;
    color: #2C3547!important;
    font-size: 13px;
    }
    When I increase the symbol size, the page numbers get way too large. So how to I get only the symbols to increase in size?

    Sorry for the confusion
    Lyse

    Posted 11 months ago #
11. 

    Devin
    Moderator

    Oh I see now. Sorry about that.

    I'm not sure there is anything you can do except use a different font for them. Even something like:
    

    #top .pagination span, #top .pagination a {
    border-right: 1px solid #EEEEEE!important;
    color: #2C3547!important;
    font-size: 19px;
    font-family: sans-serif;

    Should do the trick.

    Regards,

    Devin

    Posted 11 months ago #
12. 

    tremblayly
    Member

    Hi Devin,

    The CSS change the page #s and I don't want that.

    Thanks
    Lyse

    Posted 11 months ago #
13. 

    Ismael
    Moderator

    Hi Lyse,

    I checked your site and the current pagination number appears to be smaller than the rest. In your Quick CSS or custom.css, replace this code:
    

    #top .pagination span, #top .pagination a {
       border-right: 1px solid #EEE!important;
       color: #2C3547!important;
       font-size: 19px;
       font-family: sans-serif;
    }

    with this:
    

    #top .pagination span, #top .pagination a {
       border-right: 1px solid #EEE!important;
       color: #2C3547!important;
       font-size: 14px;
       font-family: sans-serif;
    }

    This will even out the sizes. We can make the > and >> larger by adding this code in your Quick CSS or custom.css:
    

    .pagination a:last-child,
    .pagination a:nth-last-child(2) {
       font-size: 18px !important;
    }

    Just adjust the font-size value that you will see fit. Hope this helps. :)

    Regards,
    Ismael

    Posted 11 months ago #
14. 

    tremblayly
    Member

    Hi Ismael,

    That's great, however, one more element I need to change in the last group of elements (<):
    ‹

    Much appreciated
    Lyse

    Posted 11 months ago #
15. 

    Ismael
    Moderator

    Hi Lyse,

    Kindly open wp-content\themes\abundance\framework\php\function-set-avia-frontend.php, and find this code:
    

    $output .= ($paged > 2 && $paged > $range+1 && $showitems < $pages)? "<a href='".$method(1)."'>&laquo;</a>":"";
    $output .= ($paged > 1 && $showitems < $pages)? "<a href='".$method($prev)."'>&lsaquo;</a>":"";

    It should be on line 556. And replace it with this code:
    

    $output .= ($paged > 2 && $paged > $range+1 && $showitems < $pages)? "<a href='".$method(1)."' class='first_page'>&laquo;</a>":"";
    $output .= ($paged > 1 && $showitems < $pages)? "<a href='".$method($prev)."' class='first_page'>&lsaquo;</a>":"";

    Then in your Quick CSS or custom.css, add this code:
    

    .first_page {
       font-size: 18px !important;
    }

    Hope this helps. :)

    Cheers,
    Ismael

    Posted 11 months ago #
16. 

    tremblayly
    Member

    Hi Ismael,

    Just before I make this change, can you tell me if this is going to be lost during an upgrade? If so, can you recommend a way I can prevent it from getting overwritten?

    Thanks,
    Lyse

    Posted 11 months ago #
17. 

    Ismael
    Moderator

    Hi Lyse,

    Yes, this will be lost during an upgrade. But you can do this steps again, if ever this will be lost. You can also change the permission for this file to 444, to avoid it from being overwritten, however, I would really recommend just to allow it from being overwritten because there might be critical updates to this file in the next update and just do these steps again. :)

    Regards,
    Ismael

    Posted 11 months ago #
18. 

    tremblayly
    Member

    Hi Ismael,

    I'm going to wait for now and see if my client asks to change it. Then I will come back to my post and proceed in making the changes.

    Thank you very much to all who help me accomplish the changes I wanted.

    Lyse

    Posted 11 months ago #
19. 

    Mya
    

    Hi Lyse,

    Glad Devin and Ismael could help you!

    Regards,
    Mya

    Posted 11 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.