I had been using Googling and searching this board.
I am finding lots of inform on how to change the text in the buttons and how to change the color of the buttons.
I can not find one shred of info on how to change the buttons themselves. Can we not add our own button graphics?
Thank you,
Fred
Do you have an example of what you mean by 'button graphics'?
I use css imageless buttons and there are generators that can create the css for you that'll allow you to change many different things (color, size, text style etc) - maybe this css button generator would help ?
Simon
I use css imageless buttons and there are generators that can create the css for you that'll allow you to change many different things (color, size, text style etc) - maybe this css button generator would help ?
Simon
The default buttons are backgrounds that 'shift' on hover, so if you want to abandon that hover effect then you could just replace the button background and remove the value text that gets overlaid ... check here: /catalog/view/theme/default/image/button.png
Bit of a job replacing image buttons throughout a cart .... alot easier using css based buttons
Simon
Bit of a job replacing image buttons throughout a cart .... alot easier using css based buttons
Simon
That is what I thought. Its not really an option to change the button images in Opencart. Only the color and wording are meant to be changed.
I have changed the hover color many times but I am just not satisfied with it. I want to use a fancier button graphic.
I have changed the hover color many times but I am just not satisfied with it. I want to use a fancier button graphic.
You'd also want a set of buttons in the same style. To swap them out is possible, a few things to consider beforehand. Hence css buttons ... can be consistent.
Simon
Simon
Here's a set of buttons I use. I've turned them red for you so it better fits your theme.
You put the 4 images into:
catalog\view\theme\-yourtheme-\image
Back up the exisitn images first.
There is also a text file included in the zip showing the CSS changes for text colours.
You put the 4 images into:
catalog\view\theme\-yourtheme-\image
Back up the exisitn images first.
There is also a text file included in the zip showing the CSS changes for text colours.
Attachments
Thank you,granddaddy wrote:Here's a set of buttons I use. I've turned them red for you so it better fits your theme.
You put the 4 images into:
catalog\view\theme\-yourtheme-\image
Back up the exisitn images first.
There is also a text file included in the zip showing the CSS changes for text colours.
I am interested in seeing how those buttons look on my site but when I enter those css changes in the stylesheet it throws the whole site off. Are we both using 1.5.6?
I see the a button lines and a button:hover lines but I do not see a line for span and hover span. I added those lines but it just broke the site up and i had to upload the orignal back in.
This is what I am looking at in my style sheet
Code: Select all
/* button */
a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: url('../image/button.png') repeat-x;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
}
a.button {
display: inline-block;
text-decoration: none;
padding: 6px 12px 6px 12px;
}
input.button {
margin: 0;
border: 0;
height: 24px;
padding: 0px 12px 0px 12px;
}
a.button:hover, input.button:hover {
background-position: 0px -24px;
}
.buttons {
border: 0px solid #EEEEEE;
overflow: auto;
padding: 6px;
margin-bottom: 20px;
}
.buttons .left {
float: left;
text-align: left;
}
.buttons .right {
float: right;
text-align: right;
}
.buttons .center {
text-align: center;
margin-left: auto;
margin-right: auto;
}I'm not using 1.5.6. I use an earlier version. I've had a look at the differences in the CSS and it appears that the creation of buttons was completely redesigned in 1.5.6
In the old method, 4 images were used which had curved corners in the images themselves. In 1.5.6 there is only one image and it repeats itself to get the correct width (the old version didn't need this) and creates corners using CSS 'radius' attributes.
The 'span's were used in the old version but don't apply in the new one.
So, no you won't be able to adapt my buttons at-all. That's a shame because if you look at my site you can see the hover effect is quite good:
http://www.buffaloleather.co.uk/leather ... movers.htm
Hopefully someone else can step in here to advise you how to change the 1.5.6 buttons.
In the old method, 4 images were used which had curved corners in the images themselves. In 1.5.6 there is only one image and it repeats itself to get the correct width (the old version didn't need this) and creates corners using CSS 'radius' attributes.
The 'span's were used in the old version but don't apply in the new one.
So, no you won't be able to adapt my buttons at-all. That's a shame because if you look at my site you can see the hover effect is quite good:
http://www.buffaloleather.co.uk/leather ... movers.htm
Hopefully someone else can step in here to advise you how to change the 1.5.6 buttons.
Thank you for sharing your link. I was going to ask you for it. You have a very professional looking site. I bet your products would go nicely with my leather holsters.granddaddy wrote:I'm not using 1.5.6. I use an earlier version. I've had a look at the differences in the CSS and it appears that the creation of buttons was completely redesigned in 1.5.6
In the old method, 4 images were used which had curved corners in the images themselves. In 1.5.6 there is only one image and it repeats itself to get the correct width (the old version didn't need this) and creates corners using CSS 'radius' attributes.
The 'span's were used in the old version but don't apply in the new one.
So, no you won't be able to adapt my buttons at-all. That's a shame because if you look at my site you can see the hover effect is quite good:
http://www.buffaloleather.co.uk/leather ... movers.htm
Hopefully someone else can step in here to advise you how to change the 1.5.6 buttons.
As the others said apparently there is a way to change the buttons out in 1.5.6, but I am not sure it is worth the trouble. I am going to change the colors to the images you sent and see how that looks.
Fred
Who is online
Users browsing this forum: No registered users and 138 guests
