[résolu] Aligner les boutons "connexion avec"

[alfred.hsa]

Bonjour, 

 

J'ai installé le bouton "connexion avec Paypal" et également le module "Facebook, Twitter, Google, LinkedIn, Microsoft Connects (5 in 1) v1.4.0". 

Malheureusement les boutons ne sont pas du tout alignés sur la page de connexion (voir copie d'écran en pièce jointe). 

Le live edit ne marche pas sur cette page, et les réglages left/right column pour la position des boutons du module 5 in 1 ne servent à rien (ou alors je n'ai pas vu les changements quand j'ai fait mes tests). 

 

Quelqu'un a-t-il une idée sur comment mettre tous ces boutons sur la même ligne (idéalement à la suite du bouton "connexion avec paypal", pour une meilleure visibilité) ?

 

Par avance merci

 

Edited February 16, 2015 by alfred.hsa (see edit history)

[thomasharko]

Le module doit afficher les boutons dans un hook différent de celui de PayPal

Il faut modifier authentication.tpl et sûrement faire quelques réglages css.

 

Attention si tu ne t'y connais pas trop, entraînes toi sur une version de développement avant de le faire sur ton site en prod.

 

Bonne journée

[alfred.hsa]

Bonjour, 

 

Après plusieurs échange avec le développeur du module 5 in 1, j'y suis presque : les boutons de connexion sont biens à la bonne place. 

Le seul problème désormais c'est qu'ils se placent sur une ligne sous le bouton login Paypal. 

D'après le développeur, il faut que je fasse une mini modif de style sur le bouton paypal :

 

 

Quelqu'un sait-il où je dois faire la modif ?

 

Par avance merci. 

[thomasharko]

Sur l'image tout est sur une ligne, quel est le problème ?

[alfred.hsa]

L'image c'est le résultat si les modifs ont été faites au niveau du <div id="buttonPaypalLogin1.... (la partie surlignée/entourée).

Ma question est où je fais ces modifs pour obtenir la même image. 

Le développeur du module 5 in 1 n'a pas su m'expliquer. 

[thomasharko]

Ah d'accord

Sur l'exemple, il a fait un ajout de style directement sur le tpl au lieu de passer par une classe

 

Pour l'ajouter en style il faut aller dans le module et voir s'il y a un fichier css ou sinon /themes/css/authentication.css et ajouter :

.buttonPaypalLogin1 {
float:left;
margin-left:20px;
margin-bottom:10px;
} 

Ou sinon en modifiant le fichier .tpl du module,

Il faut trouver :

<div id="buttonPaypalLogin1"> 

Et le transformer en :

<div id="buttonPaypalLogin1" style="float:left; margin-left:20px; margin-bottom:10px;">

Et voilà, n'oublies pas de vider les caches

Bonne journée

[alfred.hsa]

J'ai téléchargé tout le module Paypal et j'ai effectué une recherche "buttonPaypalLogin1". j'ai un unique résultat, dans paypal_login.js. 

j'ai modifié le fichier comme ça : 

$("#buttonPaypalLogin1").css({ldelim}
		"clear"       : "both",
		'float' : 'left',
		'margin-left' : '20px',
		'margin-bottom' : '10px',
		{if $smarty.const._PS_VERSION_ >= 1.6}
		'float' : 'left',
		'margin-left' : '20px',
		'margin-bottom' : '10px',
		'width' : '100%'
		{/if}	
	{rdelim});

mais ça n'a rien changé, malgré le cache vidé.

 

pour ta première méthode, j'ai cherché dans les css, mais je ne vois pas ou je dois ajouter ton code pour que ça marche. 

as-tu une idée ?

 

merci

[thomasharko]

Il suffit d'ajouter ceci à la fin du css du module ou de authentication.css dans le thème

Si c'est dans le css du module il faut vérifier si l'id est présent et donc modifier les valeurs ou si c'est dans authentication.css, il faut juste ajouter ces ligne à la fin du fichier.

#buttonPaypalLogin1 {
float:left;
margin-left:20px;
margin-bottom:10px;
}

Bonne soirée

[alfred.hsa]

Je crois que je suis maudit... 

J'ai fait la modif dans authentication.css (qui est dans le dossier /themes/default-bootstrap/css) :

/**********************************************************
				Authentication Styles
**********************************************************/
#account-creation_form .id_state,
#account-creation_form .dni,
#account-creation_form .postcode {
  display: none; }

#create-account_form {
  min-height: 297px; }
  #create-account_form p {
    margin-bottom: 8px; }
  #create-account_form .form-group {
    margin: 0 0 20px 0; }

#login_form {
  min-height: 297px; }
  #login_form .form-group {
    margin: 0 0 3px 0; }
    #login_form .form-group.lost_password {
      margin: 14px 0 15px 0; }
      #login_form .form-group.lost_password a {
        text-decoration: underline; }
        #login_form .form-group.lost_password a:hover {
          text-decoration: none; }

#login_form .form-control, #create-account_form .form-control {
  max-width: 271px; }
  
#buttonPaypalLogin1 {
 float:left;
 margin-left:20px;
 margin-bottom:10px; }

Et ça n'a rien changé... 

 

Je vais essayer de supprimer tout le module Paypal et le réinstaller, enfin dès que j'aurais retrouvé le mdp du compte Paypal. 

Je te tiens au courant. 

[thomasharko]

Si tu me donnes une url, je peux regarder.

Je ne penses pas que ce soit la peine de supprimer.

[alfred.hsa]

voici l'URL où je rencontre le problème : http://marionetcie.fr/authentification

 

Merci.

[thomasharko]

Remplace par 

#buttonPaypalLogin1 {
float: left!important;
margin-left: 20px!important;
margin-bottom: 10px!important;
width: auto!important;
}

Et ce sera ok

 

Pour l'explication, le css est écrasé par le js, du coup le !important dit qu'il faut utiliser ce style

Le width était à 100% sur l'élément donc le width auto fera en sorte d'annuler ce 100%

 

Et voilà le travail ;-)

 

Bonne soirée

[alfred.hsa]

Magnifique, tu es un génie !! 

 

Merci beaucoup pour ton aide !