View Single Post
  #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