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).