News Accueil

Terrible

Libre-service de codages pour vos forums


Connexion rapide #1

par Awful le le Dim 25 Fév - 13:43


Ce module de connexion rapide ne comprend pas le bouton "Topic'It" (qui sera, de toute façon, disponible sur la page de connexion de votre forum)

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"/>&nbsp;</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;
}