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



Find us on Facebook

Follow us on Twitter

View our YouTube channel


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

ITZAP
Ecommerce Template Expert

Australia
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%;
}


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