 |
UbercartOne cart to rule them all... |
|
| Donate to Ubercart | ||
Any tips how to get more attention to buttons?
Submitted by Abilnet on Sat, 03/15/2008 - 22:19
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.
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!
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. This is a general Drupal issue that has been addressed in Drupal 6...
Ahh... ok, now I'm not feeling so stupid anymore Hey Abilnet 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 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! Managed to get what I was after by including this snippet to style.css: div.add_to_cart input[type=submit],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.
Thanks Abilnet that was neat. It works great on FireFox I am using the garland theme...Any suggestions on how to fix on the IE? thanks @_@ 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? 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. 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. 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 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! 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 */
Awesome stephthegeek, Thanks! ..I'm trying to implement your code also to my site, will report back with the results. Thanks again, appreciated! 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. 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,An almost live example with the code above is here (I'm still not able to test with other than Linux / FireFox... reports appreciated!)
Hey, these look amazing here! On Win XP/Firefox 2. Hi there. Just tested on Win XP using FF 2, IE 7 and Opera 9. It works nicely. 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).
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,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.
You should be sure to post the files and instructions up in the contributions directory. You should be sure to post the files and instructions up in the contributions directory.
 Thanks Ryan, I'd upload this to the contributions, here 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. 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!
|
|
going to search for solutions. Thanks Ryan for the tip!
Joined: 12/28/2007