pollsFactory : Personnaliser l'affichage
Par JcDenis le lundi 29 mars 2010, 04:24 - Help - Lien permanent
Cette partie de la documentation de l'extension pollsFactory pour Dotclear 2 apporte des explications sur l'affichage des sondages sur votre blog et de leurs personnalisations.
Par défaut l'affichage des sondages sur la partie publique suit les règles CSS des balises HTML du thème, mais des classes de styles additionnelles sont présentes pour modifier facilement leurs présentations.
Les sondages qu'ils soient dans un widget ou en fin de billet ont la même structure. Cette structure diffère suivant l'état du sondage: si c'est le formulaire, les résultats ou le message d'attente de fin de sondage.
Le Formulaire
La structure du formulaire (questionnaire) est commune aux widgets et aux fins de billets.
<div class="pollsfactory poll-form">
<h3 class="poll-title">Titre du sondage</h3>
<p class="poll-desc">Description du sondage</p>
<form
id="pollxxx" method="post" action="xxx/vote">
<div class="poll-query">
<h4>titre d'une question</h4>
<div class="poll-query-desc">description de la question</div>
<p class="field"><label for="xxx"><input class="poll-checkbox" type="checkbox" />un
choix</label></p>
</div>
<div class="poll-query">
...
<p class="field"><label for="xxx"><input class="poll-radio" type="radio" /> un
choix</label></p>
</div>
<div class="poll-query">
...
<p class="field"><select class="poll-combo"><option>une
option</option></select></p>
</div>
<div class="poll-query">
...
<p class="field"><label for="xxx"><input class="poll-field" type="text"
value=""/></label></p>
</div>
<div class="poll-query">
...
<p class="field"><textarea class="poll-textarea"></textarea></p>
</div>
<div class="poll-submit">
<p>
<input type="hidden" name="poll" value="xxx" />
<input
type="hidden" name="redir" value="xxx" />
<input
type="submit" name="submit" value="xxx" />
</p>
</div>
</form>
</div>
Les résultats
Les résultats d'un sondage sont affichés soit à la fin de la période d'un sondage, soit si l'utilisateur à déjà participé à un sondage et que l'option d'affichage des résultats (cf onglet "options") est sur "quand l'utilisateur a voté". La structure des résultats est commune aux widgets et aux fins de billets.
<div class="pollsfactory poll-result">
<h3 class="poll-title">Titre du sondage</h3>
<p class="poll-desc">description du sondage</p>
<p class="poll-inf">Divers
textes d'informations sur le sondage et le sondé.</p>
<h4>titre
q'une question de type numérique</h4>
<dl>
<dt>titre de la réponse</dt><dd>pourcentage - nombre de réponse</dd>
<dt>titre de la réponse</dt><dd>pourcentage
- nombre de réponse</dd>
</dl>
<h4>titre
d'une question de type texte</h4>
<p>
<em>texte d'introduction</em><br >
<blockquote>réponse textuelle</blockquote>
<blockquote>réponse textuelle</blockquote>
</p>
<p
class="poll-chart"><img src="xxx" alt="xxx" /></p>
</div>
La classe "poll-chart" est utilisée lors de l'affichage des résultats sous forme graphique. La question et les résultats sont alors tous contenus dans l'image.
Le message d'attente
Le message d'attente est affiché lorsqu'un utilisateur a déjà participé à un sondage et que l'option d'affichage des résultats (cf onglet "options") est sur "quand le sondage est terminé".
<div class="pollsfactory poll-wait">
<h3>Titre du sondage</h3>
<p class="poll-desc">Descrition du sondage</p>
<p class="poll-info">divers
textes d'informations sur le sondage et le sondé.</p>
</div>
Les wigdets
Trois widgets sont disponibles avec l'extension, leurs structures sont les suivantes :
Liste des sondages
Structure :
<div class="pollsfactory poll-widget-query">
<h2>titre
du widget</h2>
<ul>
<li><a href="lien
vers le billet">titre du billet</li>
<li><a href="lien vers le billet">titre du
billet</li>
...
</ul>
</div>
Sondage sélectionné
La structure est la même que pour un sondage en fin de billet. Pour la différencier, il faut partir de l'identifiant #sidebar, #bloxextra ou #blognav (dépend du thème)
Sondage d'un billet
La structure est la même que pour un sondage en fin de billet. Pour
la différencier, il faut partir de l'identifiant #sidebar, #bloxextra ou
#blognav (dépend du thème)
Et pour la différencier d'un "sondage
sélectionné", il faut partir de l'identifiant #dc-post.
Page d'un sondage
La page d'un sondage reprend la structure de la page d'un billet, la balise "body" prend la classe "dc-post dc-pollsFactory". Le fichier de templates joint reprend l'agencement du thème par défaut de Dotclear.
Pour plus d'information le fichier de template est disponible dans le repertoire pollsFactory/default-templates/pollsfactory.html .
Évaluer ce billet
- Note : 0
- Votes : 0
