AccueilDernières imagesRechercherS'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.

-15%
Le deal à ne pas rater :
(Adhérents) LEGO® Icons 10318 Le Concorde
169.99 € 199.99 €
Voir le deal

    Connexion rapide « flottante » (Templates+CSS)

    Nemesis
    Nemesis
    FémininAge : 32Messages : 218

    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 ^^
    Alumine
    Alumine
    FémininAge : 26Messages : 487

    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
    Nemesis
    Nemesis
    FémininAge : 32Messages : 218

    Jeu 21 Mai 2015 - 19:55

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

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

    Ven 22 Mai 2015 - 10:51

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

    Cruelly
    Cruelly
    FémininAge : 30Messages : 2605

    Mer 27 Mai 2015 - 5:20

    Je vais tenter sa ^^ Merci



    :heart: :heart:
    FreeSpirit
    FreeSpirit
    MasculinAge : 28Messages : 167

    Lun 1 Juin 2015 - 13:27

    Merci Very Happy
    Mercurion
    Mercurion
    MasculinAge : 29Messages : 58

    Sam 18 Juil 2015 - 17:34

    Merci
    xToshi-Shûx
    xToshi-Shûx
    Autre / Ne pas divulguerAge : 32Messages : 39

    Mar 28 Juil 2015 - 14:08

    Merci :3



    NanoiHime
    NanoiHime
    FémininAge : 25Messages : 566

    Sam 15 Aoû 2015 - 14:15

    merci !



    Anonymous
    Invité

    Dim 16 Aoû 2015 - 22:56

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

    Jeu 20 Aoû 2015 - 17:51

    Merci !



    YOU HELLA SAVED MY LIFE
    - chloe price
    TiGraou
    TiGraou
    MasculinAge : 30Messages : 243

    Lun 7 Sep 2015 - 14:50

    Merci !
    Anonymous
    Invité

    Lun 7 Sep 2015 - 17:51

    Merci beaucoup pour le partage ! \(>o<)ノ
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    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:
    Connexion rapide « flottante » (Templates+CSS) 1457171060-soucis
    Pourrais-tu donner ne serais-ce que le squelette du CSS pour se débarrasser de ça ou pour les modifier?

    Merci d'avance!



    Choubakawa
    Choubakawa
    MasculinAge : 30Messages : 87

    Lun 6 Juin 2016 - 13:59

    Merci



    Connexion rapide « flottante » (Templates+CSS) Witche13
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    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é ^^



    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Mer 5 Juil 2017 - 23:43

    merci pour ce topic très sympas joli rendu ^^
    rosebleudu10
    rosebleudu10
    FémininAge : 34Messages : 189

    Jeu 2 Nov 2017 - 10:57

    merci pour ce code
    Kaimie
    Kaimie
    FémininAge : 25Messages : 68

    Jeu 4 Jan 2018 - 22:43

    Merci.
    .Lucifer.
    .Lucifer.
    MasculinAge : 50Messages : 184

    Lun 26 Fév 2018 - 20:57

    Merci beaucoup pour ce code !



    Connexion rapide « flottante » (Templates+CSS) 978358Divine
    Nobuko
    Nobuko
    MasculinAge : 30Messages : 48

    Mar 12 Juin 2018 - 1:07

    Merci.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 23:28