Hi,
I changed the color and size of the buttons "Add to Cart" and"Proceed to Checkout".
What I made is to go to:
skin/frontend/default/jm_ores/css
edit theme.css and add these lines
button.btn-cart span , button.btn-cart span span {
color: #33CC44
font-size: 110%;
}
button.btn-proceed-checkout span , button.btn-proceed-checkout span span {
color: #33CC44
font-size: 110%;
}
Now I wanna change the buttons "Checkout" and "Continue" but I don’t know how to change these two buttons.
I don’t wanna change the color of all the buttons, that I know how to do, what I wanna do is to change only "Checkout" and all the "Continue" buttons when I’m in the checkout screen.
I attach two pictures to show the buttons.
Thanks in advance!!!
11 answers
So that I can try to best assist you, please provide the url of the site you’re working on,
as well as set "Optimize CSS" to "No" within your Template Manager-General settings
The url is :
At the moment, the website is with the demo content and I’m only making the changes before to add products.
I’m sorry but I don’t know where to change "Optimize CSS" to "No"
Thank you very much
Juan
What I made is to go to:
skin/frontend/default/jm_ores/css
edit theme.css and add these lines
button.btn-cart span , button.btn-cart span span {
color: #33CC44
font-size: 110%;
}button.btn-proceed-checkout span , button.btn-proceed-checkout span span {
color: #33CC44
font-size: 110%;
}
You can change the color value at those css attribute, don’t they work ?
Hi Sherlock Holmes,
With that code, I can change the color of "Add to Cart" and "Proceed to Checkout" but I wanna change the color of "Checkout" and "Continue" but I don’t know why.
I wanna change only those 4 bottons, not all the bottons of the website.
Thank you
Hi Sherlock Holmes,
With that code, I can change the color of "Add to Cart" and "Proceed to Checkout" but I wanna change the color of "Checkout" and "Continue" but I don’t know why.
Within file path --> skin/frontend/default/jm_ores/css/theme.css
at line 100, you will see the following:
Code:
.button, .btn-cart { background: url("../images/but-bg.gif") repeat-x scroll left bottom #202020 border: 1px solid #151515 color: #CCCCCC cursor: pointer; font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif !important; font-size: 100%; height: 30px; line-height: 28px; overflow: visible; padding: 0 10px !important; text-align: center; vertical-align: middle; }
It looks like it is here where you can make your relative modifications for those buttons.
I would also highly recommend utilizing the following to assist you further --> Using FIREBUG to CUSTOMIZE YOUR SITE
Thank you TomC, but if I make a modification there, all the buttons will change and I only wanna change "Checkout" and "continue".
I could change the color of "Add to cart" and "Proceed to checkout" but I have no idea how to change only "Checkout" and "Continue".
Any help will be appreciated.
Juan
Hi jafc76,
For the checkout button you can try with this css rule
HTML Code:
.block-cart .btn-cart{ your rules goes here; }
For the continue button try this rule
HTML Code:
#checkoutSteps .btn-cart{ your rules goes here; }
That would help to defined specific css rule for those mentioned buttons and it would not affect other buttons.
I hope you got the ideal !
Hi jafc76,
For the continue button you can try with this css
HTML Code:
#onepage-guest-register-button{ your css attributes goes here }
And for the checkout button you try with this css
HTML Code:
.block-cart .button{ your css attributes goes here }
I hope that would help !
Within file path --> skin/frontend/default/jm_ores/css/theme.css
at line 100, you will see the following:
Code:
.button, .btn-cart { background: url("../images/but-bg.gif") repeat-x scroll left bottom #202020 border: 1px solid #151515 color: #CCCCCC cursor: pointer; font-family: Arial,Tahoma,Verdana,Helvetica,sans-serif !important; font-size: 100%; height: 30px; line-height: 28px; overflow: visible; padding: 0 10px !important; text-align: center; vertical-align: middle; }It looks like it is here where you can make your relative modifications for those buttons.
I would also highly recommend utilizing the following to assist you further --> Using FIREBUG to CUSTOMIZE YOUR SITE
Thank you TomC, now I’m using Firebug
This question is now closed