Connexion rapide « flottante » (Templates+CSS)

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









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 !


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*/
}

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



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

Code:

{L_LOGIN}

supprimez-le et écrivez tout simplement ce que vous voulez.



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


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 !