DotJos

Un formulaire de commentaire sur deux colonnes

Jos — Thu, 02 Feb 2012 08:13:00 +0100

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

Inverser l'ordre des colonnes d'un thème PluXML

Jos — Tue, 31 Jan 2012 21:09:00 +0100

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.

Voici un exemple avec le thème par défaut :

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.

Template GreyTime

Jos — Mon, 23 Jan 2012 09:49:00 +0100

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

Template DarkGreen

Jos — Sat, 14 Jan 2012 17:45:00 +0100

Nom du Template : DarkGreen
Description : un template sombre, légèrement vert
Version : 1.0
Compatibilité : PluXML 5.1.5
Langages : XHTML Strict - CSS
Licence : Libre (hors usage commercial)

Téléchargez ce template

Installer un nouveau thème sur PluXML

Jos — Fri, 13 Jan 2012 17:31:00 +0100

Par défaut, PluXML est livré avec un thème par défaut que vous pouvez modifier à votre guise. Vous pouvez également télécharger et installer de nouveaux thèmes en vous rendant sur le site officiel de PluXML , dans ma rubrique Templates , ou vers diverses autres sources.

Après avoir téléchargé un thème, vous vous retrouvez avec un fichier compressé (.zip, .rar, ...). Décompressez le dossier contenu dans votre archive, et collez-le dans le dossier "themes" de PluXML

otre thème est maintenant installé, il ne vous reste plus qu'à l'activer. Connectez-vous à votre administration, cliquez sur Paramètres, puis sur Options d'affichage. Sur la ligne nommé Choix du thème, utilisez le menu déroulant pour sélectionner votre nouveau template, et validez votre choix en cliquez sur Modifier les options d'affichage (situé en bas de la page).

Template BlueSteel

Jos — Fri, 09 Dec 2011 12:38:00 +0100

Nom du Template : BlueSteel
Description : un template style acier, aux couleurs bleu, gris, et blanc
Version : 1.0
Compatibilité : PluXML 5.1.5
Langages : XHTML Strict - CSS
Licence : Libre (hors usage commercial)

Téléchargez ce template

Template BlueGradient

Jos — Tue, 29 Nov 2011 16:50:00 +0100

Nom du template : BlueGradient
Description : un template aux couleurs froides avec un bleu dégradé
Version : 1.0
Compatibilité : PluXml 5.1.5
Langages : XHTML Strict - CSS
Licence : libre (hors usage commercial)

Télécharger ce template

Template RedDarkness

Jos — Mon, 21 Nov 2011 11:42:00 +0100

Nom du template : RedDarkness
Description : un template sombre aux couleurs chaudes
Version : 1.0
Compatibilité : PluXml 5.1.5
Langages : XHTML Strict - CSS
Licence : libre (hors usage commercial)

Télécharger ce template

Template SimpleExpression

Jos — Sun, 20 Nov 2011 15:12:00 +0100

Nom du template : SimpleExpression
Description : un template simple, destiné à tous les usages
Version : 1.0
Compatibilité : PluXml 5.1.5
Langages : XHTML Strict - CSS
Licence : libre (hors usage commercial)

Télécharger ce template