AbanteCart Community

AbanteCart Development => Customization help => Topic started by: netgroup on January 24, 2017, 04:44:34 AM

Title: Colour Theme for "ADD TO CART"
Post by: netgroup on January 24, 2017, 04:44:34 AM

Dear all,

Can we change "ADD TO CART" button colour theme to BLUE. currently it is white and not matching to the entire web page theme.

Please suggest the steps.

Title: Re: Colour Theme for "ADD TO CART"
Post by: Rey on January 25, 2017, 05:00:41 AM

If you are using the default theme, the Add To Cart button is already blue not white.
Can you show us a screenshot please?

Thanks.

Title: Re: Colour Theme for "ADD TO CART"
Post by: Basara on January 26, 2017, 02:40:14 AM

Check our demo http://demo.abantecart.com/

Title: Re: Colour Theme for "ADD TO CART"
Post by: morrisr on January 29, 2017, 02:53:04 PM

This is how I changed the background of the ADD TO CART button
a.   You want to make changes in the style.css file by default located here
Storefront\view\default\stylesheet\style.css
b.   For both views product list and product page, change the value of the property background in css classes productcart and productpagecart.
b.1. Product list view (style shown in category view, featured, latest products, specials & search results)
style.css around line 1015
.thumbnail a.productcart {
   background: #000;   /* background color */
   color: #fff;    /*Font color */
   float: right;
   padding: 8px 27px 8px 8px;
   font-size: 13px;
   text-transform: uppercase;
    position:relative;
}
The hover is a little after in line 1042:
.thumbnail a.productcart:hover {
   background: #0e5f86;   /* background color */
}
b.2. Product page view, in style.css line 1576
.productpagecart a {
    background: #000;          /* background color */
   color: #fff;                       /* Font color */
    border-radius: 5px;
    border-width: 1px 0 0;
    padding: 15px 15px 15px 60px;
   font-size: 18px;
    position:relative;
}
And the hover located in style.css line 1606
.productpagecart li a:hover {
   background-color: #0e5f86;     /* background color */
}

Title: Re: Colour Theme for "ADD TO CART"
Post by: demoncho87 on January 29, 2017, 03:55:27 PM

Can you show with one picure the changes you made?

Title: Re: Colour Theme for "ADD TO CART"
Post by: morrisr on January 29, 2017, 05:09:09 PM

You need to download the file style.css from this folder
/storefront/view/default/stylesheet

change the background color in 2 lines where I noted the comment /* background color */ (2 more lines if you want to change the color of the hover)
  background: #000;   /* background color */

I picked #000 the color black, choose the hexa color code for the color you want

Then upload the file style.css back to the website.

Here is the result

Title: Re: Colour Theme for "ADD TO CART"
Post by: netgroup on February 01, 2017, 10:41:46 AM

Dear All,

Provided information was very helpful.

Actually when we embed the product code in other site, ADD TO CART button see's in white. Please check enclosed screenshot and suggest the necessary changes.

Title: Re: Colour Theme for "ADD TO CART"
Post by: Basara on February 02, 2017, 12:25:33 AM

Hi.

Change embed css for your needs
http://demo.abantecart.com/storefront/view/default/stylesheet/embed.css about line#92