How Can I Change Add to Cart Button?

Store Builder Questions
1

The add to cart button in austere is crazy small and not noticeable. I would prefer that this button be big and colorful like the “place order” button. How would I make this happen?

2

You can change the button with very simple modifications in the css file and the image background.

Have you used “my_changes” folder to add modifications to the skin? Is the best approach.



This works for me (2.2.1-CE):


.button-submit-action,
.button-submit,
.button-submit-big,
.button, .button-action {
background: url("images/my_but_left_action.png") no-repeat
scroll left top #F67C1C; /*new left side background-image*/
height: 40px; /*define the height*/
}

.button-submit-action input,
.button-submit input,
.button-submit-big input,
.button-action a {
background: url("images/my_but_right_action_big.png") no-repeat
scroll right top transparent; /*new right side bakground-image*/
font: bold 14px/14px Tahoma; /*define text size*/
height: 35px; /*define position of the text*/
}

.button-submit-action input,
.button-submit input, x:-moz-any-link {
padding: 0 30px; /*define the width*/
}

3

[quote name='colortone' timestamp='1311316207' post='117951']

You can change the button with very simple modifications in the css file and the image background.

Have you used “my_changes” folder to add modifications to the skin? Is the best approach.



This works for me (2.2.1-CE):


.button-submit-action,
.button-submit,
.button-submit-big,
.button, .button-action {
background: url("images/my_but_left_action.png") no-repeat
scroll left top #F67C1C; /*new left side background-image*/
height: 40px; /*define the height*/
}

.button-submit-action input,
.button-submit input,
.button-submit-big input,
.button-action a {
background: url("images/my_but_right_action_big.png") no-repeat
scroll right top transparent; /*new right side bakground-image*/
font: bold 14px/14px Tahoma; /*define text size*/
height: 35px; /*define position of the text*/
}

.button-submit-action input,
.button-submit input, x:-moz-any-link {
padding: 0 30px; /*define the width*/
}


[/quote]



Could you please let us know the step for using this with “my-changes” folder.



Thank you,

Albert

4

[font=“Verdana”]It is a lot easier to simply view the source code, and search the code for what the “Class” value is, either for the element or the container element (e.g. DIV above).



Then search the code for the class name you are looking for!

Use Notepad++ to “Find in files”.



Simple![/font]