26 replies to this topic

[dangerrabbit]

Hi,

I've been working on my first OS-Commerce website, and I managed to figure out how to customize the look and functionality of most of the site, that is until I wanted to customize the CSS style of only the 'Add to Cart' button on the product information page. In this case, I would like to increase padding and change the background and font color - although after looking at the code, I have no clue as to how I should go about it.

Currently, I have this as the code for my 'Add to Cart' button on the Product Information page (catalog/product_info.php)

<span id="buttonAction"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', null, 'primary'); ?></span>

I realize that buttons can be customized with Themeroller, but as far as I know that would affect all the buttons on the website, and I want to customize only the 'Add to Cart' button on the product information page.

I tried following fox2p's instructions on this thread, but to no avail.

I'm pretty competent when it comes to HTML and CSS although my Javascript and PHP knowledge leaves much to be desired - I am working on it though!

Any help would be greatly appreciated!

Thanks,

Dru

[multimixer]

You don't need any php and such to do this, you do it in css

All you need is to be very specific in your targeting

For example, I would say that the add to cart button is the only button on the product info page that
- is in a div with class buttonSet
- is in a span with class buttonAction
- is a <button>
- has a type=submit

I think that's more than enough to locate it and apply any css to it

[dangerrabbit]

multimixer, on 26 September 2011 - 12:14 PM, said:

You don't need any php and such to do this, you do it in css

All you need is to be very specific in your targeting

For example, I would say that the add to cart button is the only button on the product info page that
- is in a div with class buttonSet
- is in a span with class buttonAction
- is a <button>
- has a type=submit

I think that's more than enough to locate it and apply any css to it

Thanks George! I tried targeting the button with CSS by including it in stylesheet.css, but it doesn't seem to be working. The styling doesn't change at all, it still has the button styling as per the theme I got from Themeroller.

I used:

#buttonSet .buttonAction {
	background-color:#FC0;
}

[multimixer]

You must apply the style to the button and not to the span around it. Try something like this

#buttonSet .buttonAction button[type=submit] {
	background:none;
	background-color:#f00;
}

You can also override any of the following classes, depending on your needs, but again, be specific not to change all buttons

ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-primary

hover state is ui-state-hover

To target the text within the button use #buttonSet .buttonAction button[type=submit] span.ui-button-text

You need of course to apply that rules only in case the page you are on is product_info.php

[dangerrabbit]

Thanks George, that got it working!

[rachael_web86]

I tried this but it didn't work / any ideas why? I copied this code;

#buttonSet .buttonAction button[type=submit] {
    background:none;
    background-color:#f00;
}

into my stylesheet but it still won't change the look of my add to cart button?

[multimixer]

Rachael, I just noticed my self, OP did a mistake when posting the code, and I did just repeat it

"buttonSet" is not a "id", but a class, so the rule should be something like

.buttonSet .buttonAction button[type=submit] {
	background:none;
	background-color:#f00;
}

You need to make sure that the rule apply only on product info, otherwise it will affect all submit buttons

[rachael_web86]

Ah thanks for that George Only thing is though if you check out http://www.mochodesigns.co.uk/mothergoose/yummy-mummy.php You can see the buy now button image is still contained within a grey box for some reason?

Thanks!

[multimixer]

I see that you don't use ui-buttons, however, that is not an issue.

Here is a suggestion for styling your buttons, without using background images and other unnecessary stuff.

Replace what you have with this here, and then you can start playing around

.buttonSet .buttonAction button[type="submit"] {
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border-radius: 7px 7px 7px 7px;
   -moz-box-shadow: -1px 1px #000000;
   -webkit-box-shadow: -1px 1px #000000;
	box-shadow: -1px 1px #000000;
	background: #B49859;
	border: 1px solid #333333;
	color: #FFFFFF;
	line-height: 25px;
	padding: 5px;
	width: 77px;
}

2 comments
- You don't need to use all that rules, I just added them so you can play around
- You can define different settings for other states

[rachael_web86]

Brilliant George just what I needed, thank u so much for your help )

[islandgeek]

Hi George, that was great advice thank you, I have managed to get the look I want using the following code

.buttonSet .buttonAction button[type="submit"] {
border-radius: 1px 1px 1px 1px;
background: #f39700;
color: #ffffff;
line-height: 25px;
padding: 0px;
width: 130px;
}

I would also like to have a rollover where the background changes to #5c7477 and to lose the little cart icon that shows, are you able to advise?

Also how do I make this show on any page where a buy now button shows, for example in products_new.php

[svella]

I, too, need to need to have a rollover for the button colors for specific buttons.
Also I need to define rules for the icon colors for those specific images in my css, using the icon images and colors I created using the jquery themeroller.
And, I need to have a rollover for the color of the icons, as well (already defined by the jquery themeroller).
Thank you in advance for your support.
I have been beating my head against the wall regarding this rollover for at least 2 weeks, and wold greatly appreciate your help.
Thanks.

[multimixer]

Can You be more specific?

What button on what page you mean?

Your themeroller theme includes already 3 different button states, for default, hover, active, that can have different colors etc

[svella]

Thank you *so* much for your response.
Yes, the themeroller has default, hover, active states, and can have different colors.
However, I wish to change button color and icon color only on specific buttons -- and use the default for others.
Example: in my stylesheet, I have for example:

.buttonSet .buttonAction button[type="submit"] {
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border-radius: 7px 7px 7px 7px;
   -moz-box-shadow: -1px 1px #000000;
   -webkit-box-shadow: -1px 1px #000000;
    box-shadow: -1px 1px #000000;
    background: url(images/icons/ui-bg_glass_60_c8e6c8_1x400.png) 50% 50% repeat-x;
    border: 1px solid #699859;
    color: #699859;
    line-height: 25px;
    padding: 5px;
    width: 77px;
}

This successfully change the "Add to Card" on the product info page to colors, size, etc in the style above. (Thank you for your previous post!)

You indicate that:

"You can also override any of the following classes, depending on your needs, but again, be specific not to change all buttons

ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-primary

hover state is ui-state-hover"

This is my question. How do I override these class in my CSS?

I have tried to include ui-state-default, ui-state-hover, etc in many ways in my stylesheet but am unsuccessful.

(for example:
.buttonSet .buttonAction ui-state default button[type="submit"] { ... or
.buttonSet .buttonAction button[type="submit"] span.ui-state.default { ...
results in the default colors for the buttons, etc (even size) defined by the jquery themeroller.

Your assistance is greatly appreciated, efhasristo.

[multimixer]

It's all about being specific in your css.

Your stylesheet.css is pulled after the ui stylesheet, so any rules there will override the ui rules. Since you don't want to change this all over the site, you need to be specific

That's why my question, what button on what page do you want to change?

You also need to be of course correct in your css and the order you place the selectors and classes, eg there is no span element with a class "ui-state-default" within a button element of type submit, so the rule don't know to where to apply

[svella]

George, thank you for your response! I am experimenting with the "Add to Cart" button on the product info page, and only that -- and if I should wish to do something similar to other button.

So, I must say that I'm not sure what the correct order to place classes such as ".ui-state-default", ".ui-state-default .ui-icon", ".ui-state-hover", ".ui-state hover .ui icon", and that is exactly what I need suppor with, in this case for the "Add to Cart" button.

I have generated another set of buttons using the Jquery themeroller, and wish to use the various buttons colors, icons, and default and hover states to specific button as choose.

This order below for example does not work, and result in the defaults from the ui stylesheet for the Add to Card button on the product info page.

.buttonSet .buttonAction .ui-state default button[type="submit"] { ...

so... that is why I am "stuck"...

I hope that clarifies my dilemma, and thank you for your support!

[multimixer]

Selena,

You can check what each class do in the jquery ui css file

You can check the order the classes are applied using the "developer tools" or whatever they are called that Firefox and other browsers offer. In any case, all ui classes are applied either to the button itself or to the <span> elements within the button, there are 2 of them, one for the icon and another for the text

From there on, you don't need to mess with the ui classes directly, you can specify different rules for the complete button, for the different states, like :hover or :active

.buttonSet .buttonAction button[type="submit"]:hover { .... }

.buttonSet .buttonAction button[type="submit"]:active { .... }

To be more specific I would need to know exactly what you want to achieve, do you have any drawings of how the button should look like?

[svella]

Hi, George: MANY thanks! I will try it out.
My goal for the "Add to Cart" button is the same button (size, type of icon, etc), but with different background color (acutally image), hover color (actually image), icon color and hover icon color.
I generated another button set using the Jquery themeroller  -- and therefore have all the colors (ie images) for the background button image, hover button image, icon colors, hover icon color, etc. I have all the images and colors that I want for the "Add to Cart" button (and perhaps others).
So, the default (or out of the box) button colors use a blue background image (and a "glass" texture"), and slightly different blue hover image, and blue icon image and slightly different blue icon hover image.
I wish to replace the background default and hover images with 2 different greens, and the "cart" icon default and hover images with 2 different greens. (And change the border color but that is easy).
I hope that gives you and idea of what I am attempting to do....
I will give what you suggest a try, and get back to you tomorrow!
Thank you *so* much again!

[svella]

Hi, again, George,
I hope that I will not have to bother you beyond this: this is what I have today:

This all refers to the "Add to Cart" on product_info.php:

1. Here is what I see from the developer tool:
<div class="buttonSet">
<span class="buttonAction">
<input name="products_id" type="hidden" value="132"/>
<span class="">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-priority-primary" id="tdb4" role="button" aria-disabled="false" type="submit" jQuery1339558413970="6">
<span class="ui-button-icon-primary ui-icon ui-icon-cart"/>
<span class="ui-button-text">
Text - Add to Cart
<script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-primary").parent().removeClass("tdbLink");</script>

I have hightlighted the span class to do with the icon as that is what I am working on now.

2. Here is MY stylesheet for the Add to Cart button:

.buttonSet .buttonAction button[type="submit"] {
    background: url(images/icons/ui-bg_glass_60_c8e6c8_1x400.png) 50% 50% repeat-x;
    border: 1px solid #699859;
    color: #699859;
}
.buttonSet .buttonAction button[type="submit"] :hover {
    background: url(images/icons/ui-bg_glass_50_bedcbe_1x400.png) 50% 50% repeat-x;
    border: 1px solid #699859;
    color: #699859;
}

.buttonSet .buttonAction button[type="submit"] span.ui-icon-cart {
    background: url(images/icons/ui-icons_699859_256x240.png);
}

3. The FIRST TWO rules do appear to change the background color of the button in the default & hover state - in Internet Explorer. THANK YOU!
You can tell that I used the Jquery themeroller to generate the background images of the color and texture of my choice.

NOTE: interestingly, this does appear to render in Firefox -- the hover state does not appear to change?? I am not certain why.

4. The third rule:
.buttonSet .buttonAction button[type="submit"] span.ui-icon-cart {
    background: url(images/icons/ui-icons_699859_256x240.png);
}

Did change the color of the icon to a green color as I want, HOWEVER, the icon symbol is NOT a cart - it is " ^ " (a caret symbol).

I tried:
.buttonSet .buttonAction button[type="submit"] span.ui span.ui-icon-cart {
    background: url(images/icons/ui-icons_699859_256x240.png);
}

The result is the same.

And

.buttonSet .buttonAction button[type="submit"] span.ui-button-icon-primary span.ui span.ui-icon-cart {
   background: url(images/icons/ui-icons_699859_256x240.png);
}

This resulted in the original, out-of-box default BLUE cart icon  (NOT green).

Quite obviously I am not defining something correctly. How can I have the cart icon and have it in green color also? (699859 is a green color)

May I please ask for your help?

Thank you very much in advance.  Efharisto.

[multimixer]

@svella

I see you are on the right path

Quote

. The FIRST TWO rules do appear to change the background color of the button in the default & hover state - in Internet Explorer. THANK YOU!

NOTE: interestingly, this does appear to render in Firefox -- the hover state does not appear to change?? I am not certain why.

They should work in FF too. Could you post your css for the hover state exactly as it is in your css file using "code tags". Or say your url?

Quote

4. The third rule:

[color=#FF0000].buttonSet .buttonAction button[type="submit"] span.ui-icon-cart [/color]{
background: url(images/icons/ui-icons_699859_256x240.png);
}

Did change the color of the icon to a green color as I want, HOWEVER, the icon symbol is NOT a cart - it is " ^ " (a caret symbol).

All button symbols are on one single image that contain all symbols. The individual symbols come to the screen by altering the "background-position". Right now, since you don't have any specified, I guess it display the top left, that is symbol ^, you can say that this stands for "undefined". You will get the same what you create a button using symbol "kuku" instead of eg "cart",


You need to ally following background position

background-position: -48px -112px;

The other 2 rules that you tried are (i'm sorry but ..) nonsense for the css.

Why?

You say: span.ui span.ui-icon-cart

What does this mean? You are telling to the system to sind a span element with class  "ui-icon-cart" (span.ui span.ui-icon-cart) that is a child element of an other span with class "ui" (span.ui)

Does such a case exist in your html? No it doesn't, and of course your rule has no effect

You are almost done