Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #11132

    Hi,

    Where would I change the color/shade of the elements in the variation boxes on the product pages? Everything is currently a light grey.

    See link.

    I am currently using these variations for color/size. Type for color/size is fine, what I want to change is the table elements. Boarder, shading, box around ‘choose an option’ and perhaps ‘choose an option’ text.

    http://173.254.54.160/~yogaclot/shop/manta-margarita-blouse/

    Thanks.

    Craig

    #70647

    Hi Craig,

    Add this to your custom.css or Quick CSS under Abundance > Theme Options > Styling then change the various background, border and color options to suit your needs.

    .variations th {
    background: none repeat scroll 0 0 #555555;
    border-bottom: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    color: #FFFFFF;
    }
    .variations tr:nth-child(2n) td {
    background: none repeat scroll 0 0 #F8F8F8;
    }
    .variations th.nobg {
    border-right: 1px solid #EEEEEE;
    color: #555555;
    }
    .variations td {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    color: #777777;
    }
    .variations td.alt {
    background: none repeat scroll 0 0 #F8F8F8;
    color: #777777;
    }
    .variations td:first-child {
    border-left: 1px solid #EEEEEE;
    }

    .avia_style_wrap {
    background: url("images/bg-style-wrap.png") repeat-x scroll center bottom transparent;
    border-radius: 6px 6px 6px 6px;
    display: inline-block;
    padding: 6px;
    position: relative;
    }
    .variations .avia_select_unify {
    background: url("images/select.png") no-repeat scroll right center white;
    border: 1px solid #EEEEEE;
    border-radius: 4px 4px 4px 4px;
    color: #586970;
    cursor: pointer;
    display: inline-block;
    position: relative;
    z-index: 1;
    }
    .avia_select_fake_val {
    color: #999999;
    font-size: 11px;
    height: 31px;
    left: 7px;
    line-height: 31px;
    overflow: hidden;
    position: absolute;
    text-align: left;
    top: 1px;
    width: 83%;
    z-index: 2;
    }

    #top .avia_select_unify select {
    color: #ffff00;
    }

    Note: The first six change the colors for the table. The next three change the shading, border and background of the select menu itself. The last declaration #top .avia_select_unify select will change the text color of the drop down options.

    Hope this helps!

    Regards,

    Mya

    #70648

    Hi Mya,

    Great help! Thank you.

    Hey, everything worked perfect except the top boarder.

    I did ‘Inspect Element’ in Chrome and figured out the following was controlling the top boarder. Is this the correct way to do this, or did I miss something??

    Thanks.

    Craig

    div form.cart table {

    font-size: 14px;

    border-width: 0 0 1px 0;

    width: 100%;

    text-align: center;

    border-top: 1px solid #777777;

    margin:10px 0;

    }

    #70649

    Hi Craig,

    You’re welcome!

    Yes. You got it! All I would do is add .variations after table that way your changes only affect that table not any others (if you want it that way). So it would be this div form.cart table.variations.

    Regards,

    Mya

    #70650

    Thanks Mya!

    Great support team, Great Theme!

    Craig

    #70651

    You’re welcome! Thanks!

    Regards,

    Mya

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

The topic ‘Variations Boxes…’ is closed to new replies.