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
Vous devez être : Fondateur
Difficulté : Facile
Apercu : Ici

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 !
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 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 « Nom d'utilisateur »
Ciblez ceci dans le code template donné plus haut :
- Code:
{L_USERNAME}
Modifier « Mot de passe »
Ciblez ceci dans le code template donné plus haut :
- Code:
{L_PASSWORD}
Modifier « Connexion »
Vous commencez à saisir le principe

- Code:
{L_LOGIN}
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
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 !
