Author Topic: Colour Theme for "ADD TO CART"  (Read 6067 times)

Offline netgroup

  • Newbie
  • *
  • Posts: 14
  • Karma: +1/-0
    • View Profile
Colour Theme for "ADD TO CART"
« 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.

Offline Rey

  • Newbie
  • *
  • Posts: 40
  • Karma: +7/-0
    • View Profile
Re: Colour Theme for "ADD TO CART"
« Reply #1 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.

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5777
  • Karma: +274/-2
    • View Profile
Re: Colour Theme for "ADD TO CART"
« Reply #2 on: January 26, 2017, 02:40:14 AM »

Offline morrisr

  • Newbie
  • *
  • Posts: 9
  • Karma: +4/-0
  • Simple is good
    • View Profile
    • Aloha Elegant
Re: Colour Theme for "ADD TO CART"
« Reply #3 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 */
}


Offline demoncho87

  • Newbie
  • *
  • Posts: 23
  • Karma: +2/-0
    • View Profile
Re: Colour Theme for "ADD TO CART"
« Reply #4 on: January 29, 2017, 03:55:27 PM »
Can you show with one picure the changes you made?

Offline morrisr

  • Newbie
  • *
  • Posts: 9
  • Karma: +4/-0
  • Simple is good
    • View Profile
    • Aloha Elegant
Re: Colour Theme for "ADD TO CART"
« Reply #5 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

Offline netgroup

  • Newbie
  • *
  • Posts: 14
  • Karma: +1/-0
    • View Profile
Re: Colour Theme for "ADD TO CART"
« Reply #6 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.

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5777
  • Karma: +274/-2
    • View Profile
Re: Colour Theme for "ADD TO CART"
« Reply #7 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

 

Powered by SMFPacks Social Login Mod