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.


    Connexion rapide noire et rouge

    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5106

    le Sam 5 Mar 2016 - 18:28



    Bloc de connexion rapide



    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 noir
    Connexion rapide noire et rouge Sa1qZNR

    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 NEVER UTOPIA -->

    <!-- Ajout de la police -->
    <link href='https://fonts.googleapis.com/css?family=Arapey' rel='stylesheet' type='text/css' />

    <div class="connexion-bloc">
        <form class="connexion-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">
            <div><input type="text" name="username" placeholder="Nom d'utilisateur"/></div>
            <div><input type="password" name="password" placeholder="Mot de passe"/></div>
            <div>
    <input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
    <label for="autologin">Connexion automatique</label>
            </div>
            <input type="submit" name="login" value="Connexion" />
        </form><!-- fermeture du bloc du formulaire -->
        <a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a>
    </div>
    <!-- DEBUT LS CONNEXION RAPIDE 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
     * NEVER UTOPIA
     */

    /* Bloc qui entoure tout */
    .connexion-bloc {
        margin: 20px auto;
        padding: 20px 0;

        background: #040004;

        font-family: 'Arapey', serif;
        color: #ffffff;
        text-align: center;

        font-size: 15px;
    }

    /* Formulaire */
    .connexion-form {
        width: 50%;
        min-width: 190px;

        margin: auto;
        margin-bottom: 30px;

        padding: 20px;
        padding-top: 30px;

        position: relative;
        border: 2px solid #FA023C;
    }

    /* Les champs */
    .connexion-form input {
        padding: 10px 20px;
        margin-bottom: 15px;

        background: #ffffff;
        border: none;

        font-family: inherit;
        font-size: 15px;

        outline: none;
    }

    .connexion-form label {
        cursor: pointer;
    }

    /* Bouton de connexion */
    .connexion-form input[type="submit"] {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);

        background: #FA023C;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 0.25em;
        font-size: 16px;

        padding: 10px 18px;
        margin: 0;

        cursor: pointer;
        transition: all 1000ms;
    }

    /* Bouton de connexion au survol */
    .connexion-form input[type="submit"]:hover {
        color: #FA023C;
        background: #262323;
    }

    /* Liens (Mot de passe oublié) */
    .connexion-bloc a {
        text-decoration: none!important;
        color: #766e6e;
        text-decoration: none;
        transition: all 300ms ease-out;
    }

    /* Liens au survol (Mot de passe oublié) */
    .connexion-bloc a:hover {
        color: #FA023C;
    }
    /*
     * Fin libre service Connexion rapide
     * Never Utopia
     */

    En cas de problème, merci de vous rendre dans la section "[url=/f177-probleme-avec-mon-code]Problème avec mon code[/url]" ou "[url=/f75-personnalisations]Personnalisation[/url]"  :hudada:


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


    Dernière édition par Nihil Scar Winspeare le Sam 5 Mar 2016 - 21:04, édité 2 fois



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

    le Sam 5 Mar 2016 - 18:44

    Merci pour le partage !
    NyoTheNeko
    NyoTheNeko
    FémininAge : 25Messages : 5018

    le Dim 6 Mar 2016 - 12:09

    Merci beaucoup Nihil, tout est parfait, je classe! ^w^



    kingor
    kingor
    MasculinAge : 17Messages : 20

    le Mer 16 Mar 2016 - 19:48

    Merci !
    avatar
    Nal Souclade
    MasculinAge : 20Messages : 163

    le Sam 19 Mar 2016 - 12:41

    C'est magnifique ! Merci !
    Rynkka
    Rynkka
    FémininAge : 20Messages : 119

    le Dim 1 Mai 2016 - 12:28

    Merci ! ♥



    Connexion rapide noire et rouge 48861711
    -Resis
    -Resis
    MasculinAge : 23Messages : 25

    le Jeu 12 Mai 2016 - 18:12

    magnifique :bisou:
    NekoMiaouw
    NekoMiaouw
    FémininAge : 22Messages : 136

    le Lun 16 Mai 2016 - 12:58

    c'est super merci !



    Connexion rapide noire et rouge 388245alisign
    Kyandi
    Kyandi
    FémininAge : 20Messages : 157

    le Lun 16 Mai 2016 - 15:05

    Merci :)



    Connexion rapide noire et rouge 1401912845-sans-titre-8


    Domichi
    Domichi
    FémininAge : 26Messages : 30

    le Mar 17 Mai 2016 - 21:07

    Merci !
    Antithée
    Antithée
    FémininAge : 22Messages : 69

    le Mar 24 Mai 2016 - 21:51

    Très sympa, merci !
    Kynoha
    Kynoha
    MasculinAge : 22Messages : 35

    le Sam 28 Mai 2016 - 19:23

    Merci !
    Choubakawa
    Choubakawa
    MasculinAge : 25Messages : 87

    le Lun 6 Juin 2016 - 13:56

    Merci



    Connexion rapide noire et rouge Witche13
    Oror
    Oror
    FémininAge : 29Messages : 95

    le Sam 25 Juin 2016 - 11:47

    Merci du partage !! ^^



    Connexion rapide noire et rouge 351490minion
    Kâ Lys
    Kâ Lys
    MasculinAge : 27Messages : 299

    le Sam 16 Juil 2016 - 22:16

    Merci!



    Connexion rapide noire et rouge Bug
    Amaziel
    Amaziel
    MasculinAge : 28Messages : 32

    le Jeu 28 Juil 2016 - 22:52

    Très utile et surtout esthétique. Bravo
    avatar
    Divas/Marion
    FémininAge : 19Messages : 44

    le Ven 29 Juil 2016 - 19:23

    Merci :)
    naah
    naah
    MasculinAge : 25Messages : 80

    le Jeu 4 Aoû 2016 - 13:30

    J'apprécie ! Merci du partage!
    So-chan
    So-chan
    FémininAge : 29Messages : 61

    le Ven 5 Aoû 2016 - 14:07

    Merci pour le partage !
    Aubenaissante
    Aubenaissante
    MasculinAge : 33Messages : 15

    le Lun 8 Aoû 2016 - 0:34

    up ! merci pour le partage
    petit lu
    petit lu
    FémininAge : 27Messages : 184

    le Jeu 11 Aoû 2016 - 21:02

    Merci du partage ♥
    LeMonarque
    LeMonarque
    MasculinAge : 33Messages : 26

    le Sam 13 Aoû 2016 - 12:20

    Merci
    Valou712
    Valou712
    FémininAge : 36Messages : 23

    le Lun 22 Aoû 2016 - 17:09

    Merci pour ce sympathique tuto !!
    smily
    smily
    FémininAge : 20Messages : 66

    le Dim 20 Nov 2016 - 14:05

    Merci !
    Philo
    Philo
    FémininAge : 21Messages : 64

    le Mar 22 Nov 2016 - 21:35

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 20:31