|
Class : ID Admin
Posts : 1113
Registered on : 12/11/2007
Age : 26
Sex : Female
Offline Mail Www
|
Formulaire de connexion dans le header
Si vous voulez afficher le formulaire de connexion rapide dans l'entête du forum plutôt que sur la barre de navigation, voici les modifications à faire dans les templates de votre forum CB.
Important : Il est fortement recommandé de travailler sur une copie du template Official, plutôt que sur le template lui-même. La méthode a été testée sur un Connectix Boards 0.8.4 avec une copie du template Official.
Notez aussi qu'il est recommandé d'avoir des bases en XHTML, CSS et PHP pour mener à bien la modification.
Fichiers à modifier
templates/votre-template/gen_main.php
templates/votre-template/gen_contents.php
Déplacer le formulaire
Ouvrez vos deux fichiers avec votre éditeur de texte (je recommande Notepad++ si vous êtes sous Win).
Allez d'abord dans gen_contents.php et cherchez ce bout de code :
<h1 id="header">
<a href="<?php echo manage_url('index.php', 'forum.html'); ?>" id="headerlink"><span><?php echo $g_forumname; ?></span></a>
</h1>
Pour pouvoir placer notre formulaire de connexion à droite, il faudra modifier la structure afin que la mise en forme en CSS reste aisée.
Pour cela, on va transformer <h1 id="header"> en un div portant le même id. Ceci évitera les problèmes de validité par la suite, puisque ce bloc devra contenir à la fois le nom du site et le formulaire de connexion (qui sera flottant).
Nous avons donc maintenant ceci :
<div id="header">
<a href="<?php echo manage_url('index.php', 'forum.html'); ?>" id="headerlink"><span><?php echo $g_forumname; ?></span></a>
</div>
On n'a plus de balise <h1>, mais on peut en recréer une, avec un id différent. Appelons le "sitename", ce qui va donner ceci :
<div id="header">
<h1 id="sitename"><a href="<?php echo manage_url('index.php', 'forum.html'); ?>" id="headerlink"><span><?php echo $g_forumname; ?></span></a></h1>
</div>
À partir de là, il sera aisé de placer notre formulaire de connexion, puisque celui-ci sera indépendant du nom du site.
Étant donné que la règle essentielle pour les éléments flottants, c'est de les placer avant les éléments non-flottants, on va donc placer notre formulaire de connexion avant le nom du site.
À partir du formulaire pompé sur la barre de navigation, voici le formulaire modifié :
<?php if ( !$g_islogged ): ?><form id="fast_connect_form" action="" method="post">
<p>
<label for="fcf_login"><?php echo lang('username'); ?> :</label> <input type="text" name="fast_login" id="fcf_login" size="16" value="<?php echo lang('username'); ?>" onfocus="javascript:fc_username();" /><br />
<label for="fcf_password"><?php echo lang('password'); ?> :</label> <input type="password" name="fast_password" id="fcf_password" size="16" value="password" onfocus="javascript:fc_password();" /><br />
<label for="fcf_remember"><?php echo lang('remember'); ?> :</label> <input type="checkbox" name="fast_remember" id="fcf_remember" title="<?php echo lang('remember'); ?>" checked="checked" />
<input type="submit" name="fast_connect" id="fcf_connect" value="<?php echo lang('login_confirm'); ?>" />
</p>
</form>
<?php endif: ?>
Comme vous voyez, ce formulaire n'apparaîtra que chez les non-connectés. J'ai aussi ajouté des labels avec des variables linguistiques, ceux-ci fonctionnent parfaitement, puisqu'ils sont situés dans le fichier lang/fr/general.lang qui est utilisé pour toutes les pages.
Maintenant, plaçons-le !
<div id="header">
<?php if ( !$g_islogged ): ?><form id="fast_connect_form" action="" method="post">
<p>
<label for="fcf_login"><?php echo lang('username'); ?> :</label> <input type="text" name="fast_login" id="fcf_login" size="16" value="<?php echo lang('username'); ?>" onfocus="javascript:fc_username();" /><br />
<label for="fcf_password"><?php echo lang('password'); ?> :</label> <input type="password" name="fast_password" id="fcf_password" size="16" value="password" onfocus="javascript:fc_password();" /><br />
<label for="fcf_remember"><?php echo lang('remember'); ?> :</label> <input type="checkbox" name="fast_remember" id="fcf_remember" title="<?php echo lang('remember'); ?>" checked="checked" />
<input type="submit" name="fast_connect" id="fcf_connect" value="<?php echo lang('login_confirm'); ?>" />
</p>
</form>
<?php endif: ?>
<h1 id="sitename"><a href="<?php echo manage_url('index.php', 'forum.html'); ?>" id="headerlink"><span><?php echo $g_forumname; ?></span></a></h1>
</div>
Maintenant, tout ce qui reste, c'est de supprimer le formulaire se trouvant dans la barre de navigation, pour ne pas avoir de doublon. Pour cela, allez dans votre fichier gen_contents.php, puis supprimez ces trois morceaux :
Ligne 5
<?php if ( !$g_islogged ): ?><form id="fast_connect_form" action="" method="post"><?php endif; ?>
Ligne 26
<li id="fast_connect">
<input type="text" name="fast_login" id="fcf_login" size="18" value="<?php echo lang('username'); ?>" onfocus="javascript:fc_username();" />
<input type="password" name="fast_password" id="fcf_password" size="18" value="password" onfocus="javascript:fc_password();" />
<input type="checkbox" name="fast_remember" id="fcf_remember" title="<?php echo lang('remember'); ?>" checked="checked" />
<input type="submit" name="fast_connect" id="fcf_connect" value="<?php echo lang('login_confirm'); ?>" />
</li>
Ligne 35
<?php if ( !$g_islogged ): ?></form><?php endif; ?>
Enregistrez les modifications dans vos deux fichiers.
Ensuite, je vous donne le CSS de base pour le skin associé à votre template personnalisé, afin d'avoir un affichage correct :
fast_connect_form {
padding:0px;
margin:0px;
width: 220px;
float:right;
margin-top: 5px;
}
#fast_connect_form p {
line-height: 22px;
white-space:nowrap;
}
#fast_connect_form label {
float:left;
width: 110px;
display:block;
text-align:right;
}
#fast_connect_form input {
border:1px solid rgb(117,149,200);
font-size: 0.8em;
}
en remplacement de ceci (si c'est un skin basé sur Zephyr) :
#fast_connect_form {
padding:0px;
margin:0px;
}
#headmenu #fast_connect {
float:right;
border-right:none;
border-left:1px solid rgb(117,149,200);
}
#headmenu #fast_connect input {
border:1px solid rgb(117,149,200);
}
Maintenant, vous avez un beau formulaire de connexion rapide sur le côté du nom du site et il ne vous reste plus qu'à en personnaliser le CSS !
----------------------------------
Pour tout commentaire, suggestion, correction, postez à la suite de ce message.
|