Créditez-moi quelque part si vous utilisez ce code !
Codes et explications
Le code du module de connexion se trouve à deux endroit du template, en haut et en bas, donc selon l'endroit où se trouve votre module de connexion rapide, remplacez à l'endroit nécessaire. Pour changer l'emplacement du module, allez dans votre panneau d'administration, Affichage > Page d'accueil > Généralités et dans "Affichage de la connexion rapide :" sélectionnez l'option de votre choix (en haut, en bas ou les deux).
Pour le module du haut, dans votre panneau d'administration, Affichage > Templates > Général > index_body, repérez le code suivant.
- Code:
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">
<table>
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<!-- BEGIN switch_social_login -->
<td width="10%" align="center" valign="middle" class="row1">
<span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
</td>
<td width="40%" class="align_gauche row1">
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
</td>
<!-- END switch_social_login -->
</tr>
</table>
</form>
<!-- END switch_user_login_form_header -->
Remplacez-le par :
- Code:
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login" class="connexion-rapide">
<h2>Connexion rapide</h2>
<div class="input-connexion">
<input class="post" type="text" size="10" name="username" />
<label>Nom d'utilisateur</label>
</div>
<div class="input-connexion">
<input class="post" type="password" size="10" name="password" />
<label>Mot de passe</label>
</div>
<div>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span>{L_AUTO_LOGIN}</span>
</div>
{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
</form>
<!-- END switch_user_login_form_header -->
<script>
$(function(){
$('.connexion-rapide .input-connexion input').focusout(function(){
var text_val = $(this).val();
if(text_val === "") {
$(this).removeClass('rempli');
} else {$(this).addClass('rempli');
}
});
});
</script>
Pour le module du bas, dans votre panneau d'administration, Affichage > Templates > Général > index_body, repérez le code suivant.
- Code:
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">
<table>
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>
<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<!-- BEGIN switch_social_login -->
<td width="10%" align="center" valign="middle" class="row1">
<span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
</td>
<td width="40%" class="align_gauche row1">
<div class="social_btn">
<!-- BEGIN fb_connect -->
<div class="fb-login-button"></div>
<!-- END fb_connect -->
<!-- BEGIN topicit_connect -->
<div class="ti-connect"></div>
<!-- END topicit_connect -->
</div>
</td>
<!-- END switch_social_login -->
</tr>
</table>
</form>
<!-- END switch_user_login_form_footer -->
Remplacez-le par :
- Code:
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login" class="connexion-rapide">
<h2>Connexion rapide</h2>
<div class="input-connexion">
<input class="post" type="text" size="10" name="username" />
<label>Nom d'utilisateur</label>
</div>
<div class="input-connexion">
<input class="post" type="password" size="10" name="password" />
<label>Mot de passe</label>
</div>
<div>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span>{L_AUTO_LOGIN}</span>
</div>
{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
</form>
<!-- END switch_user_login_form_footer -->
<script>
$(function(){
$('.connexion-rapide .input-connexion input').focusout(function(){
var text_val = $(this).val();
if(text_val === "") {
$(this).removeClass('rempli');
} else {$(this).addClass('rempli');
}
});
});
</script>
Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :
- Code:
/*CUSTOMISATION DU MODULE DE CONNEXION RAPIDE PAR AWFUL*/
/*Import de la police*/
@import url('https://fonts.googleapis.com/css?family=Roboto|Montserrat:900');
form.connexion-rapide {
width: 500px;
background: #f7f7f7;
margin: 10px auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px 0;
font-family: "Roboto", sans-serif;
border: 1px solid #ccc;
}
form.connexion-rapide h2 {
margin: 0 0 25px;
text-align: center;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
font-size: 12px;
letter-spacing: 1px;
}
form.connexion-rapide div,
form.connexion-rapide > input{
position: relative;
width: 60%;
margin: auto;
}
form.connexion-rapide .input-connexion {
margin-bottom: 15px;
}
form.connexion-rapide input.post {
height: 30px;
box-sizing: border-box;
-webkit-transition: all 0.3s cubic-bezier(0.5, 0.1, 0.08, 1);
transition: all 0.3s cubic-bezier(0.5, 0.1, 0.08, 1);
font-family: "Roboto", sans-serif;
border: 0;
background: transparent;
border-bottom: 1px solid #cb79e0;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #cb79e0 4%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #cb79e0 4%);
background-position: -300px 0;
background-size: 100%;
background-repeat: no-repeat;
font-size: 12px;
width: 100%;
}
form.connexion-rapide input.post:focus {
outline: none;
background-position: 0 0;
}
form.connexion-rapide .input-connexion label {
position: absolute;
transition: all 0.3s cubic-bezier(0.5, 0.1, 0.08, 1);
font-size: 12px;
color: #999;
line-height: 30px;
pointer-events: none;
}
form.connexion-rapide input.post:focus + label,
form.connexion-rapide input.post.rempli + label{
color: #cb79e0;
font-size: 11px;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
visibility: visible !important;
}
form.connexion-rapide input.post::-webkit-input-placeholder {
-webkit-transition: all 0.3s cubic-bezier(0.5, 0.1, 0.08, 1);
transition: all 0.3s cubic-bezier(0.5, 0.1, 0.08, 1);
font-size: 12px;
}
form.connexion-rapide input.post:focus::-webkit-input-placeholder {
color: #cb79e0;
font-size: 11px;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
visibility: visible !important;
}
form.connexion-rapide div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
form.connexion-rapide div input {
margin: 0px 10px 0px 0px;
}
form.connexion-rapide div span {
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
}
form.connexion-rapide > input[type="submit"] {
margin-top: 10px;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
padding: 5px 0;
border: 1px solid #ccc;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
form.connexion-rapide > input[type="submit"]:hover {
border: 1px solid #cb79e0;
}