[RESOLU] Mettre la ref sur la même ligne que le titre Référence

[lucho84]

Bonsoir à tous,

 

Je rencontre quelques petits soucis sous PS 1.6, j'ai actuellement dans la fiche produit le libellé "Référence" et la ref produit qui apparait en dessous du libellé, ce qui n'est pas trés esthétique!

 

J'aimerais tout mettre sur la même ligne, mais je n'y arrive pas.

 

Voici le code à modifier dans product.tpl :

<div id="product_reference" class="row-fluid" {if isset($groups) OR !$product->reference}style="display: none;"{/if}>
					<label for="product_reference" class="span3">{l s='Reference:'} </label>
					<span class="editable span9">{$product->reference|escape:'htmlall':'UTF-8'}</span>
				</div>

J'ai essayé de faire ceci :

<div id="product_reference" class="row-fluid" {if isset($groups) OR !$product->reference}style="display: none;"{/if}>
					<label for="product_reference" class="span3">{l s='Reference:'}{$product->reference|escape:'htmlall':'UTF-8'} </label>
					<!--<span class="editable span9">{$product->reference|escape:'htmlall':'UTF-8'}</span>-->
				</div>

J'ai effectivement la ref qui s'affiche bien, mais je perds la mise en forme du texte (police, couleur, taille) et la ref est trop collé au libellé (ex: Référence:23456).

 

Qu'est il possible de faire?

Edited October 29, 2014 by lucho84 (see edit history)

[lucho84]

N'auriez vous pas un conseil à me donner?

[S-HAMMANI]

Bonjour ;

 

Tu peux indiquer l'URL de ta boutique ?

[lucho84]

Bonjour pas de souci, la voici

 

http://www.devweb.theias.fr/fr/huiles-vegetales/10-huile-precieuse-d-argan-50ml.html

[S-HAMMANI]

Bonjour

 

teste ça

        <div id="product_reference" class="row-fluid" {if isset($groups) OR !$product->reference}style="display: none;"{/if}>

                    <label for="product_reference" class="span3">{l s='Reference:'} </label>

                    <span class="editable span8">{$product->reference|escape:'htmlall':'UTF-8'}</span>

       </div>

[lucho84]

Bonsoir, effectivement ça marche parfaitement, mais maintenant je suis bloqué avec le margin-left car celui est partagé avec tout les span, dans mon cas, cela se situe dans le fichier bootstrap-responsive.css ligne 221 :

.row-fluid [class*="span"] {
    box-sizing: border-box;
    display: block;
    float: left;
    margin-left: 20px;
    min-height: 30px;
    width: 100%;

Si je bouge le margin-left cela va s'appliquer à tout les span.

 

Savez vous comment remédier à ce problème?

 

En tout cas merci pour votre aide

[lucho84]

Bon j'ai trouvé, la modif à faire dans le fichier bootstrap-responsive.css se situe ligne 255

.row-fluid .span8 {
    width: 65.81196581196582%;
    *width: 65.75877432260411%;
}

Où il faut ajouter :

.row-fluid .span8 {
    width: 65.81196581196582%;
    *width: 65.75877432260411%;
    margin-left:0px!important;
 }

Ne pas oublier !important pour que cette valeur s'execute par défaut, je précise également que cette solution est valable mais s'applique à tout les éléments utilisant la class span8 dans mon côté je n'en ai aucune donc tout va bien

Edited October 29, 2014 by lucho84 (see edit history)

[S-HAMMANI]

Mais cette règle va affecter tout les éléments de class span8; vaut mieux rajouter une autre class par exemple:

 

<span class="editable span8 no-margin-left">{$product->reference|escape:'htmlall':'UTF-8'}</span>

 

et dans le fichier css ajouter ce code:

.no-margin-left{
      margin-left:0px !important;
}