WRONG list view color for add to cart button

Hi,
I found out that "add to cart" button is not displayed in right color when in list mode in JM-Sporty.

To overcome the problem I have to add in
skin/frontend/default/jm_sporty/wavethemes/jmbasetheme/profiles/[my-profile-name]/[my-profile-name].css

the following lines

.products-list .product-shop .desc-info .button-set button:active,
.products-list .product-shop .desc-info .button-set button:focus,
.products-list .product-shop .desc-info .button-set button:hover
{
background-image:url("images/<?php echo $baseconfig["tabactive"]; ?>");
}

.products-list .product-shop .desc-info .button-set button {
background: url("images/<?php echo $baseconfig["tabactive"]; ?>") repeat-x scroll left top transparent;
}

Please correct me if I am wrong. I am not really experienced to modify css files.

5 answers

Profile photo of harper 0.00 $tone February 11, 2014
Public

It appears to be a bug of our theme, I’ve reported this to our bug tracker for our development team to get it fixed and update the theme.

For a quick fix, open the file: skin\frontend\default\jm_sporty\css\style.css (around line 3786),

#1: Find following CSS rule and remove declaration as noted below:
.products-list .product-shop .desc-info .button-set button

.products-list .product-shop .desc-info .button-set button {
background: url("../images/btn-send.png") repeat-x scroll left top transparent;-> replace this line with background:#FE553A
border: 0 none;
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow: none;
color: #FFFFFF
font-family: ‘PT Sans’,sans-serif !important;
font-size: 14px !important;
height: 32px;
line-height: 32px;
text-transform: uppercase;
width: 100%;
}

#2: Please replace:

.products-list .product-shop .desc-info .button-set button:hover {
background: url("../images/btn-send-hover.png") repeat-x scroll left top transparent;
}

With:

.products-list .product-shop .desc-info .button-set button:hover {
-webkit-box-shadow: 1px 1px 4px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 4px 0px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 4px 0px rgba(50, 50, 50, 0.75);
}

#3: Then go to your current profile and add new rule. For instance, with blue style, open file:

Code:

skin\frontend\default\jm_sporty\wavethemes\jmbasetheme\profiles\blue\blue.css.php

add this rule:

.products-list .product-shop .desc-info .button-set button {
background-color: <?php echo $baseconfig["color"] ?>;
}

#1
izyshoes 0.00 $tone February 11, 2014
Public

Thanks a lot for your reply.
I assume I have to remove the lines I have added in
skin/frontend/default/jm_sporty/wavethemes/jmbasetheme/profiles/[my-profile-name]/[my-profile-name].css
before applying your fix.
Please confirm.

You will find the same issue for product comparison
See attached Screenshot
Attachment 33859

#2
Profile photo of harper 0.00 $tone February 12, 2014
Public

Hi there,

I have checked our site and you may need to add some new CSS rule.

#1 : Please open the file: skin\frontend\default\jm_sporty\css\style.css (around line 3815),
Replace:

.products-list .product-shop .desc-info .button-set button:hover {
-webkit-box-shadow: 1px 1px 4px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 4px 0px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 4px 0px rgba(50, 50, 50, 0.75);
}

with:

.products-list .product-shop .desc-info .button-set button:hover,
.compare-table .button.btn-cart:hover {
-webkit-box-shadow: 1px 1px 4px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 4px 0px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 4px 0px rgba(50, 50, 50, 0.75);
}

#2: Then go to your current profile and add new rule. For instance, with blue style, open file:

Code:

skin\frontend\default\jm_sporty\wavethemes\jmbasetheme\profiles\blue\blue.css.php

Change:

.products-list .product-shop .desc-info .button-set button {
background-color: <?php echo $baseconfig["color"] ?>;
}

to:

.products-list .product-shop .desc-info .button-set button,
.compare-table .button.btn-cart {
background-color: <?php echo $baseconfig["color"] ?>;
background-image:none
}

#3
izyshoes 0.00 $tone February 12, 2014
Public

thanks for your reply.
Pls confirm if I have to use only the code you send me in #4 instead of this in #2 and if I have to remove the change that I have make (#1)

#4
Profile photo of harper 0.00 $tone February 21, 2014
Public

Please do not change the style.css file, only change the css file in basetheme extension.

Go to your current profile and add new rule. For instance, with blue style, open the file:

Code:

skin\frontend\default\jm_sporty\wavethemes\jmbasetheme\profiles\blue\blue.css.php

add new rules:

.block .actions a,
.products-grid li .actions .link-compare:hover,
.products-grid li .actions .link-compare:focus,
.products-grid li .actions .link-wishlist:hover,
.products-grid li .actions .link-wishlist:focus,
#ja-botsl .block-subscribe .button,
.mass-button-actions .link-wishlist:hover,
.mass-button-actions .link-wishlist:focus,
.mass-button-actions .link-compare:hover,
.mass-button-actions .link-compare:focus,
button.btn-checkout,
.product-essential .product-shop .add-to-cart button,
.block-compare .actions button,
#ja-botsl .block-subscribe .button,
.block-cart .actions button,
.products-list .product-shop .desc-info .button-set button,
.button.btn-cart {
background-image:url("images/<?php echo $baseconfig["button"]; ?>");
}

button.btn-checkout:focus,
button.btn-checkout:hover,
.block .actions a:hover,
.block-cart .actions button:hover,
.product-essential .product-shop .add-to-cart button:hover,
#ja-botsl .block-subscribe .button:hover,
.products-list .product-shop .desc-info .button-set button:hover,
.button.btn-cart:hover {
background-image:url("images/<?php echo $baseconfig["buttonhover"]; ?>");
}

You can view demo for reference here: http://magento-themes.joomlart.com/jm_sporty/index.php/

#5

Please login or Register to Submit Answer

Written By

Comments