Orange buttons for expected action
 

On any given page, especially check out pages, I want the most important button to be big and Orange.

It was fairly easy to replace the "Add to cart" button, but very confusing as how to replace the "Checkout" buttons and other "move forward" buttons in the checkout process (without changing all other buttons).

See what I mean at http://www.brainwavestoys.com

Open to advice here. I can hack php and some CSS, but I'll buy a button package (do these exist) or pay someone to do this if necessary.

Thoughts?


-Michael
Brainwaves Educational Toys
X-Cart 4.1.9 at EWD Hosting

Re: Orange buttons for expected action
 

Easiest way is to create a new button template (in the buttons/ folder) and call that for all the big call to action type of buttons.

Moving to Template Editing.

Re: Orange buttons for expected action
 

Hi,

I am trying to do the same to the "Add To Cart" button, add_to_cart.tpl . It's really bland right now. In languages I changed the wording from Add to Cart to Buy it Now, and I would like to make only this particular button font bold. The template code is:

{include file="buttons/button.tpl" button_title=$lng.lbl_add_to_cart href=$href title=$title style=$style}

Is there something I can add right here just to make this one font on this button bold? Maybe {font-weight: bold} ? I think it will help it a lot.

Thanks so much!

Vera

Re: Orange buttons for expected action
 

Hi Vera -

I took a look at the "Add to Cart" button in the demo X-CART store - and it is set up to be bold text. So, maybe you have a mod to make it plain text along the way somewhere?

If you have not changed the css class from the default - it is using Button - which in the default is defined:
font.Button {skin1.css (line 712)
color:#490101;
font-family:Verdana,Arial,Helvetica,Sans-serif;
font-size:11px;
font-weight:bold;
text-decoration:none;
}

You can check your skin1.css to see the class that is defining your button. If you did get rid of the bold for a reason (probably many buttons share this class) - there are ways to edit button.tpl for a specific button - or, it may be easiest to do as Balinor suggested and make your own button.tpl. You can post or pm a link if you want more information about why your style is plain text there.

Re: Orange buttons for expected action
 

Hi, gb2world,

The site is highly customized but not by me. I looked at the skin1.css but could not find anything relating to buttons... I am hoping that it is ok to add the statement on the button.tpl for that button only (add_to_cart.tpl) so only that button is bold. All the others are fine for now.

Changing the skin1.css will change all the buttons on the site. I think I may have to create a new class like add_to_cart and then define the font for it. For me it would just be easy if I could just add the the bold command on the template for that button alone as I am not good at CSS as you can probably tell :)

Thanks very much!

Re: Orange buttons for expected action
 

I'd need to see a link to help. You can pm if you do not want to post it.

Re: Orange buttons for expected action
 

Thanks for the advice. I ended up swiping the orange buttons from the default x-cart installation and brought them over to my live site. To create an orange "Big" button at checkout, I had to go into the Fast Lane Checkout folders under Skin1/Modules to make my changes.

Thanks again.

-Michael