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
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"] ?>;
}
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
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
}
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)
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/