Latest News: (loading..)

Archived

This topic is now archived and is closed to further replies.

dangerrabbit

Hel with CSS styles for individual buttons in 2.3.1

27 posts in this topic

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

Share this post


Link to post
Share on other sites

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 likes this

Share this post


Link to post
Share on other sites

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;
}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 likes this

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@@svella

 

I see you are on the right path :)

 

. 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?

 

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

Share this post


Link to post
Share on other sites

Hi, George: Thank you very much, your support made the correct icon of the correct color appear on the Add to Cart button!

Yes, I did know all the symbols are on a single image -- and I DID wonder the correct one was chosen :-)

 

It does seem that Firefox does not render the hover - of either the button background color or the icon - properly....

 

Here's the URL: starkclients.us/youngwell.biz ==> it an ecommerce site for a naturopathic physician.

On the "home" page, pick an item such as "brain tincture" and click and the button in question is the "Add to Card" button on the product_info page, on the right.

I am going to remove the "reviews" button as we are NOT going to have reviews.

 

Here's the text of my css (from Firefox Firebug):

 

 

.buttonSet .buttonAction button[type=submit] {

 

 

background: url("images/icons/ui-bg_glass_60_c8e6c8_1x400.png") repeat-x scroll 50% 50% transparent;

border: 1px solid #699859;

color: #699859;

}

 

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

 

 

background: url("images/icons/ui-bg_glass_50_bedcbe_1x400.png") repeat-x scroll 50% 50% transparent;

border: 1px solid #699859;

color: #699859;

}

 

.buttonSet .buttonAction button[type=submit] span.ui-icon-cart {

 

 

background: url("images/icons/ui-icons_699859_256x240.png") repeat scroll -48px -112px transparent;

}

 

.buttonSet .buttonAction button[type=submit] span.ui-icon-cart *:hover {

 

 

background: url("images/icons/ui-icons_5d875d_256x240.png") repeat scroll -48px -112px transparent;

}

 

I hope this provides the information you asked for -- if you are able to assist with with Firefox issue, that would be greatly appreciated...

Share this post


Link to post
Share on other sites

@@multimixer

 

Hi, George

I apologize for bothering you -- should you have any ideas regarding Firefox, it would be greatly appreciated... Thanks!!

Selena Vella

Share this post


Link to post
Share on other sites

any idea how to add a message, like titles on links for the add to cart button?

 

so on hover the add to cart button would ave a popup text styled like titles/alts saying "some title text" on hover

Share this post


Link to post
Share on other sites

@@multimixer

 

digesting all the info here..

 

i use the accordian categories contribution, is there a way to have just those buttons assume a different color set. retaining button states, the "soft" and the 75% shading applied in themeroller?

 

I assume adding the statement to my stylesheet, i would start with this:

 

 

#categoriesMenu {

 

}

 

 

would I be correct in picking out the elements in my version jquery file, copying them to the above; seems like a lot of code, is there a better way?

 

Thanks a bunch,

 

Timmy C

 

 

 

 

 

 

Thanks,

 

Timmy C

Share this post


Link to post
Share on other sites

My issue is just opposite of surrfman.

 

I too have the accordion menu add on.

I want to change the 1 px border around my continue button to be black. ( I would settle for all buttons, but really only need the continue and confirm order buttons)

This code:

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #c5dbec; background:

Is the relevant code for my button boprders, but changing 1px solid #c5dbec to black also changes the borders around my category names.

 

I have read several posts on this subject, but have gotten lost. Is there a simple way to change my button borders without changing the category name borders?

 

Tim

Share this post


Link to post
Share on other sites