Loading...

Buttons

We no longer maintain the Knowledge Base since version 4.3.x. All the latest user and developer documentation for 4.3.x and newer versions is now available at docs.cs-cart.com.

  • This article applies to CS-Cart versions:
  • 3.0.x

All modifications are performed via the My Changes add-on

There are 3 types of buttons used in the default skin. In order to modify their appearance you should download the sprite and edit it using a graphical editor.

The sprite contains all 3 button types in all their states: normal, under mouse cursor and being clicked. This image shows how the buttons are described in the sprite:

 

When you are done with sprite modifications, use the new sprite by assigning it to the group of selectors:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.button-submit-action.button-wrap-left,
.button-submit.button-wrap-left,
.button-action.button-wrap-left,
.button.button-wrap-left, 
.button-submit-action.button-wrap-right,
.button-submit.button-wrap-right,
.button-action.button-wrap-right,
.button.button-wrap-right,
.button-submit-big.button-wrap-left,
.button-big.button-wrap-left,
.button-submit-big.button-wrap-right,
.button-big.button-wrap-right
.go-button {
    background-image: url('my_new_sprite.png');
}

If you need to change text color on buttons to improve readability, group the necessary selectors and assign the new color value to them:

1
2
3
4
5
6
.button-submit-big.button-wrap-left,
.button-big.button-wrap-left,
.button-submit-big.button-wrap-right,
.button-big.button-wrap-right {
    color: #000000;
}
We used sprite for buttons back in the day to guarantee support by older browsers. In the near future all buttons will be reimplemented using the CSS 3 technology, so there will be no need to use graphical editor to modify button appearance; instead, all modifications will remain in the CSS file.