AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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

    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5105

    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.
    Bloc de connexion rapide verte avec une image - Page 2 UAOOHiJ

    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:



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    O'Daim
    O'Daim
    FémininAge : 24Messages : 116

    le Dim 10 Avr 2016 - 11:56

    merci !
    Akiran
    Akiran
    FémininAge : 18Messages : 158

    le Dim 10 Avr 2016 - 17:00

    Mercii !
    beza
    beza
    FémininAge : 23Messages : 47

    le Mar 12 Avr 2016 - 22:26

    Merci!
    Discorde
    Discorde
    FémininAge : 19Messages : 58

    le Sam 16 Avr 2016 - 15:42

    Merci ^^
    Sniper Soroshiya
    Sniper Soroshiya
    FémininAge : 20Messages : 44

    le Sam 23 Avr 2016 - 0:01

    Classe, merci beaucoup !
    Afterglow
    Afterglow
    FémininAge : 24Messages : 138

    le Ven 6 Mai 2016 - 21:54

    Merci *-*



    How do you get up from an all time low?
    BlueBerry ♪
    BlueBerry ♪
    FémininAge : 21Messages : 138

    le Sam 7 Mai 2016 - 18:22

    merci ! je prends !



    Bloc de connexion rapide verte avec une image - Page 2 7310
    Wiss
    Wiss
    FémininAge : 14Messages : 53

    le Dim 15 Mai 2016 - 8:56

    merci



    Bloc de connexion rapide verte avec une image - Page 2 Wiss11
    Autre signa:
    Bloc de connexion rapide verte avec une image - Page 2 Signa110
    Heartfilia
    Heartfilia
    FémininAge : 19Messages : 98

    le Lun 16 Mai 2016 - 13:38

    J'adore, merci.



    YOU HELLA SAVED MY LIFE
    - chloe price
    rosebleudu10
    rosebleudu10
    FémininAge : 29Messages : 189

    le Mar 17 Mai 2016 - 20:37

    merci
    Calkrys
    Calkrys
    FémininAge : 21Messages : 49

    le Dim 22 Mai 2016 - 18:16

    Merci pour ce code !
    avatar
    Nal Souclade
    MasculinAge : 20Messages : 163

    le Dim 22 Mai 2016 - 21:27

    Super ! Merci beaucoup !
    Litonya
    Litonya
    FémininAge : 17Messages : 149

    le Lun 6 Juin 2016 - 22:02

    michi
    Furudebusu
    Furudebusu
    FémininAge : 21Messages : 25

    le Mer 8 Juin 2016 - 18:07

    Merci !
    Wilh
    Wilh
    FémininAge : 25Messages : 51

    le Jeu 9 Juin 2016 - 21:41

    C'est joli, merci du partage :)
    Girly
    Girly
    FémininAge : 21Messages : 116

    le Dim 12 Juin 2016 - 18:22

    merci
    Isalia
    Isalia
    FémininAge : 19Messages : 125

    le Lun 13 Juin 2016 - 18:34

    Merci *o*
    EAVENN
    EAVENN
    FémininAge : 23Messages : 162

    le Dim 19 Juin 2016 - 0:22

    merci
    Velvet-Mist
    Velvet-Mist
    FémininAge : 28Messages : 45

    le Sam 25 Juin 2016 - 23:26

    Oh merci =)
    akiraexile
    akiraexile
    FémininAge : 21Messages : 7

    le Lun 27 Juin 2016 - 20:11

    Merci !
    Icimoi
    Icimoi
    MasculinAge : 21Messages : 2

    le Mer 29 Juin 2016 - 0:49

    Mer i
    Opaline
    Opaline
    FémininAge : 19Messages : 86

    le Lun 4 Juil 2016 - 17:12

    Merci~



    Bloc de connexion rapide verte avec une image - Page 2 140502022634448028
    Asarigolo
    Asarigolo
    MasculinAge : 26Messages : 29

    le Lun 11 Juil 2016 - 2:32

    Merci ♥
    Velcuum
    Velcuum
    MasculinAge : 20Messages : 39

    le Mer 13 Juil 2016 - 19:25

    Merci :)
    Kâ Lys
    Kâ Lys
    MasculinAge : 27Messages : 299

    le Sam 16 Juil 2016 - 23:13

    merci



    Bloc de connexion rapide verte avec une image - Page 2 Bug
    Contenu sponsorisé


      La date/heure actuelle est Lun 19 Aoû 2019 - 4:01