26 replies [Last post]
Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
Was this information Helpful?

There in "Ideas & suggestions" -forum was some talking to get more attention to Ubercart buttons.

I've seen some Ubercart shops already managed to code beautifully colored "add to cart" and "Checkout" buttons. As a non coder I suppose there's some CSS-edit needed but what file and how? (maybe this is by theme by theme, or some Ubercart files? I have Tapestry theme from Rooplethemes in my mind)

All tips appreciated.

Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
Re: Any tips how to get more attention to buttons?

Attaching some screen shots what I'm after. By giving this kind of attention to these important "command buttons" shop owners are helping their clients with shopping experience.

I'd really appreciate it, if someone with the technical knowledge could provide with some tips what file and how to modify to get buttons something like that. Thanks guys!

AttachmentSize
screenshot-checkout.png 6.79 KB
screenshot-add-to-cart.png 43.5 KB
Ryan's picture
Offline
Joined: 08/07/2007
Juice: 15476
Re: Re: Any tips how to get more attention to buttons?

This is a general Drupal issue that has been addressed in Drupal 6. You can search Drupal.org for "image buttons" or "image submit" and find a few solutions I believe. It involves either some CSS or PHP or combination of both to make it happen.

Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
Ryan wrote:This is a general
Ryan wrote:

This is a general Drupal issue that has been addressed in Drupal 6...

Ahh... ok, now I'm not feeling so stupid anymore Eye-wink going to search for solutions. Thanks Ryan for the tip!

Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
I found this and this from

I found this and this from Drupal forums, but as a non coder I'm more or less lost. Thanks for the tips anyway!

mykz-'s picture
Offline
Joined: 02/13/2008
Juice: 210
Hey Abilnet Quote:Abilnet

Hey Abilnet

Quote:

Abilnet the cool buttons idea sounds great I’ll be working on a buttons.css file so you can just jump in and un-comment the buttons for your Ubercart installation also I’ll be submitting a tutorial on how to mod the cart buttons using CSS.

Quote Ref: http://www.ubercart.org/forum/development/3862/ubercart_default_theme#co...

Abilnet if you need to customize your buttons now I can always create the CSS and code for your node and CSS files.

Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
mykz- wrote:...Abilnet if
mykz- wrote:

...Abilnet if you need to customize your buttons now I can always create the CSS and code for your node and CSS files.

wow! ...I'm not in a rush with this (yet) so I first try to figure the coding out by myself... but yes, I'll be more than thankful if / when I may ask for more help later on. Appreciated!

Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
Re: mykz- wrote:...Abilnet if

Managed to get what I was after by including this snippet to style.css:

div.add_to_cart input[type=submit],

input#edit-checkout

{

outline: 2px solid red;

background: orange;

        color: #666;

        font-weight: bold;

}

An example is here ...thanks t3r0 for tips.

PS. I have only Linux / FireFox to test... I'd appreciate reports if any problems with other combinations. Thanks.

AttachmentSize
shopping-cart-with-orange-button.png 31.36 KB
uberuser's picture
Offline
Joined: 03/13/2008
Juice: 50
Re: Re: mykz- wrote:...Abilnet if

Thanks Abilnet that was neat.

uberuser's picture
Offline
Joined: 03/13/2008
Juice: 50
It works great on FireFox on

It works great on FireFox
on IE-7 no box surrounding the button
on IE-6 nothing shows up

I am using the garland theme...Any suggestions on how to fix on the IE?

thanks

Mariano's picture
Offline
Joined: 09/04/2007
Juice: 110
Re: It works great on FireFox

@_@ I'm using a modified version of Garland and tried to get it working with no luck. I added that snippet to style.css, but nothing changed. Did you have to code something else?
Thanks =)

Update: Sorry for not noticing before, but I was just checking results at the category site, which uses the grid module for displayig its products. Actually, I had to enter the specific product's node in order to see the changes to the 'Add to cart' button. In order to accomplish the same for the grid display, I had to edit likewise the uc_catalog.css =) Thanks.

torgosPizza's picture
Offline
Bug FinderEarly adopter... addicted to alphas.Getting busy with the Ubercode.
Joined: 08/14/2007
Juice: 4107
Re: Re: It works great on FireFox

I think instead of editing the core uc_catalog.css file, just throw that one CSS definition into your theme's style.css. That should change the "submit" button site-wide.

uberuser's picture
Offline
Joined: 03/13/2008
Juice: 50
Re: Re: Re: It works great on FireFox

Mariano, I did like torgosPizza said I had it in the theme's style.css and it works fine but still not able to see the same on IE though

Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
Re: Re: Re: Re: It works great on FireFox

I've asked around and unfortunately it seems that the snippet above will not work with older IE browsers. If someone has a solution compatible also with IE, please share,thanks!

stephthegeek's picture
Offline
Theminator
Joined: 10/20/2007
Juice: 575
Re: Re: Re: Re: Re: It works great on FireFox

The outline property does not work on older IEs, you're correct. However, the border property does. Here's the code in our style.css I'm using on our UC site to get the effect in the attached image. It has a default style for all buttons with a shaded hover effect in the background image (IE6 and earlier needs some additional help to get :hover working on non-anchor tags though), then we target a few specific buttons to draw attention to them with the orange. IE6 and below won't get the additional outline property, but it simply degrades by becoming invisible.

You can definitely do the same technique to do any kind of size/shape button you want, but keep accessibility in mind. The good thing about doing a simple gradient + border/outline is that the button sizes are completely flexible.

.form-submit {     /* default styling for all form buttons */
  background: #7E0303 url(images/red-button-bg.gif) repeat-x top center;
  border: 1px solid #2A2622;
  color: #fff;
  cursor: pointer;
  font-family: "Myriad Pro", "Trebuchet MS", Garamond, Verdana, Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  outline: 1px solid #48403D;
  padding: 2px;
}

.form-submit:hover {
  background: #7E0303 url(images/red-button-bg.gif) repeat-x bottom center;
  cursor: pointer;

#edit-checkout,
.add_to_cart #edit-submit,
#checkout-form-bottom #edit-continue,
#uc-cart-checkout-review-form #edit-submit {
  background: #7E0303 url(images/orange-button-bg.gif) repeat-x top center;
}

#edit-checkout:hover,
.add_to_cart #edit-submit:hover,
#checkout-form-bottom #edit-continue:hover,
#uc-cart-checkout-review-form #edit-submit:hover {
  background: #7E0303 url(images/orange-button-bg.gif) repeat-x bottom center;
  cursor: pointer;
}

AttachmentSize
cartbuttons.jpg 9.52 KB
Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
Re: Re: Re: Re: Re: Re: It works great on FireFox

Awesome stephthegeek, Thanks! ..I'm trying to implement your code also to my site, will report back with the results. Thanks again, appreciated!

Ryan's picture
Offline
Joined: 08/07/2007
Juice: 15476
Re: Re: Re: Re: Re: Re: Re: It works great on FireFox

The examples here look sharp, and it seems like you've almost got this nailed. I thought I'd just post one more link... a recent live site posting has themed buttons that are simple but effective. Smiling

Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
Re: Re: Re: Re: Re: Re: Re: Re: It works great on FireFox

Awesome help from all you guys, appreciated. I'm feeling this is coming quite close what I'm after, special thanks t3r0 for the latest code to include in style.css:

#edit-checkout, #edit-continue,
div.add_to_cart input[type=submit],
input#edit-checkout {
color: #fff;
background: #7E0303 url('bgrad.png') repeat-x top center;
border: 1px solid #ff2400;

font-weight: bold;

cursor: pointer;

}
#edit-checkout:hover, #edit-continue:hover,
div.add_to_cart input[type=submit]:hover,
input#edit-checkout:hover {
background: #7E0303 url('bgrad_hover.png') repeat-x top center;
}

An almost live example with the code above is here (I'm still not able to test with other than Linux / FireFox... reports appreciated!)

AttachmentSize
checkout-button-image.png 3.62 KB
Ryan's picture
Offline
Joined: 08/07/2007
Juice: 15476
Re: Re: Re: Re: Re: Re: Re: Re: Re: It works great on FireFox

Hey, these look amazing here! On Win XP/Firefox 2. Cool

Mariano's picture
Offline
Joined: 09/04/2007
Juice: 110
Re: Re: Re: Re: Re: Re: Re: Re: Re: It works great on FireFox

Hi there. Just tested on Win XP using FF 2, IE 7 and Opera 9. It works nicely.
Thanks for your ideas =)

torgosPizza's picture
Offline
Bug FinderEarly adopter... addicted to alphas.Getting busy with the Ubercode.
Joined: 08/14/2007
Juice: 4107
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: It works great on FireFo

They look really good in MSIE7 and Opera 9, I just thought I'd show you the size differences. MSIE makes the button almost 2x the size... it still looks good and I don't think this would break anyone's design, unless they had the checkout button really close to a design edge someplace. Take a look (comparison image attached).

AttachmentSize
opera-msie-cartbuttons.jpg 18.45 KB
Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: It works great on Fi

That's cool, thanks guys for the reports!

An update:

Just realized that also the button on "Review" page needs this attention. Here's the latest code by t3r0, Thanks by the way!

#edit-checkout, #edit-continue,
div.add_to_cart input[type=submit],
input#edit-checkout,
#uc-paypal-wps-form #edit-submit {
color: #fff;
background: #7E0303 url('bgrad.png') repeat-x top center;
border: 1px solid #ff2400;

font-weight: bold;

cursor: pointer;

}
#edit-checkout:hover, #edit-continue:hover,
div.add_to_cart input[type=submit]:hover,
input#edit-checkout:hover,
#uc-paypal-wps-form #edit-submit:hover {
background: #7E0303 url('bgrad_hover.png') repeat-x top center;
}

How to use this snippet?

Just add this code snippet to your "style.css" and copy the "bgrad.png" and "bgrad_hover.png" -files to the same directory of your style.css

The motive of this button styling is to help clients to focus on shopping and show them an easy path to actually pay the product(s)

Hopefully this is something useful for some of you guys.

AttachmentSize
bgrad_hover.png 242 bytes
bgrad.png 249 bytes
Ryan's picture
Offline
Joined: 08/07/2007
Juice: 15476
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: It works great o

You should be sure to post the files and instructions up in the contributions directory. Cool

Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
Ryan wrote:You should be
Ryan wrote:

You should be sure to post the files and instructions up in the contributions directory. Cool

Thanks Ryan, I'd upload this to the contributions, here

montana's picture
Offline
Joined: 03/27/2008
Juice: 47
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: It works great o

hi, i cant get this to work in IE6. Is there a way to get it to work?

Thanks for sharing this though.. looks awesome.

Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 714
montana wrote:hi, i cant get
montana wrote:

hi, i cant get this to work in IE6. Is there a way to get it to work?

Thanks for sharing this though.. looks awesome.

Thanks montana, I've been asking around but have not found any working solution to IE6, sorry. If someone can help here, please share, thanks!

adrianmak's picture
Offline
Joined: 05/28/2008
Juice: 312
Re: montana wrote:hi, i cant get

since IE6 (ie7and ie8 too?) don't support element with hover state other than anchor tag so it required a small script to solve this issue.