Here's how to add custom css buttons to your website. Don't hassle over flickering multiple-image buttons open cart default styles use, add your own CSS and make your own buttons!
First, go into your graphic editing program. Make the button size 80px in width and 25px in height. After you have your first button made, make a new image document with the dimensions of: 80pixels in width and 75pixels in height. Then, stack your pre-made buttons on top of each other so they're evenly spaced.
Next, change the middle button to a darker shade or gradient, this will be your hover button. Then, change the bottom button to a flipped gradient, or the opposite of the first button.
Then, open up Stylesheet.css from your OpenCart download files. Find this section:
/* button */
Replace the "a.button" "a.button span" "a.hover" a.hover span" with this:
/* button */
a.button {
display: inline-block;
padding-left: 0px;
background: url('../image/mainbutton.png') no-repeat 0 0;
width:80px;
height:25px;
text-decoration: none;
text-align:center;
cursor: pointer;
}
a.button span {
color: #FFFFFF;
line-height: 25px;
font-size: 12px;
font-weight: bold;
display: inline-block;
text-align:center;
padding-left:0px;
background: url('../image/mainbutton.png') no-repeat 0 0;
width:80px;
height:25px;
}
a.button:hover {
background: url('../image/mainbutton.png') no-repeat;
background-position:0 -25px;
}
a.button:hover span {
color: #FFFFFF;
background: url('../image/mainbutton.png') no-repeat;
background-position:0 -25px;
}
a.button:active {
background: url('../image/mainbutton.png') no-repeat;
background-position:0 -50px;
}
a.button:active span {
color: #FFFFFF;
background: url('../image/mainbutton.png') no-repeat;
background-position:0 -50px;
}
Of course, you're going to want to change the actual name of the buttons, but there's the code!
Enjoy! Hope this helped!
Beetlesales
www.beetlesales.com
Who is online
Users browsing this forum: No registered users and 2 guests
