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.


1 résultat trouvé pour auteur_Nemesis

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


Revenir en haut

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