Atelier participatif responsive pour virtuemart 2

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Astuce] Atelier participatif responsive pour virtuemart 2

    Bonjour à tous,
    Pour information : Mon site est construit en local avec les outils suivants :
    Jommla 2.5.9
    Virtuemart 2.0.18a
    mysql 5.5.24
    php 5.3.13
    Apache 2.2.22
    Wampserver 2.2.e 64 bits
    Template responsive : Ja-elastica



    Bon je me lance pour créer ce poste qui je l'espère sera participatif.
    L'objet en est le suivant : adapter un peu mieux virtuemart 2 pour des templates responsive, en l'occurence le template Ja-elastica.

    1. Quand on installe virtuemart 2.0.18a sur le template Ja-elastica, nous nous retrouvons tout d'abord face à des petits conflits jquery (par exemple les modules qui s'affichent en dessous du layout du main-content au lieu de s'afficher à droite, disfonctionnement du panier, etc ...). La solution pour résoudre ces conflits est d'installer le plug-in "jquery easy" (facile à trouver en faisant une petite recherche sur google).
    Il s'installe de façon classique par le gestionnaire d'extension dans votre backend joomla. Suite à l'installation, il suffit de l'activer et de régler "enable jquery" sur "jquery".
    Allez ensuite dans votre template Ja-elastica par le gestionnaire de template et dans l'onglet "général", mettez "optimiser le css" sur "join & minify & compress" et "optimiser le javascript" sur "no". Normalement vos conflits jquery seront resolus.
    Cependant n'oubliez pas de désactiver momentannément Jquery easy quand vous aurez des produits à rentrer ou des image à rentrer par le biais de votre backend. Quand "Jquery easy" est activé, il bloque la possiblilté de rentrer de nouvelles images sur la backend. Une fois vos nouveaux produits ou vos nouvelles images rentrés sur votre boutique, réactivez "Jquery easy" pour retrouver un fonctionnement normal sur le frontend de votre boutique.

    2. Même si vous définissez une taille de vignette pour vos produits du genre 160/160 px, vous allez vous retrouver sur le front end avec des micros vignettes, ce qui est assez gênant. Pour résoudre ce problème, rajoutez par le biais de votre Backend joomla (gestionnaire de template > tepllate ja-elastica > modifier css/template.css) le petit script suivant au bas du script existant :

    /* Modification perso de la taille des vignettes produits de virtuemart */

    .product .width30 {
    width: 100%
    }


    La taille de vos vignettes redeviendra alors cohérente quelque soit le mode d'affichage de votre boutique (smartphone - tablette - ordinateur de bureau).
    Dernière édition par algrand001 à 01/04/2013, 11h06

  • #2
    Re : Atelier participatif responsive pour virtuemart 2

    3. Un autre problème est celui de la taille de certain boutons comme : ajouter au panier, commander ou encore choisissez une variante du produit, etc ...

    Pour cela il faut aller modifier le script suivant :
    wamp/www/votre site/components/com_virtuemart/assets/css/vmsite-ltr

    J'ai commencé de bricoller ce script et voilà ce que cela donne en l'état :

    Code HTML:
    .clr{clear:both;overflow:hidden;}
    .general-bg,input.custom-attribute,input.quantity-input,.manufacturer-product-link a,a.ask-a-question,input.vm-default,a.product-details,a.details,div.details,button.default{background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;border:solid #CAC9C9 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;color:#777;text-decoration:none;padding:5px 5px 4px;}
    span.custom-variant-inputbox input.custom-attribute:hover,span.quantity-box input.quantity-input:hover,input.vm-default:hover,span.quantity-box input.quantity-input:hover,.ask-a-question-view input.counter:hover,.ask-a-question-view input#email:hover,table.user-details input:hover,a.ask-a-question:hover,a.details:hover,div.details:hover,a.product-details:hover,button.default:hover{background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) repeat-x;background-position:0 -40px;color:#000;text-decoration:none;}
    .productdetails-view .spacer-buy-area{padding:0 0 0 12px;}
    .back-to-category {float:right;}
    .product-neighbours{color:#777;margin:0 0 15px;}
    .product-neighbours a.next-page{background:url(../images/vmgeneral/next_16x16.png) no-repeat right;padding-right:30px;line-height:20px;float:right;}
    .product-neighbours a.previous-page{background:url(../images/vmgeneral/previous_16x16.png) no-repeat left;padding-left:30px;line-height:20px;float:left;}
    .productdetails-view h1{font-size:22px;margin:0 0 6px;padding:0;}
    .productdetails-view .product-short-description{margin:0 0 15px;padding:0;}
    .productdetails-view .product-description,.product-fields{margin:15px 0;}
    span.title{font-weight:700;display:block;border-bottom:solid #CAC9C9 1px;font-size:14px;margin:0 0 6px;}
    .product-packaging{margin:15px 0 0;}
    .icons{text-align:right;float:right;margin:4px 0 10px 30px;}
    .additional-images img{margin-right:8px;width:50px;height:auto;}
    .product-price{margin:0 0 15px;}
    .price-crossed div.PricebasePriceWithTax .PricebasePriceWithTax{text-decoration: line-through;}
    .productdetails-view .addtocart-bar{margin:15px 0 0;padding:0 0 0 0px;}
    .availability{text-align:center;margin:15px 0 0;}
    .customer-reviews h4{border-bottom:solid #CAC9C9 1px;font-size:14px;margin:0 0 10px;padding:0 0 6px;}
    .write-reviews{text-align:center;margin:20px 0 0;}
    .write-reviews h4{text-align:left;}
    .write-reviews h4 span{font-size:12px;font-weight:400;margin-left:8px;}
    .write-reviews span.step{font-weight:700;display:inline-block;margin:0 0 8px;}
    .write-reviews ul.rating{text-align:center;margin:0 0 20px;padding:0;}
    .write-reviews ul.rating li{display:inline-block;list-style:none;text-align:center;padding:0 5px;}
    .write-reviews ul.rating li span{display:block;}
    .write-reviews textarea.virtuemart{margin-bottom:6px;display:inline-block;}
    .list-reviews .normal{border:solid #CAC9C9 1px;margin-bottom:8px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;padding:12px;}
    .list-reviews .normal blockquote,.list-reviews .highlight blockquote{margin-top:12px;font-size:12px;word-wrap:break-word;}
    .list-reviews .normal blockquote:before,.list-reviews .highlight blockquote:before{content:open-quote;font-weight:700;font-size:24px;padding-right:6px;}
    .list-reviews .normal blockquote:after,.list-reviews .highlight blockquote:after{content:close-quote;font-weight:700;font-size:24px;padding-left:6px;}
    .list-reviews .highlight{background:#f7f6f6;border:solid #CAC9C9 1px;margin-bottom:18px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;padding:12px;}
    .list-reviews span.date{float:right;display:block;color:#777;border-left:solid #CAC9C9 1px;border-bottom:solid #CAC9C9 1px;position:relative;top:-12px;right:-12px;font-size:10px;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;padding:4px 6px 2px;}
    span.variant-dropdown{width:150px;float:left;display:block;margin-bottom:5px;}
    span.variant-dropdown select{width:150px;}
    span.custom-variant-inputbox{width:152px;float:left;display:block;margin-bottom:5px;}
    input.custom-attribute{width:140px;}
    span.quantity-box{float:left;width:27px;padding-top:5px;}
    input.quantity-input{height:19px;width:25px;text-align:center;font-weight:700;padding:2px;}
    span.quantity-controls{width:15px;float:left;padding-top:2px;margin:0 0 0 10px;}
    span.quantity-controls input.quantity-controls{height:14px;border:none;width:15px;}
    span.quantity-controls input.quantity-plus{background:url(../images/vmgeneral/quantity-controls.png) repeat-x;margin-bottom:2px;}
    span.quantity-controls input.quantity-minus{background:url(../images/vmgeneral/quantity-controls.png) repeat-x;margin-bottom:5px;background-position:15px 0;}
    .addtocart-bar{margin:0;padding:0;}
    span.addtocart-button{width:100%;float:left;}
    span.cart-images img {
        float: left;
        margin: 0;
        width: 45px;
    }
    span.addtocart-button input.addtocart-button,span.addtocart-button input.notify-button{width:100px;background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;background-position:0 -160px;color:#fff;border:solid #ec534d 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:9px;cursor:pointer;height:24px;text-align:center;letter-spacing:1px;padding:4px 5px;}
    span.addtocart-button input.addtocart-button-disabled {width:100%;background:#f2f2f2 top repeat-x;border:solid #333 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:9px;cursor:pointer;height:100%;text-align:center;letter-spacing:1px;padding:4px 5px;color:#333;margin:10px 0px 0px 0px;}
    La suite du script est dans le poste suivant car trop long pour tenir sur un seul poste ... (a suivre) ...
    Dernière édition par algrand001 à 01/04/2013, 10h34

    Commentaire


    • #3
      Re : Atelier participatif responsive pour virtuemart 2

      Code HTML:
      .category-view h4{font-size:14px;margin:0;padding:0;}
      .category-view .row .category .spacer h2{margin:0;padding:0;}
      .category-view .row .category .spacer h2 a{font-size:14px;display:block;text-align:center;}
      .category-view .row .category .spacer h2 a img{margin-top:6px;max-width:100%;height:auto;}
      .featured-view h4,.latest-view h4,.topten-view h4,.recent-view h4,.related-products-view h4{font-size:14px;margin:0 0 8px;padding:0;}
      .browse-view h1{font-size:16px;margin:0 0 8px;padding:0;}
      .orderby-displaynumber{border-bottom:solid #E9E8E8 1px;border-top:solid #E9E8E8 1px;margin:10px 0;padding:10px 0;}
      .orderlistcontainer{font-size:12px;display:inline-block;text-decoration:none;margin:0 15px 0 0;}
      .orderlistcontainer div.activeOrder{background:#FFF top right no-repeat url(../images/vmgeneral/arrow_down.png);cursor:pointer;border:solid #CAC9C9 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:12px;padding:2px 24px 1px 12px;}
      .orderlistcontainer a{text-decoration:none;display:block;}
      .orderlistcontainer a :hover{text-decoration:none;display:block;color:#EEE;background:#777;}
      .orderlistcontainer div.orderlist{display:none;position:absolute;border:solid #CAC9C9 1px;background:#FFF;cursor:pointer;}
      .orderlistcontainer div.orderlist div{padding:2px 12px 1px;}
      .orderlistcontainer div.orderlist div:hover{color:#EEE;background:#CAC9C9;}
      .ask-a-question-view .product-summary{border-bottom:solid #CAC9C9 1px;margin:25px 0 0;padding:0 0 10px;}
      .ask-a-question-view .product-summary h2{font-size:16px;margin:0;padding:0;}
      .ask-a-question-view .product-summary .short-description{margin-top:6px;}
      .ask-a-question-view .product-summary img.product-image{max-width:100%;max-height:100%;width:auto;height:auto;}
      .ask-a-question-view .form-field textarea.field{width:394px;background:#fff url(../images/vmgeneral/default_bg.jpg) bottom repeat-x;border:solid #CAC9C9 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;color:#777;text-align:left;padding:12px;}
      .ask-a-question-view .form-field textarea.field:hover{background:#fff url(../images/vmgeneral/default_hover_bg.jpg) top repeat-x;color:#000;}
      .ask-a-question-view .form-field .submit{width:418px;}
      .ask-a-question-view input.counter,.ask-a-question-view input#email{background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;border:solid #ccc 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;color:#777;display:inline-block;margin:0 0 0 10px;padding:5px 5px 4px;}
      .vmquote{font-size:smaller;}
      .manufacturer-details-view img{float:right;margin:0 0 10px 20px;}
      .manufacturer-details-view .email-weblink a{margin-right:15px;}
      a.ask-a-question{font-size:12px;font-weight:700;display:inline-block;text-decoration:none;margin-bottom:8px;padding:3px 12px 1px;}
      a.ask-a-question:hover{color:#777;text-decoration:none;}
      input.vm-default{margin-bottom:2px;}
      input.highlight-button{background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;background-position:0 -160px;color:#fff;border:1px solid #00a000;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:12px;cursor:pointer;text-align:center;letter-spacing:1px;display:inline-block;text-decoration:none;padding:4px 8px 2px;}
      input.highlight-button:visited{color:#fff;}
      a.product-details,a.details,div.details{background-position:0 0;display:inline-block;padding:0px 4px 0px;}
      a.details:hover,div.details:hover,a.product-details:hover{background-position:0 -40px;color:#777;}
      span.details-button{ margin:0 0 0 10px;}
      span.details-button input.details-button { background: url("../images/vmgeneral/backgrounds.png") repeat-x scroll center top #E8E8E8;color:#135CAE;border:1px solid #CAC9C9 ;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;cursor:pointer; text-align:center;padding:3px 8px 1px;}
      .coupon{color: gray;  border-radius:4px; border:1px solid #CAC9C9 ; font-size: 9px;padding: 3px;}
      button.default{display:inline-block;cursor:pointer;padding:5px 8px 4px;}
      button.default:hover{color:#777;}
      a.highlight,a.highlight:visited{background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;border:solid #00a000 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:12px;display:inline-block;text-decoration:none;background-position:0 -160px;color:#fff;padding:3px 8px 1px;}
      textarea.virtuemart{background:#fff;border:solid #ccc 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;color:#777;text-align:left;padding:5px 5px 4px;}
      p.product_s_desc{margin-bottom:6px;padding:0;}
      span.stock-level{font-size:10px;color:#7d7b7b;}
      .horizontal-separator{height:1px;background:#e9e8e8;margin:10px 0;}
      .invalid{background-color:#ffd;color:#000;border-color:red;}
      .page-results{margin-top:25px;text-align:right;}
      .control-buttons button.default{margin-left:8px;}
      table.user-details input{background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;border:solid #ccc 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;color:#777;margin-bottom:2px;padding:5px 5px 4px; width:200px}
      table.user-details input.invalid{background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;border:solid red 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;color:#777;margin-bottom:2px;padding:5px 5px 4px;}
      table.user-details{width: 450px;margin-bottom:10px;}
      table.user-details input[type="checkbox"] , table.user-details input[type="radio"] {width:20px}
      td.key{padding:0 6px; width: 150px;}
      .cart-view h1{font-size:20px;margin:0;padding:0 0 10px;}
      .cart-view h2{font-size:12px;margin:0;padding:0;}
      .checkout-button-top{text-align:right;border-top:solid #E9E8E8 1px;padding:10px 0 0;}
      .checkout-button-top input.terms-of-service{margin-right:10px;display:inline-block;}
      span.tos{display:inline-block;margin-right:15px;}
      .billto-shipto{border-top:solid #E9E8E8 1px;border-bottom:solid #E9E8E8 1px;margin:10px 0 0;padding:10px 0 25px;}
      .billto-shipto span,a.terms-of-service{display:inline-block;font-size:14px;}
      #full-tos {display: none;}
      .output-billto span.titles,.output-shipto span.titles{width:150px;float:left;}
      .output-billto span.values-first_name,.output-billto span.values-middle_name,.output-billto span.values-zip,.output-shipto span.values-first_name,.output-shipto span.values-middle_name,.output-shipto span.values-zip{float:left;margin-right:3px;}
      table.cart-summary tr th{background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;border-bottom:solid #E9E8E8 1px;padding:6px 0 3px;}
      .customer-comment{text-align:center;border-top:solid #E9E8E8 1px;margin:10px 0 0;padding:10px 0 0;}
      textarea.customer-comment{background:#fff;width:100%;border:solid #ccc 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;color:#777;margin-bottom:2px;text-align:left;padding:5px 5px 4px;}
      div.terms-of-service{ margin:10px 0 0;padding:10px 0 15px; display : inline;}
      .terms-of-service h5{background:#7C1E21;color:rgba(255, 255, 255, 0.9);font-size:14px;text-align:center;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;font-weight:400;margin:0;padding:15px;}
      .terms-of-service h5 a,.terms-of-service h5 a:visited{color:#fff;text-transform:uppercase;}
      .vm-button-correct,.vm-button-correct:hover,.vm-button-correct:visited{font-size:12px;font-weight:700;display:inline-block;text-decoration:none;color:#777;}
      .vm-button-correct,.vm-button-correct:link,.vm-button-correct:visited{background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;background-position:0 -160px;color:#fff;border:solid ##ec534d 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:12px;cursor:pointer;text-align:center;letter-spacing:1px;display:inline-block;text-decoration:none;padding:6px 12px 3px;}
      .vm-button-correct:hover{background-position:0 -200px;color:#f2f2f2;text-decoration:none;}
      .VmArrowdown{background:top right no-repeat url(../images/vmgeneral/arrow_down.png);cursor:pointer;float:right;width:16px;height:16px;padding:0 12px;}
      ul.VMmenu,.VMmenu ul,.VMmenu li{list-style-type:none!important;background-image:none!important;padding:2px;}
      #ui-tabs ul#tabs{list-style-type:none;overflow:hidden;margin:0;padding:20px 20px 0;}
      #ui-tabs ul#tabs li{display:inline-block;cursor:pointer;background:#f2f2f2;padding:10px 20px 7px;}
      #ui-tabs ul#tabs li.current{display:inline-block;background:#ccc;color:#444;}
      #ui-tabs .tabs{padding:20px;}
      #ui-tabs .dyn-tabs{overflow:auto;display:none;}
      .clear,br.clear{clear:both;}
      .floatright,span.floatright{float:right;}
      .floatleft,span.floatleft{float:left;}
      span.bold{font-weight:700;}
      La suite du script est dans le poste suivant car trop long pour tenir sur les 2 postes précédents.
      Dernière édition par algrand001 à 01/04/2013, 10h33

      Commentaire


      • #4
        Re : Atelier participatif responsive pour virtuemart 2

        Code HTML:
        .width1{width:1%;}.width2{width:2%;}.width3{width:3%;}.width4{width:4%;}.width5{width:5%;}.width6{width:6%;}.width7{width:7%;}.width8{width:8%;}.width9{width:9%;}.width10{width:10%;}.width11{width:11%;}.width12{width:12%;}.width13{width:13%;}.width14{width:14%;}.width15{width:15%;}.width16{width:16%;}.width17{width:17%;}.width18{width:18%;}.width19{width:19%;}.width20{width:20%;}.width21{width:21%;}.width22{width:22%;}.width23{width:23%;}.width24{width:24%;}.width25{width:25%;}.width26{width:26%;}.width27{width:27%;}.width28{width:28%;}.width29{width:29%;}.width30{width:30%;}.width31{width:31%;}.width32{width:32%;}.width33{width:33%;}.width34{width:34%;}.width35{width:35%;}.width36{width:36%;}.width37{width:37%;}.width38{width:38%;}.width39{width:39%;}.width40{width:40%;}.width41{width:41%;}.width42{width:42%;}.width43{width:43%;}.width44{width:44%;}.width45{width:45%;}.width46{width:46%;}.width47{width:47%;}.width48{width:48%;}.width49{width:49%;}.width50{width:50%;}.width51{width:51%;}.width52{width:52%;}.width53{width:53%;}.width54{width:54%;}.width55{width:55%;}.width56{width:56%;}.width57{width:57%;}.width58{width:58%;}.width59{width:59%;}.width60{width:60%;}.width61{width:61%;}.width62{width:62%;}.width63{width:63%;}.width64{width:64%;}.width65{width:65%;}.width66{width:66%;}.width67{width:67%;}.width68{width:68%;}.width69{width:69%;}.width70{width:70%;}.width71{width:71%;}.width72{width:72%;}.width73{width:73%;}.width74{width:74%;}.width75{width:75%;}.width76{width:76%;}.width77{width:77%;}.width78{width:78%;}.width79{width:79%;}.width81{width:81%;}.width82{width:82%;}.width83{width:83%;}.width84{width:84%;}.width85{width:85%;}.width86{width:86%;}.width87{width:87%;}.width88{width:88%;}.width89{width:89%;}.width90{width:90%;}.width91{width:91%;}.width92{width:92%;}.width93{width:93%;}.width94{width:94%;}.width95{width:95%;}.width96{width:96%;}.width97{width:97%;}.width98{width:98%;}.width99{width:99%;}.width100{width:100%;}
        .vmicon, .vmiconFE{background:url(../images/vm2-sprite.png) no-repeat top left;}
        .vm2-add_quantity_cart{background-position:0 0;width:24px;height:24px;border: 0px;cursor:pointer;}
        .vm2-arrow_down{background-position:0 -72px;width:16px;height:16px;}
        .vm2-billto-icon{background-position:0 -138px;height:24px;margin-right:6px;vertical-align:middle;width:24px;border :0px;}
        .vm2-remove_from_cart{    background-position: 0 -212px; border: 0 none; cursor: pointer; display: inline-block; height: 24px; vertical-align: bottom; width: 24px;}
        .vm2-shipto-icon{background-position:0 -284px;height:24px;margin-right:6px;vertical-align:middle;width:24px;}
        .vm2-stars0{background-position:0 -358px;width:64px;height:13px;}
        .vm2-stars1{background-position:0 -421px;width:64px;height:13px;}
        .vm2-stars2{background-position:0 -484px;width:64px;height:13px;}
        .vm2-stars3{background-position:0 -547px;width:64px;height:13px;}
        .vm2-stars4{background-position:0 -610px;width:64px;height:13px;}
        .vm2-stars5{background-position:0 -673px;width:64px;height:13px;}
        .vm2-stars_0{background-position:0 -736px;width:64px;height:13px;}
        .vm2-stars_1{background-position:0 -799px;width:64px;height:13px;}
        .vm2-stars_2{background-position:0 -862px;width:64px;height:13px;}
        .vm2-stars_3{background-position:0 -925px;width:64px;height:13px;}
        .vm2-stars_4{background-position:0 -988px;width:64px;height:13px;}
        .vm2-stars_5{background-position:0 -1051px;width:64px;height:13px;}
        .vm2-lowstock{background-position:0 -1114px;width:62px;height:15px;display:block;}
        .vm2-nostock{background-position:0 -1179px;width:62px;height:15px;display:block;}
        .vm2-normalstock{background-position:0 -1244px;width:62px;height:15px;display:block;}
        .vm2-termsofservice-icon{background-position:0 -1309px;height:24px;margin-right:6px;vertical-align:middle;width:24px;display:inline-block;}
        .vm2-modallink{height:16px;margin-left: 3px;vertical-align:top;width:16px;display:inline-block; background: url("../images/icon_external_link.gif") no-repeat scroll left top transparent;}
        .vm2-warning{background-position:0 -1383px;width:50px;height:40px;}
        .vendor-store-desc,.category-view,.featured-view,.latest-view,.topten-view,.recent-view,.related-products-view,.browse-view,.order-view{margin-bottom:25px;}
        .main-image,.featured-view .product,.latest-view .product,.topten-view .product,.recent-view .product,.related-products-view .product,.center,span.center{text-align:center;}
        .main-image img {max-width:100%;height:auto}
        .main-image img.product-image,.featured-view .spacer img,.latest-view .spacer img,.topten-view .spacer img,.recent-view .spacer img{max-width:100%;height:auto;width:auto;}
        .additional-images,.featured-view .product-price,.latest-view .product-price,.topten-view .product-price,.recent-view .product-price,.output-billto,.output-shipto{margin:10px 0;}
        .ask-a-question,.manufacturer,.manufacturer-details-view .email-weblink,.manufacturer-details-view .description{margin:10px 0 0;}
        .customer-reviews,.ask-a-question-view .form-field{margin:25px 0 0;}
        span.variant-name,span.custom-variant-name{width:100px;float:left;display:block;margin-bottom:5px;}
        span.addtocart-button input.addtocart-button:hover,span.addtocart-button input.notify-button:hover,input.highlight-button:hover,a.highlight:hover{background-position:0 -200px;color:#f2f2f2;}
        .category-view .row .category .spacer,.featured-view .spacer,.latest-view .spacer,.topten-view .spacer,.recent-view .spacer,.related-products-view .spacer,.browse-view .row .product .spacer{padding:6px;}
        .featured-view .spacer h3,.latest-view .spacer h3,.topten-view .spacer h3,.recent-view .spacer h3,.related-products-view .spacer h3,.browse-view .row .product .spacer h2{font-size:14px;margin:0 0 6px;padding:0;}
        .featured-view .spacer span,.latest-view .spacer span,.topten-view .spacer span,.recent-view .spacer span,.related-products-view .spacer span,.browse-view .row .product .spacer span{font-size:11px;color:#666;}
        .browse-view .row .product .spacer img,.related-products-view .row .product .spacer img{max-width:90%;height:auto;}
        .display-number,.control-buttons,.right{text-align:right !important;}
        .ask-a-question-view,.manufacturer-details-view .spacer{padding:30px;}
        .ask-a-question-view h1,.manufacturer-details-view h1{font-size:18px;margin:0;padding:0;}
        #userForm select,.width80{width:80%;}
        textarea.virtuemart:hover,textarea.customer-comment:hover{color:#000;background:#e8e8e8;}
        label.invalid,span.red{color:red;}
        .output-billto span.values,.output-shipto span.values,.floatleft,span.floatleft{float:left;}
        .output-billto span.values,.output-shipto span.values {padding-right:5px;}
        .joomlaCoreField {background-color: #FFFFDD;}
        .vm-pagination div{text-align:center !important;}
        .vm-pagination ul{text-align:center !important;}
        .vm-pagination ul li{display: inline;}
        .vm-pagination  .counter{text-align: right !important;}
        
        .vm-bottom div{text-align:center !important;}
        .vm-bottom ul{text-align:center !important;}
        .vm-bottom ul li{display: inline;}
        .vm-bottom  .counter{text-align: right !important;}
        
        td.orders-key{font-weight: bold; text-align: left; }
        
        /* Manufacturer View Default */
        .manufacturer-view-default .row .manufacturer .spacer {padding: 6px;}
        .product-field-display a img{display: block;}
        .product-related-products, .product-related-categories{border-top:solid #ccc 1px;padding-bottom: 10px;}
        .product-fields .product-field-type-P{clear: both; border-bottom: 1px solid #EEEEEE; margin-top: 18px;}
        .product-field-type-P .product-fields-title{ font-size: 120%;}
        .product-field-type-B,.product-field-type-S,.product-field-type-I{padding-left:3%;float:left;width:30%}
        .product-fields-title{ font-weight: bold;}
        
        .vm-customfield-mod img,.vm-customfield-cart img{ vertical-align: middle; width: 16px;}
        .vm-img-desc{display:block;}
        a:hover .vm-img-desc{background: #095197}
        .vmpayment_name, .vmpayment_cost, .vmshipment_name, .vmshipment_cost{padding:0 2px;}
        .vmpayment_description,.vmshipment_description {color:gray;font-size:9px;padding:0 2px;}
        .vmpayment_cardinfo {color:gray;font-size:9px;}
        .virtuemart_search .inputbox{height:16px;vertical-align :middle}
        /* Custom Field Images */
        .product-fields .product-field,.product-related-categories .product-field {width:100%;float:left;display:inline-block;}
        .product-fields .product-field label.other-customfield {width:25%;float:left;position:relative;top:20px;left:-18px;margin-bottom:27px;text-align:center;}  /* For 4 images across use width:17% */
        .product-fields .product-field input[type=radio] {position:relative;left:33px;}
        .product-fields .product-field .vm-img-desc {font-size:9px;}
        Suite du script dans le poste suivant :
        Dernière édition par algrand001 à 01/04/2013, 10h35

        Commentaire


        • #5
          Re : Atelier participatif responsive pour virtuemart 2

          Code HTML:
          /* some more styles */
          .priceColor2{color:gray;}
          .line-through{text-decoration:line-through}
          .inline{display: inline;}
          td.pricePad{padding-right: 10px;}
          td.priceCol{white-space:nowrap;}
          div.spaceStyle{padding: 0px; margin: 5px; spacing: 0px;}
          .vm-notice{color: #CC0000;}
          .buttonBar-right{text-align: right; width: 100%;}
          .userfields_info{font-weight: bold;display: block;margin: 0px 0px 8px 0px;}
          .ratingbox {
          	position:relative;
          	display:block;
          	width:120px;
          	height:24px;
          	background:url("../images/color-stars.png") repeat-x scroll 0 bottom transparent;
          }
          .ratingbox span {
          	background:url(../images/color-stars.png) repeat-x;
          	display:block;
          	width:1%;
          	height:24px;
          	position:absolute;
          }
          .stars-orange{background-position:0 0 !important;}
          .stars-red{background-position:0 -54px !important;}
          .stars-green{background-position:0 -108px !important; }
          .stars-blue{background-position:0 -162px !important;}
          .stars-purple{background-position:0 -216px !important;}

          Voila, vous avez le script au complet.
          Cela permet de réduire la taille de pas mal de boutons, d'en rendre certain responsive alors qu'il ne l'étaient pas, de permettre le bon replacement d'autres quand on réduit la taille des fenêtres, etc ...

          Reste encore à modifier les contenu trop longs de certain boutons (exemple : dans détail produit, le bouton qui n'en est pas un : choisissez une variante du produit, etc ...). C'est quand on passe en toute petite resolution de smartphone (320 px de large) qu'il reste des choses à voir, cela se bouscule encore. Si non cela passe dans tous les autres standards d'affichages.

          J'ai également changé la couleur des boutons "commander" ou "ajouter au panier". Le vert d'origine ne me convenait pas, je l'ai accordé aux couleurs d'origine du template ja-elastica. Dans le script si dessus on définit la couleur du pourtours de ces boutons. Je l'ai réglée sur le rouge de ja-elastica (code couleur : #EC534D). Pour ce qui est du background de ces boutons, il faut modifier le fichier image suivant :

          wamp/www/votre site/components/com_virtuemart/assets/images/vmgeneral/backgrounds


          Voilà ou j'en suis au niveau des réglages des détails produits, ajout au panier, panier et commander. J'espère que ces petits travaux en aideront d'autres ?
          Comme vous le voyez, c'est en chantier, donc toute personne qui aura envie de faire avancer ce script, ainsi que de participer à cet atelier sera la bienvenue.
          A vous de jouer ...
          Dernière édition par algrand001 à 01/04/2013, 10h36

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X