Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Bloc de connexion rapide verte avec une image

    Partagez
    Message(s) : 3810

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    9/10  (9/10)
    Nihil Scar Winspeare
    le Dim 6 Mar 2016 - 12:29
    Rappel du premier message :



    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

    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>
    Un id est forcément unique. Dans le code pour la connexion rapide en bas du forum, remplacez ces 2 lignes par ceci :
    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"  :hudada:


    Merci de penser à créditer Never Utopia, avec un lien vers le forum, merci  :lovebomb:



    Merci Maféliquement <3
    Viens faire un tour sur la chatbox Gérer les périodes de vacances sur son forum
    Présence fortement réduite :toto:
    FémininAge : 16Message(s) : 16
    Wasabii
    le Mer 20 Juil 2016 - 3:00
    Merci beaucoup pour ce code ! :B


    FémininAge : 86Message(s) : 86
    Skylighty
    le Jeu 21 Juil 2016 - 8:22
    chouette ! merci
    MasculinAge : 22Message(s) : 75
    dean winchester
    le Jeu 21 Juil 2016 - 14:28
    merci
    MasculinAge : 17Message(s) : 75
    Applauze
    le Ven 22 Juil 2016 - 14:00
    Merci
    FémininAge : 14Message(s) : 93
    Kira Hatsuki
    le Sam 23 Juil 2016 - 14:18
    Merci beaucoup c'est très joli ! =)
    MasculinAge : 18Message(s) : 519

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    0/10  (0/10)
    Ryukaï
    le Mar 26 Juil 2016 - 11:33
    Merci Scar, tu gères!


    FémininAge : 29Message(s) : 367
    Kahlan
    le Ven 29 Juil 2016 - 20:05
    merci pour ce partage !
    FémininAge : 15Message(s) : 17
    Tsukkomi.
    le Mar 2 Aoû 2016 - 2:23
    Merci !
    FémininAge : 16Message(s) : 15
    Nyhnn
    le Mer 3 Aoû 2016 - 23:51
    Merci du partage! *-*
    FémininAge : 23Message(s) : 21
    Usolia Naviento
    le Jeu 4 Aoû 2016 - 22:55
    Hé, merci pour le code! =D
    FémininAge : 25Message(s) : 305
    Eil'liathan Tyan'Lirulin
    le Dim 7 Aoû 2016 - 21:11
    Merci du partage !
    MasculinAge : 30Message(s) : 15
    Aubenaissante
    le Lun 8 Aoû 2016 - 0:10
    up merci beaucoup
    FémininAge : 17Message(s) : 511

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    0/10  (0/10)
    NanoiHime
    le Mar 9 Aoû 2016 - 1:01
    merci




    MasculinAge : 43Message(s) : 109
    .Lucifer.
    le Mar 9 Aoû 2016 - 6:30
    Merci beaucoup pour le partage! Wink


    MasculinAge : 26Message(s) : 6
    kaitorla
    le Ven 12 Aoû 2016 - 13:02
    merci ^^
    MasculinAge : 20Message(s) : 57
    [LT]BountyS4
    le Ven 12 Aoû 2016 - 22:36
    Merci beaucoup :)


    MasculinAge : 31Message(s) : 31657

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Ven 12 Aoû 2016 - 22:48
    Je sais pas à combien sont les compteurs, mais je vois ça jaune aussi Razz


    MasculinAge : 30Message(s) : 25
    LeMonarque
    le Sam 13 Aoû 2016 - 12:19
    Merci
    FémininAge : 14Message(s) : 165
    KimmyKinder
    le Sam 13 Aoû 2016 - 18:51
    Super **
    FémininAge : 26Message(s) : 21
    missp
    le Sam 13 Aoû 2016 - 23:29
    Oh, merci!
    MasculinAge : 16Message(s) : 101
    Iguolta
    le Mar 16 Aoû 2016 - 18:10
    Merci



    Merci à Cruelly pour le kit Very Happy
    Merci beaucoup ^^:

    Merci Raeden Liddell Very Happy


    Merci Bubodox Very Happy


    Merci Shoki Very Happy
    FémininAge : 23Message(s) : 115
    Noruenu
    le Jeu 18 Aoû 2016 - 16:54
    Trop coooooool merci ! :hug:
    FémininAge : 16Message(s) : 15
    Iyokan
    le Ven 19 Aoû 2016 - 11:10
    Merci!
    MasculinAge : 15Message(s) : 115

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    BlueGhost
    le Dim 21 Aoû 2016 - 21:53
    Merci ♥


    FémininAge : 24Message(s) : 162
    petit lu
    le Jeu 25 Aoû 2016 - 13:58
    Merci du partage <3
    Contenu sponsorisé
    Aujourd'hui à 8:59

      La date/heure actuelle est Sam 1 Oct 2016 - 8:59