Changing some buttons color

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

Profile photo of tomc 0.00 $tone December 14, 2012
Public

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

#1
Profile photo of Sherlock 0.00 $tone December 17, 2012
Public

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 ?

#3
Profile photo of Juan Fagundez 0.00 $tone December 18, 2012
Public

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

#4
Profile photo of tomc 0.00 $tone December 19, 2012
Public

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

#5
Profile photo of Juan Fagundez 0.00 $tone December 20, 2012
Public

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

#6
Profile photo of Sherlock 0.00 $tone December 20, 2012
Public

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 !

#7
Profile photo of Juan Fagundez 0.00 $tone December 20, 2012
Public

Hi Sherlock Holmes,

After to add this code:

.block-cart .btn-cart{
color: #33CC44
font-size: 110%;
}

#checkoutSteps .btn-cart{
color: #33CC44
font-size: 110%;
}

to skin/frontend/default/jm_ores/css/theme.css

Nothing changed. Am I doing something wrong?

Thanks

Juan

#8
Profile photo of Sherlock 0.00 $tone December 21, 2012
Public

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 !

#9
Profile photo of Juan Fagundez 0.00 $tone December 21, 2012
Public

Thank you Sherlock Holmes!

Now everything is like I wanted

What you told me was working well, but I added this code to change all the "Continue" buttons at "Checkout".

#checkoutSteps .button{
color: #33CC44
font-size: 100%;

Thanks for your help, another thing working well.

Juan

#10
Profile photo of Juan Fagundez 0.00 $tone December 21, 2012
Public

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

#11

This question is now closed

Written By

Comments