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 « flottante » (Templates+CSS)

    Partagez
    avatar
    Nemesis
    FémininAge : 26Messages : 214

    le Mer 20 Mai 2015 - 23:42




    Connexion Rapide dans un bloc flottant

    Bonjour à tous les N'Utopiens et N'utopiennes =)
    Voici un petit tuto qui va vous aider à faire ce qui est indiqué dans le titre, inutile de le répéter je suppose, c'est assez clair =D

    PHBB2
    Vous devez être : Fondateur
    Difficulté : Facile
    Apercu : Ici



    Puisqu'il est question de CONNEXION, il est impératif que vous soyez DÉCONNECTÉS chaque fois que vous voulez voir le rendu Wink en ce qui me concerne, je visualisais à partir d'un autre navigateur pour éviter de me connecter/déconnecter à chaque fois !


    Pour éviter de retrouver la connexion rapide 2 fois sur le forum, vérifiez que l'option « connexion rapide » est décochée ! (Panneau d'admin -> affichage -> page d'accueil -> généralités -> affichage de la connexion rapide : ne pas afficher


    Étape 1 - Template

    Allez dans les templates -> général -> overall header.

    Allez vers la fin du template, juste avant ceci :
    Code:
    <!-- BEGIN html_validation -->

    Et collez ceci :
    Code:
    <!-- BEGIN switch_user_logged_out -->
    <div class="fastconnex">
      <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form">
        <tr>
            <td width="100%" valign="top" align="center" class="row1"> 
                <label><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="20" name="username" /></label><br />
                <label><span class="genmed">{L_PASSWORD}:</span>&nbsp;<input class="post" type="password" size="20" name="password" /></label><br /><br />
                <input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
            </td>
        </tr>
    </table>
    </form>
      </div>
    <!-- END switch_user_logged_out -->

    Enregistrez et n'oubliez pas de publier le template !

    Étape 2 - CSS

    Collez ceci dans votre feuille de styles (CSS)

    Code:
    .fastconnex {
    width:200px;/*largeur du bloc*/
    height:200px;/*hauteur du bloc*/
    background-color:#ABA9A6;/*couleur du fond*/
    position:absolute;/*le bloc ne bougera pas*/
    top:80px;/*on place le bloc a 100px du haut*/
    right:30px;/*on place le bloc a 30px de la droite*/
    border:5px solid #755b8e; /*bordure facultative*/
    box-shadow: 3px 0px 5px #3d2f4a; /*ombre facultative*/
    border-radius: 5px; /*Les bordures arrondies, facultatif*/
    color: #555555; /*Couleur du texte*/
    }

    Si vous souhaitez que le bloc suive la page au scroll, remplacez la donnée « absolute » par « fixed ».

    Vous pouvez placer le bloc où vous le souhaitez dans la page. Si vous voulez qu'il s'affiche à gauche, changez « right » par « left». De même, si vous souhaitez qu'elle soit plus au bas de la page, changez « top » par « bottom ».


    Vous avez jusqu'ici toutes les informations nécessaires au bon fonctionnement du bloc, mais voici quelques trucs supplémentaires.

    Modifier le texte


    Modifier « Nom d'utilisateur »
    Ciblez ceci dans le code template donné plus haut :
    Code:
    {L_USERNAME}
    supprimez-le et écrivez tout simplement ce que vous voulez.

    Modifier « Mot de passe »
    Ciblez ceci dans le code template donné plus haut :
    Code:
    {L_PASSWORD}
    supprimez-le et écrivez tout simplement ce que vous voulez.

    Modifier « Connexion »
    Vous commencez à saisir le principe Wink
    Code:
    {L_LOGIN}
    supprimez-le et écrivez tout simplement ce que vous voulez.

    Avoir une forme plus originale


    Forme en cercle
    Changez cette partie du CSS
    Code:
    border-radius: 5px;

    Et remplacez par ceci
    Code:
    border-radius: 100px;


    Modifier la forme avec une image

    Ceci s'adresse à ceux qui savent grapher ou qui ont un graphiste sous la main ! =D
    Pour plus de facilité, essayez d'établir d'avance la taille de votre bloc pour créer votre image au bon format.

    Vous devez créer la forme vous-même dans un logiciel comme photoshop !
    Dans le CSS, enlevez le « background-color » et changez-le pour ceci :

    Code:
    background-image:url("adressedevotreimage");
    background-repeat:no-repeat

    Exemple absolument magnifique (not)

    Voilà ! Il y a une tonne de possibilités de modifications alors amusez-vous avec le CSS ! =)
    J'espère que cela vous seras utile !

    ©tuto by nemesis AKA wave



    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Jeu 21 Mai 2015 - 19:09

    Haha, quelle frustration, je préparais justement un LS semblable ! x) Je le posterai quand même...
    En tout cas ton rendu est sympa et super mignon ! Very Happy



    Alumine
    avatar
    Nemesis
    FémininAge : 26Messages : 214

    le Jeu 21 Mai 2015 - 19:55

    Oh pardon, je t'ai pris de vitesse =3 huhu

    Merci beaucoup ! :kay4:
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Ven 22 Mai 2015 - 10:51

    Plus il y a de LS mieux je me porte :star: (J'passerai commenter plus tard ~)

    avatar
    Cruelly
    FémininAge : 24Messages : 2547

    le Mer 27 Mai 2015 - 5:20

    Je vais tenter sa ^^ Merci




    avatar
    FreeSpirit
    MasculinAge : 21Messages : 159

    le Lun 1 Juin 2015 - 13:27

    Merci Very Happy
    avatar
    Mercurion
    MasculinAge : 23Messages : 58

    le Sam 18 Juil 2015 - 17:34

    Merci
    avatar
    xToshi-Shûx
    FémininAge : 26Messages : 39

    le Mar 28 Juil 2015 - 14:08

    Merci :3



    avatar
    NanoiHime
    FémininAge : 19Messages : 559

    le Sam 15 Aoû 2015 - 14:15

    merci !



    En ligne
    avatar
    Kelalin
    FémininAge : 25Messages : 1708

    le Dim 16 Aoû 2015 - 22:56

    Merci beaucoup du partage ! (*^▽^*)
    avatar
    Heartfilia
    FémininAge : 17Messages : 98

    le Jeu 20 Aoû 2015 - 17:51

    Merci !



    YOU HELLA SAVED MY LIFE
    - chloe price
    avatar
    TiGraou
    MasculinAge : 24Messages : 231

    le Lun 7 Sep 2015 - 14:50

    Merci !
    En ligne
    avatar
    Kelalin
    FémininAge : 25Messages : 1708

    le Lun 7 Sep 2015 - 17:51

    Merci beaucoup pour le partage ! \(>o<)ノ
    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Sam 5 Mar 2016 - 10:46

    Hello! Désolée du retard de réponse! ^^

    Alors quelques petites remarques sur ton code! ^^ Tout d'abord, le placement du code dans le template, on ne peut pas le mettre à la FIN du template, étant donné que c'est la fin de la validation de la page, et donc après le HTML. Du coup, il vaudrait mieux donner des indications un peu plus précises.

    Ensuite, pour ton CSS, vu que le formulaire de connexion a sa propre apparence et que tu ne la modifies pas, malheureusement cela donne ceci:

    Pourrais-tu donner ne serais-ce que le squelette du CSS pour se débarrasser de ça ou pour les modifier?

    Merci d'avance!



    avatar
    Choubakawa
    MasculinAge : 24Messages : 78

    le Lun 6 Juin 2016 - 13:59

    Merci



    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Ven 14 Oct 2016 - 4:37

    Merci du partage !

    N'ayant pas de retour, j'ai fait les modifications. Du coup, je valide le code qui sera bientôt déplacé ^^



    avatar
    Illeanëlia
    FémininAge : 31Messages : 85

    le Mer 5 Juil 2017 - 23:43

    merci pour ce topic très sympas joli rendu ^^
    avatar
    rosebleudu10
    FémininAge : 27Messages : 188

    le Jeu 2 Nov 2017 - 10:57

    merci pour ce code
    Contenu sponsorisé


      La date/heure actuelle est Mer 22 Nov 2017 - 15:57