Bloc de connexion rapide verte
Ce LS remplace le bloc de connexion rapide présent sur l'index du forum.
- Incompatible avec la connexion rapide par Facebook (Facebook Connect)
- Modification du template index_body (il faut donc être fondateur du forum)
- Testé sur phphbb2
Il s'agit du bloc de connexion. La partie image à gauche est un lien version l'inscription.
L'image fait 80px par 80px, vous pouvez mettre plus grand, mais gardez une image carrée :)
Template
Pensez à activer la connexion rapide sur le panneau d'admin :
PA > Affichage > Page d'accueil > Généralités > Affichage de la connexion rapide
Le template à modifier est index_body
PA > Affichage > Templates > Général > index_body
PA > Affichage > Page d'accueil > Généralités > Affichage de la connexion rapide
Le template à modifier est index_body
PA > Affichage > Templates > Général > index_body
Le code de connexion rapide est présent 2 fois dans le template, pour la connexion rapide en haut et celle en bas.
En fonction de ce que vous avez choisi (en haut / en bas), il faudra la remplacer au bon endroit.
Connexion rapide en haut
Le code se situe entre ces deux lignes :
- Code:
<!-- BEGIN switch_user_login_form_header -->
REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_header -->
Connexion rapide en bas
Le code se situe entre ces deux lignes :
- Code:
<!-- BEGIN switch_user_login_form_footer -->
REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_footer -->
Le HTML
- Code:
<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->
<!-- Ajout de la police -->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<div class="cnxl-bloc">
<form class="cnxl-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">
<!-- Bloc gauche - INSCRIPTION-->
<a class="cnxl-inscription" href="/register" title="S'inscrire !">
<img src="http://image.noelshack.com/fichiers/2016/09/1457207134-decoration.png" alt="Rejoindre le forum" />
</a>
<!-- Bloc milieu - LES CHAMPS A REMPLIR-->
<div class="cnxl-input-bloc">
<input type="text" name="username" placeholder="Pseudo" />
<input type="password" name="password" placeholder="Mot de passe" />
</div>
<!-- Bloc droit - BOUTON CONNEXION-->
<div class="cnxl-submit-bloc">
<input type="submit" name="login" value="Connexion" />
</div>
<!-- En bas-->
<div>
<input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
<label for="autologin">Connexion automatique</label>
</div>
</form>
<a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a>
</div>
<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->
Si vous avez choisi de l'afficher en haut et en bas :
- Spoiler:
- Il faudra donc le remplacer 2 fois dans le template !
Attention, il y a un id à remplacer ici :
- Code:
<input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
<label for="autologin">Connexion automatique</label>
- Code:
<input class="radio" type="checkbox" name="autologin" id="autologinbottom" {AUTOLOGIN_CHECKED} />
<label for="autologinbottom">Connexion automatique</label>
CSS
PA > Affichage > Images & Couleurs > Couleurs > Onglet "Feuille de style"
- Code:
/*
* Libre service bloc de connexion rapide verte
* NEVER UTOPIA
*/
/* Bloc qui entoure tout */
.cnxl-bloc {
margin: 20px auto;
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 15px;
color: #484848;
}
/* Aligner les 3 blocs */
.cnxl-submit-bloc,
.cnxl-inscription,
.cnxl-input-bloc {
display: inline-block;
vertical-align: middle;
}
/* Style commun pour tous les champs */
.cnxl-form input {
padding: 10px;
border: none;
font-family: inherit;
font-size: 15px;
outline: none;
}
/*
* Décoration à gauche
* Inscription
*/
.cnxl-inscription {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #E5DB84;
padding: 8px;
}
.cnxl-inscription img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/*
* Champs à remplir au centre
*/
.cnxl-input-bloc {
margin: 0 20px;
width: 200px;
border-radius: 5px;
box-shadow: 0 0 0 2px #E5DB84;
overflow: hidden;
padding: 0 5px; /* espace entre le bord et le trait des input */
background: #FFFFFF;
}
.cnxl-input-bloc input {
color: black;
box-sizing: border-box;
display: block;
width: 100%;
border-bottom: 1px solid #E5DB84; /* bordure entre les input */
box-shadow: 0 0 0 100px #ffffff inset; /* couleur de fond des input */
}
.cnxl-input-bloc input:last-of-type {
border: none;
}
/*
* Connexion à droite
*/
/* Bouton de connexion */
.cnxl-submit-bloc input {
background: #E5DB84;
border-radius: 3px;
cursor: pointer;
transition: all 300ms ease-out;
}
/* Bouton de connexion au survol */
.cnxl-submit-bloc input:hover {
background: #ede390;
}
/*
* Zone en bas
*/
.cnxl-form label {
cursor: pointer;
}
/* Liens (Mot de passe oublié) */
.cnxl-bloc a {
font-size: 10px;
text-decoration: none!important;
color: #766e6e;
text-decoration: none;
transition: all 300ms ease-out;
}
/* Liens au survol (Mot de passe oublié) */
.cnxl-bloc a:hover {
color: #a79d46;
}
/*
* Fin libre service Connexion rapide verte
* Never Utopia
*/
En cas de problème, merci de vous rendre dans la section "Problème avec mon code" ou "Personnalisation" 
Merci de penser à créditer Never Utopia, avec un lien vers le forum, merci 
)
