Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #22519

    Dear Kriesi’s team,

    Can you please show us how to edit the “Add to cart” and view details button (those available on product hover.) I’ve tried a couple of solutions in the forum with no real success.

    1- We would like to know how to change the “add to cart and view details buttons”, color and hover.

    2- Is it possible to have a static image (png/jpg) replacing each one of those buttons? If so, how? Can we have another image as hover?

    3- How can we have those two buttons showing above the product photo (not below)?

    Your help is greatly appreciated.

    #116064

    Hi,

    Sorry for the delay. My fault entirely. Sorry again.

    Here are the regular and hover colors. The image is found on this url , just substitute your domain name

    http://YOUR-DOMAIN.COM/wp-content/themes/replete/images/layout/bg-button.png

    It looks like there is no image, thats because everything is CSS and the image is just a faint shadow that overlays the top part of each button

    /*normal colors - add to cart button*/

    #top .add_to_cart_button.button {
    width: 40%;
    padding: 15px 2.2%;
    text-align: center;
    background-color: rgb(255, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    background-image: url("../images/layout/bg-button.png");
    background-repeat: repeat-x;
    text-shadow: 1px 1px 0px rgb(0, 0, 0);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0..72);
    -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.72);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.72);
    display: block;
    margin: 0;
    font-size: 11px;
    min-width: 68px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    text-decoration: none;
    }

    /*hover colors: add to cart button*/

    #top .add_to_cart_button:hover{
    width: 40%;
    padding: 15px 2.2%;
    text-align: center;
    background-color: rgb(255, 255, 0);
    border: 1px solid rgb(0, 0, 0);
    color: rgb(0,0,0);
    background-image: url("../images/layout/bg-button.png");
    background-repeat: repeat-x;
    text-shadow: 1px 1px 0px rgb(255,255,255);
    -moz-box-shadow: 0px 0px 6px rgba(255, 255, 0, 0.72);
    -webkit-box-shadow: 0px 0px 6px rgba(255, 255, 0, 0.72);
    box-shadow: 0px 0px 6px rgba(255, 255, 0, 0.72);
    display: block;
    margin: 0;
    font-size: 11px;
    min-width: 68px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    text-decoration: none;
    }

    /*normal colors:show details button*/
    #top .show_details_button {
    width: 40%;
    padding: 15px 2.2%;
    text-align: center;
    background-color: rgb(255, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    background-image: url("../images/layout/bg-button.png");
    background-repeat: repeat-x;
    text-shadow: 1px 1px 0px rgb(0, 0, 0);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.72);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.72);
    display: block;
    margin: 0;
    font-size: 11px;
    min-width: 68px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    text-decoration: none;
    }

    /*hover colors: show details button*/
    #top .show_details_button:hover{
    width: 40%;
    padding: 15px 2.2%;
    text-align: center;
    background-color: rgb(255, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    color: rgb(0,0,0);
    background-image: url("../images/layout/bg-button.png");
    background-repeat: repeat-x;
    text-shadow: 1px 1px 0px rgb(255,255,255);
    -moz-box-shadow: 0px 0px 6px rgba(255, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 6px rgba(255, 0, 0, 0.72);
    box-shadow: 0px 0px 6px rgba(255, 0, 0, 0.72);
    display: block;
    margin: 0;
    font-size: 11px;
    min-width: 68px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    text-decoration: none;
    }

    Just add this to Quick CSS located in Replete > Theme Options > Quick CSS … the text box on the page bottom.

    If you want buttons, you will need to make 4, . two for one (hover and normal) and two for the other button. Upload them using media center, and get the url after each upload. then just add the url instead of the ../images/layout/bg-button.png .. for each of the 4 blocks of code.

    Thanks,

    Nick

    #116065

    Nick thanks for your answer.

    If we want to create the 4 buttons as PNG’s (including the text in the image) how can we remove the current text on top of them?

    As well which properties from the css above should be deleted? (As we want the buttons to look exactly as their new png with no opacity, etc.)

    #116066

    Hi,

    Just add text-indent.

    #top .add_to_cart_button.button {
    text-indent: -9999px;
    }

    This will hide the text on the button leaving the PNG image’s text.

    Regards,

    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Buttons Style’ is closed to new replies.