VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: mulosmani on July 04, 2012, 10:58:38 AM

Title: Please need help about custom field css
Post by: mulosmani on July 04, 2012, 10:58:38 AM
im trying to create a custom field image for color selection but the output is incorrect. Im using vm2.06 and J2.5 . Can anyone help me please?This is the page:
http://www.istream.al/new/shop-en/iphone/iphone-4s-detail
Title: Re: Please need help about custom field css
Post by: srajca on July 04, 2012, 20:51:57 PM
try this
http://forum.virtuemart.net/index.php?topic=102850.0
Title: Re: Please need help about custom field css
Post by: mulosmani on July 04, 2012, 21:39:29 PM
Thank you for replying, but i cant find how to fix the layout. i have tried before this post with firebug but found nothing.can you do something please?
Title: Re: Please need help about custom field css
Post by: srajca on July 05, 2012, 01:02:23 AM
try to use the following code.
Put it in your template.css and replace with the classes already inside your css file, if there are any classes that aren't already in your css, paste them - this will be an override for vmsite-ltr.css
div.contentp div form div.product-fields div.product-field {
    display: inline-block;
    float: left;
    margin: 0 0 10px;
    padding: 0;
    text-align: left;
    width: 100%;
}

div.contentp div form div.product-fields div.product-field div.product-fields-title {
    margin-bottom: 5px;
    width: 100%;
}

div.contentp div form div.product-fields div.product-field div.product-field-display_desc-container {
    margin-left: -5px;
    width: 100%;
}

div.product-field-type-M div.product-field-display_desc-container span.product-field-display label img {
    border: 2px solid transparent;
    float: left;
    margin: -6px 25px;
    text-align: left;
    vertical-align: middle;
}

.vm-img-desc {
    display: block;
    float: left;
    margin: 0 -20px;
}

div.product-field-type-M div.product-field-display_desc-container span.product-field-display label {
    clear: right;
    display: inline-block;
    float: none;
    height: 18px;
    margin: -4px 0;
    top: 0;
    width: 88%;
}

div.product-field-type-M div.product-field-display_desc-container span.product-field-display label img {
    border: none;
    float: left;
    height: 17px;
    margin: 0 27px;
    text-align: left;
    vertical-align: top;
}
div.product-field-type-M div.product-field-display_desc-container span.product-field-display label img:hover {
border:none;
}
div.product-field-type-M div.product-field-display_desc-container span.product-field-display label img:after {
border:none;
}


let me know how it goes.