Jump to content

Aligner panier, compte et utilisateur

Presta_SEO
 Share

Recommended Posts

Imelia Newbie

Imelia

Posted
Posted

C'est d'abord une modification de template, dans le module blockuserinfos. Par défaut, dans le blockuserinfos.tpl, la ligne de connexion est entre des balises de paragraphes "<p></p>", et le compte /le panier sont dans une liste entre balises "<ul>/<ul>".

Il faut donc supprimer quelques balises pour passer tous les éléments dans un seul bloc.

 

Et ensuite, personnaliser l'apparence via le css effectivement.

Link to comment
Share on other sites
Stéphane Chonez Newbie

Stéphane Chonez

Posted
Posted

salut,

 

regarde ce que ça donne en mettant en float:right;

 

 

#header_user p {

 

 

color: #595A5E;

float: right;

}

 

tu aligneras tous tes éléments. Ensuite, si tu veux organiser l'ordre des blocs, ça se passe dans le .tpl...

tu peux par exemple déplacer le bloc

<p id="header_user_info">
    {l s='Welcome' mod='blockuserinfo'},
    {if $cookie->isLogged()}
	    <span>{$cookie->customer_firstname} {$cookie->customer_lastname}</span>
	    (<a href="{$link->getPageLink('index.php')}?mylogout" title="{l s='Log me out' mod='blockuserinfo'}">{l s='Log out' mod='blockuserinfo'}</a>)
    {else}
	    <a href="{$link->getPageLink('my-account.php', true)}">{l s='Log in' mod='blockuserinfo'}</a>
    {/if}
   </p>

juste après la cloture du </ul> de <ul id="header_nav">

Link to comment
Share on other sites
Imelia Newbie

Imelia

Posted
Posted

A priori, pour la compatibilité entre navigateurs le float:right ne suffira pas, c'est surtout pour ça que je conseillais de passer par une modif du tpl pour que tout le monde interprète les choses de la même manière: les paragraphes étant des éléments blocks, certains navigateurs leur feront prendre par défaut toute la largeur qu'ils ont à disposition sur une même ligne. Donc pour que le float fonctionne dans tous les cas et partout, il faudrait assigner une largeur au #header_user p", afin qu'on soit sûrs qu'il ne prenne qu'une partie de la place. Mais comme on ne sait pas quelle longueur peut faire le nom d'un client connecté c'est un peu risqué (le nom pourrait être coupé par exemple).

 

Mais sinon oui effectivement, sans parler de compatibilité navigateurs, un float:right (ou un float:left si tu veux le mettre à gauche) fonctionne.

Link to comment
Share on other sites
Imelia Newbie

Imelia

Posted
Posted

Avec un "float:left", le texte viendra avant le reste. Ensuite, comme le texte "bienvenue, connexion" sera trop à gauche, tu peux lui appliquer un "text-align:right" dans ton css. Si tu trouves qu'il est trop près des deux autres liens une fois passé en text-align:right, tu peux lui apposer une marge à droite pour le pousser un peu. Et là ça devrait le faire. Et dans ton CSS ça donnerait quelque chose du genre:

 

#header_user p {

float:left;

text-align:right;

margin-right:5px; /*autant de pixels que nécessaire*/

}

Link to comment
Share on other sites
Presta_SEO Explorer

Presta_SEO

Posted
  • Author
Posted (edited)

C'est aligné à présent mais je me suis perdu dans les valeurs, entre global.css et blockuserinfo.css...

Manque juste de remonter un peu la ligne et rapprocher "bienvenue" du reste.

 

Merci

 

Edit. Pour le "bienvenue", j'ai feinté en réduisant la taille du "#header_right #header_user" ce qui l'a rapproché du reste. Manque juste de remonter un peu la ligne. Avec GG Chrome c'est ok pourtant, dommage !

Edited by hyperdavio (see edit history)
Link to comment
Share on other sites
Presta_SEO Explorer

Presta_SEO

Posted
  • Author
Posted (edited)

Non ça ne change rien, ça "mange" encore le haut de la bannière avec FF ! :(

 

Edit. Ah si pardon, pour rapprocher l"bienvenue" ! C'est pas ce qui m'embête, je pouvais le rapprocher en réduisant encore "#header_right #header_user" ;)

 

C'est de remonter un peu cette ligne qui me manque encore...

Edited by hyperdavio (see edit history)
Link to comment
Share on other sites
Imelia Newbie

Imelia

Posted
Posted

ah d'accord, je n'avais pas compris ça. je pensais que tu voulais juste décaler le texte et le rapprocher du lien de compte/panier.

 

Applique une augmentation de la marge haute sur ton "img.logo", ligne 220 de ton global.css. Là j'ai testé sous Firefox et Chrome, du "margin-top:0.5em" initial je suis passée à un "0.9em" et ça ne mord plus.

 

Et si j'ai toujours pas compris la question, je vais aller me recoucher^^

Link to comment
Share on other sites
Presta_SEO Explorer

Presta_SEO

Posted
  • Author
Posted

Et si j'ai toujours pas compris la question, je vais aller me recoucher^^

 

Non non, surtout pas ! :)

 

Extra, ça marche impecc, merci beaucoup !

 

Encore une petite chose que je n'ai pas trouvé : ( toujours cette même ligne) comment passer la couleur grise de la police panier "vide" en noir, j'ai trouvé pour les autres mais pas pour ça ?

Link to comment
Share on other sites
Imelia Newbie

Imelia

Posted
Posted

Si tu regardes avec firebug en cliquant sur "vide", tu verras que c'est un span avec une classe, en l'occurrence

 

<span class="ajax_cart_no_product]">(vide)</span>

 

Tu verras aussi que, à la ligne 15 de ton blockuserinfo.css, il y a cette déclaration:

 

#header_user span {
font-weight: bold;
}

 

Si tu ajoutes une couleur directement là dedans, tous les spans seront de cette couleur quand ils apparaîtront (le nombre de produits quand le panier ne sera pas vide etc). Donc si tu veux que seule la mention "vide" soit en couleur, tu peux ajouter, après cette déclaration, une nouvelle propriété qui spécifiera le traitement de ce span en particulier et uniquement lui:

 

#header_user span.ajax_cart_no_product{
color:#LECODECOULEUR;
}

 

Voilou :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...