Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Save Password
Forgot your Password?

Find us on Facebook

Follow us on Twitter

View our YouTube channel

 All Forums
 Advanced Tips and Tricks - NO QUESTIONS PLEASE
 detailimagenavigator colored PREV - NEXT buttons
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

Ecommerce Template Expert

778 Posts

Posted - 07/08/2019 :  20:22:59  
According to this Forum topic, as from Ecommerce Templates v6.7 the div.imagenavigator "PREV 1 of x NEXT" buttons now display as text, instead of the small arrow images.

If you would like to style those PREV and NEXT buttons using colorful CSS, well here we go ...

This CSS scheme uses a dark green color: #0f4637 button with dark red color: #b00000 hover.
Replace those HEX# colors with whatever suits your website.

/* (Optional) HIDE imagenavigator buttons on products summary pages */
div.imagenavigator, div.csimagenavigator {
display: none;

/* CSS for proddetail page. */
div.imagenavigator.detailimagenavigator {
display: block;
font-family: "Roboto", Arial, sans-serif;
color: #0f4637;
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.1em;
line-height: 1.8;
white-space: nowrap;

div.imagenavigator.detailimagenavigator input.detailprevimg,
div.imagenavigator.detailimagenavigator input.detailnextimg
display: inline-block;
border: 1px solid transparent;
-webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
transition: background-color 0.25s ease-out, color 0.25s ease-out;
font-family: inherit;
-webkit-appearance: none;
line-height: 1;
text-align: center;
cursor: pointer;
background-color: #0f4637;
color: #FFFFFF;
vertical-align: baseline;
font-size: 0.8rem;
margin: 0;
padding: 0.25em 0.3em 0.25em 1.2em;
border-radius: 50% 8% 8% 50%;

div.imagenavigator.detailimagenavigator input.detailprevimg:hover,
div.imagenavigator.detailimagenavigator input.detailprevimg:focus,
div.imagenavigator.detailimagenavigator input.detailnextimg:hover,
div.imagenavigator.detailimagenavigator input.detailnextimg:focus
background-color: #b00000;
color: #FFFFFF;

div.imagenavigator.detailimagenavigator input.detailnextimg {
padding: 0.25em 1.2em 0.25em 0.3em;
border-radius: 8% 50% 50% 8%;

 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019
This page was generated in 0.02 seconds. Snitz Forums 2000