DotJos

Par défaut, PluXML nous propose un formulaire de commentaire sur une colonne tout en hauteur. Nous allons utiliser le css et le html pour mettre en forme ce nouveau style de formulaire. Voici un exemple :


Dans un premier temps, ouvrez le fichier commentaire.php de votre thème et repérez votre formulaire qui se situe entre les balises <form> et </form>. Effacez ce formulaire et remplacez-le par ce code :

<form action="<?php $plxShow->artUrl(); ?>#form" method="post">
                <fieldset>
                <div id="com-left">
                    <label for="id_name"><?php $plxShow->lang('NAME') ?>&nbsp;:</label>
                    <input id="id_name" name="name" type="text" size="20" value="<?php $plxShow->comGet('name',''); ?>" maxlength="30" />
                    <label for="id_site"><?php $plxShow->lang('WEBSITE') ?>&nbsp;:</label>
                    <input id="id_site" name="site" type="text" size="20" value="<?php $plxShow->comGet('site',''); ?>" />
                    <label for="id_mail"><?php $plxShow->lang('EMAIL') ?>&nbsp;:</label>
                    <input id="id_mail" name="mail" type="text" size="20" value="<?php $plxShow->comGet('mail',''); ?>" />
                </div>
                <div id="com-right">
                    <label for="id_content" class="lab_com"><?php $plxShow->lang('COMMENT') ?>&nbsp;:</label>
                    <textarea id="id_content" name="content" cols="35" rows="6"><?php $plxShow->comGet('content',''); ?></textarea>
                </div>
                <div id="com-bottom">
                    <?php if($plxShow->plxMotor->aConf['capcha']): ?>
                    <label for="id_rep"><strong><?php echo $plxShow->lang('ANTISPAM_WARNING') ?></strong>&nbsp;:</label>
                    <p><?php $plxShow->capchaQ(); ?>&nbsp;:&nbsp;<input id="id_rep" name="rep" type="text" size="10" /></p>
                    <input name="rep2" type="hidden" value="<?php $plxShow->capchaR(); ?>" />
                    <?php endif; ?>

                    <input type="submit" class="combutton" value="<?php $plxShow->lang('SEND') ?>"/><span class="com-alert"><?php $plxShow->comMessage(); ?></span>
                </div>
                </fieldset>
            </form>

Vous remarquerez que j'ai placé les champs Nom, Site, et Email dans une <div>, et la zone de saisie du commentaire dans une autre <div>. Pour finir, j'ai placé le captcha dans une troisième <div>. Pour mieux comprendre les raisons, je vous propose dans un premier temps d'ouvrir le fichier css de votre thème (par défaut style.css), et de coller ces lignes (par exemple vers la balise form).

#com-left {
    float:left;
    width:200px;
    }
#com-right {
    float:right;
    width:350px;
    }
#com-bottom {
    clear:both;
    padding-top:15px;
    }

La balise #com-left représente la <div> qui englobe les champs Nom, Site, et Email : j'ai l'ai placé à gauche (float:left), et je lui ai appliqué une largeur (width:200px). Pour la balise #com-right, c'est le même principe sauf que je l'ai placé à droite. La balise #com-bottom englobe le captcha : je l'ai ai affecté une propriété clear:both pour la placer automatiquement en dessous des deux autres <div>. Enregistrez vos modifications et regardez le résultat.

Selon votre thème, il vous faudra peut-être personnaliser cet affichage en changeant les valeurs width (pour la largeur), ou le padding-top (pour l'espace du haut entre le captcha entre le formulaire).

Les thèmes par défaut que propose PluXML, ainsi que mes templates, proposent une organisation en deux colonnes : la partie article se situe à gauche, et la sidebar contenant les derniers articles, les tags, les catégories, ... se situe à droite. Il est possible de changer très facilement l'ordre de ces colonnes.


Nous allons utiliser le css pour inverser ces colonnes. Dans un premier temps, rendez-vous dans le dossier de votre thème, et ouvrez votre fichier css (par défaut style.css). Dans votre feuille de style repérez ces deux balises :

• #article (pour la colonne article)
  
• #aside (pour la sidebar)
  

Vous remarquerez que ces deux balises ont toutes deux une propriété identique nommé float. Pour faire simple, cette propriété permet de choisir un positionnement (par exemple gauche et droite dans notre cas). Si votre balise #article à une propriété float:left, passez là en float:right (ou inversement), et faîtes de même pour la balise aside.

L'ordre de vos colonnes est maintenant inversé. Il est possible que dans certains thèmes, des margin et des padding soient appliqués aux colonnes, provoquant des problèmes d'alignement verticaux : pour cela, il vous suffit de modifier leurs valeurs dans votre css.

Nom du Template : GreyTime
Description : un template aux tons gris
Version : 1.0
Compatibilité : PluXML 5.1.5
Langages : XHTML Strict - CSS
Licence : Libre (hors usage commercial)

Téléchargez ce template