AccueilRechercherS'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 : 5120

    le Dim 6 Mar 2016 - 12:29



    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 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 ♥︎
    NyoTheNeko
    NyoTheNeko
    FémininAge : 25Messages : 5018

    le Dim 6 Mar 2016 - 12:50

    Moi j'appelle pas ça du vert mais du jaune hein! :cow:
    Merci encore Nihil, tout est bon, je classe! ^^



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5120

    le Dim 6 Mar 2016 - 12:54

    Pour ceux qui voient ce message, si vous dites merci, rajoutez +1 à la couleur que vous voyez o/
    VERT : 1
    JAUNE : 1

    (même si personne ne va lire jusque là :face: )
    Mais sinon, c'est un vert/jaunasse étrange :faint:



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Kelalin
    Kelalin
    FémininAge : 27Messages : 2088

    le Dim 6 Mar 2016 - 16:03

    Merci pour le partage !
    Lyana Taylor
    Lyana Taylor
    FémininAge : 23Messages : 71

    le Mar 8 Mar 2016 - 18:31

    Merci pour le code !



    Bloc de connexion rapide verte avec une image 1458744564-signa
    P-Summers
    P-Summers
    FémininAge : 20Messages : 54

    le Jeu 10 Mar 2016 - 20:29

    Merci ♥
    Unleash
    Unleash
    MasculinAge : 19Messages : 85

    le Ven 11 Mar 2016 - 21:14

    merci
    Kirito
    Kirito
    MasculinAge : 23Messages : 200

    le Dim 13 Mar 2016 - 18:13

    Merci
    Clémentine
    Clémentine
    FémininAge : 27Messages : 223

    le Mer 16 Mar 2016 - 15:44

    Merci *_*



    Bloc de connexion rapide verte avec une image 9w9t
    Patdrue
    Patdrue
    FémininAge : 29Messages : 157

    le Mer 16 Mar 2016 - 17:30

    Merci beaucoup! J'aime ^^

    PS: par contre oui, je vois jaune moi aussi hahaha
    Saphire
    Saphire
    FémininAge : 22Messages : 146

    le Sam 26 Mar 2016 - 16:23

    merci
    KTMiz
    KTMiz
    MasculinAge : 20Messages : 47

    le Sam 26 Mar 2016 - 23:25

    merci



    Bloc de connexion rapide verte avec une image Kjod95_sick_religion
    Katia Akane
    Katia Akane
    FémininAge : 29Messages : 37

    le Lun 28 Mar 2016 - 18:51

    C'est juste magnifique ! Merci beaucoup =D
    Celuna
    Celuna
    FémininAge : 29Messages : 133

    le Mar 29 Mar 2016 - 10:46

    Bonjour,

    Merci pour ce superbe partage. C'est très beau !!!!

    Youp
    Youp
    FémininAge : 24Messages : 579

    le Mar 29 Mar 2016 - 11:29

    Je voulais juste participer au débat mwahahaha

    VERT : 1
    JAUNE : 2



    Bloc de connexion rapide verte avec une image 262632clip20160315at092522
    Fiery Aura
    Fiery Aura
    FémininAge : 20Messages : 57

    le Jeu 31 Mar 2016 - 16:39

    OH merci, j'aime bien les images Very Happy
    So-chan
    So-chan
    FémininAge : 29Messages : 61

    le Ven 1 Avr 2016 - 11:11

    Bonjour !

    J'aime beaucoup le concept. Merci pour ce partage !
    NaLu
    NaLu
    FémininAge : 24Messages : 140

    le Ven 1 Avr 2016 - 15:35

    Merci pour ce partage *-*



    Bloc de connexion rapide verte avec une image 683430Sanstitre7
    Yogi Nakagawa
    Yogi Nakagawa
    MasculinAge : 19Messages : 93

    le Sam 2 Avr 2016 - 6:30

    Merci !
    Kazumi
    Kazumi
    FémininAge : 19Messages : 45

    le Dim 3 Avr 2016 - 18:51

    Merci ! ≥w≤/
    Fantôma
    Fantôma
    MasculinAge : 17Messages : 67

    le Mar 5 Avr 2016 - 15:47

    merci!



    Bloc de connexion rapide verte avec une image 1438369110-fantoma
    Romain44150
    Romain44150
    MasculinAge : 18Messages : 6

    le Mar 5 Avr 2016 - 20:22

    merci !
    Ykhar
    Ykhar
    FémininAge : 22Messages : 23

    le Mar 5 Avr 2016 - 23:16

    Merci ♥
    Err0r
    Err0r
    FémininAge : 26Messages : 134

    le Mer 6 Avr 2016 - 13:42

    je pique !



    Bloc de connexion rapide verte avec une image 150519095409324327
    Maestro
    Maestro
    MasculinAge : 26Messages : 14

    le Jeu 7 Avr 2016 - 15:05

    Merci! Wink
    Contenu sponsorisé


      La date/heure actuelle est Ven 6 Déc 2019 - 9:32