The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 10-29-2015, 10:06 PM
Cal Sports Academy's Avatar
Cal Sports Academy is offline
 
Join Date: Jul 2015
Posts: 2
Default

Custom Pagination


Hi,

Is it possible to replace the numbers in the pagination to just circle images? For instance, if I have 5 pages of products, there would be 5 circles for pagination from page to page. Many image viewers use this type of navigation.

Thanks for any assistance.
Ron
  #2  
Old 11-02-2015, 12:30 PM
Liza P's Avatar
Liza P Liza P is offline
Ecwid Team
 
Join Date: Jan 2013
Posts: 2,517
Default

Quote:
Originally Posted by Cal Sports Academy View Post
Hi,

Is it possible to replace the numbers in the pagination to just circle images? For instance, if I have 5 pages of products, there would be 5 circles for pagination from page to page. Many image viewers use this type of navigation.

Thanks for any assistance.
Ron
Hello,

It is possible to change the looks of pagination with the help of CSS. We have a ready code for similar case. I can adjust the code for your needs if you detail how exactly it should look. A screenshot or a link to a page with an example will help a lot.

Thank you.
__________________
Liza P.
Customer Care
Ecwid Help Portal
  #3  
Old 11-02-2015, 01:58 PM
TCA's Avatar
TCA TCA is offline
 
Join Date: Nov 2015
Posts: 1
Default

Hi Liza,

Thanks for the response. I've attached a screen cap of what I'm looking to try and accomplish with the pagination.

Thanks,
Ron

  #4  
Old 11-06-2015, 04:52 PM
Liza P's Avatar
Liza P Liza P is offline
Ecwid Team
 
Join Date: Jan 2013
Posts: 2,517
Default

Quote:
Originally Posted by TCA View Post
Hi Liza,

Thanks for the response. I've attached a screen cap of what I'm looking to try and accomplish with the pagination.

Thanks,
Ron

Hello,

Thank you for the screenshot.

Here is the code that will help you to change the look of the pagination in your store:

Code:
/* Hide Pages */
.ecwid-pager span.gwt-InlineLabel {
  display: none;
}

/* Width and height of round buttons */
span.ecwid-pager-link {
  padding: 1px 4px;
  margin: 6px;
}

/* Inactive round buttons styles */
.ecwid-pager-link-enabled {
  border-radius: 50%;
  background-color: lightgrey !important;
  -webkit-border-radius: 50%;
  padding: 0px;
  transition: all 0.5s 0s; 
}

/* Round buttons on hover */
.ecwid-pager-link-enabled:hover {
  background-color: grey !important;
  transition: all 0.5s 0s; 
}

/* Current page button */
.ecwid-pager-link-disabled {
  background-color: black !important;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

/* Make the page numbers transparent */
div.ecwid-pager span.ecwid-pager-link-enabled {
  color: transparent;
}

/* Hide Next and Previous links*/
.ecwid-pager-next-label,.ecwid-pager-next-label:hover,.ecwid-pager-prev-label,.ecwid-pager-prev-label:hover {
 display: none !important;
}
Please, add this code to your custom CSS theme under Settings -> Design in your Ecwid control panel.

If you have any questions, please, let me know.
__________________
Liza P.
Customer Care
Ecwid Help Portal
  #5  
Old 11-06-2015, 04:57 PM
Cal Sports Academy's Avatar
Cal Sports Academy Cal Sports Academy is offline
 
Join Date: Jul 2015
Posts: 2
Default

Hi Liza,

That's awesome! Exactly what I was looking to do. Greatly appreciate the help with the css.

Great customer service.

Have a good weekend.
Ron
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:24 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.