HOW TO change the colour of add to cart buttons

 

This question was asked so many times in the forums. So we decided to write a how to.

A majority of those who wanted to change the colour of the buttons are using either Joomla 2.5 or Joomla 3.0 with a template that does not support the Twitter bootstrap framework, which helps you make your site responsive.

We have added a name-spaced bootstrap css in the K2Store package. So if your template does not support bootstrap, K2Store will use the bootstrap CSS included in the package. If your template supports bootstrap, then K2Store will inherit your template style, without you changing any CSS.

The following is a guide to those who want to change the button colours

Open your template's css file located in /templates/YOUR_TEMPLATE/css folder.

At the end of the file, add the following CSS. Save the file. Clean your browser cache and joomla cache. Refresh.

Add to cart button


.k2store .btn-primary {

background: #FF0000 !important;

/*this will change your button colour to red. You can change the hex colour code based on your choice */

color: #FFFFFF !important;

/*this will change your text on the button to white. You can change the hex colour code based on your choice */

}

.k2store. btn-primary:hover {

background: #FF0000 !important;

/*this will change your button colour to red on hover. You can change the hex colour code based on your choice */

color: #FFFFFF !important;

/*this will change your text on the button to white on hover. You can change the hex colour code based on your choice */

}

View cart button


.k2store .btn-success {

background: #FF0000 !important;

color: #FFFFFF !important;

}

.k2store .btn-success:hover {

background: #FF0000 !important;

color: #FFFFFF !important;

}

Update cart button


.k2store .btn-warning {

background: #FF0000 !important;

color: #FFFFFF !important;

}

.k2store .btn-warning:hover {

background: #FF0000 !important;

color: #FFFFFF !important;

}