Labs - Structure section commentaires article

 

 



 

LAB mis à jour à la suite des modifications de KL au 29 juin 2011.

 

Structure HTML - Commentaires Article

Cette structure est divisée en 2 grands blocs, une table et un formulaire.
Le tableau se présente sur 2 colonnes, les cellules (td) contiennent du style direct pour la disposition. Ce code est prévu dans le système, vous n'avez pas à vous en occuper. Plus loin dans cet article vous pourrez voir un exemple de style que vous pouvez rajouter, pour une présentation du tableau en harmonie avec le designe du blog.

 

Code HTML de la section commentaires;


<div id="article_commentaires" class="contenu_commentaires">
<a name="commentaire"></a>
<h3>Commentaires</h3><br />
<table>
<tr><td style="width:120px;border-bottom:1px dotted;border-right:1px dotted;padding:5px;text-align:center"></td><td style="vertical-align:top;border-bottom:1px dotted;width:80%;padding:5px"></td></tr>
<tr><td style="width:120px;border-bottom:1px dotted;border-right:1px dotted;padding:5px;text-align:center"></td><td style="vertical-align:top;border-bottom:1px dotted;width:80%;padding:5px"></td></tr>
<tr><td style="width:120px;border-bottom:1px dotted;border-right:1px dotted;padding:5px;text-align:center"></td><td style="vertical-align:top;border-bottom:1px dotted;width:80%;padding:5px"></td></tr>
<tr><td style="width:120px;border-bottom:1px dotted;border-right:1px dotted;padding:5px;text-align:center"></td><td style="vertical-align:top;border-bottom:1px dotted;width:80%;padding:5px"></td></tr>
<tr><td style="width:120px;border-bottom:1px dotted;border-right:1px dotted;padding:5px;text-align:center"></td><td style="vertical-align:top;border-bottom:1px dotted;width:80%;padding:5px"></td></tr>
<tr><td style="width:120px;border-bottom:1px dotted;border-right:1px dotted;padding:5px;text-align:center"></td><td style="vertical-align:top;border-bottom:1px dotted;width:80%;padding:5px"></td></tr>
</table>

<div id="articles_commentaires_titre">Poster un commentaire</div>

<form id="articles_commentaires_form" action="" method="post" class="form_v2">

<div class="form_moitie">
<label id="articles_commentaires_pseudo_label" for="articles_commentaires_pseudo_input">Nom:</label>
<input type="text" name="pseudo" id="articles_commentaires_pseudo_input" value="" title="Votre nom ou pseudonyme"/>
<label id="articles_commentaires_email_label" for="articles_commentaires_email_input">E-mail:
<span id="articles_commentaires_email_phrase" class="libelle">(facultatif)</span></label>
<input type="text" name="email" id="articles_commentaires_email_input" value="" title="Votre adresse e-mail ( facultatif ) : "/>
<label id="articles_commentaires_site_label" for="articles_commentaires_site_input">Blog/Site:
<span id="articles_commentaires_site_phrase" class="libelle">(facultatif)</span></label>
<input type="text" name="site" id="articles_commentaires_site_input" value=""/>
</div>

<div class="form_full">
<label id="articles_commentaires_message_label" for="articles_commentaires_message_textarea">Message :</label>
<textarea id="articles_commentaires_message_textarea" name="message" title="Votre message""></textarea>
</div>

<div class="form_full">
<label id="articles_commentaires_nbfourni_label" for="articles_commentaires_nbfourni_input">Antispam:</label>

<div class="captcha_box">
<div class="captcha_left">
<img src="antispam-gen-205392.html" class="captcha_image"/>
</div>
<div class="captcha_right">
<div class="centre">
<div class="captcha_phrase">
Merci de recopier le nombre de gauche dans la case ci-dessous <a href="antispam-info.html" target="popup2" onclick="window.open('','popup2','width=300,height=300,scrollbars=1')">(Pourquoi?)</a>
</div>
<input id="articles_commentaires_nbfourni_input" type="text" name="nbfourni" class="captcha_nbfourni" value="">
</div>
</div>
</div>
</div>

<div class="form_full">
<input id="articles_commentaires_submit" class="submit" type="submit" value="Envoyer" name="ajouter"/>
</div>
</form>

<div class="spacer"></div>

</div>

 

 

Exemple de style CSS pour la partie Commentaires

 

La section "Commentaires" se situe en dessous de l'article dans un bloc DIV, avec un identifiant et une CLASS.

<div id="article_commentaires" class="contenu_commentaires">  

 

div#article_commentaires
{
background:#FFFF00;
padding: 5px;
color:#009900;
border:3px ridge #FFCC00;
}

 

 

Exemple de style CSS pour gérer le tableau

Personnalisation de ce tableau avec très  peu de code, couleur de fond du tableau, bordure des cellules et style des liens. Vous pouvez voir le résultat en bas de cet article.

 

Code CSS du tableau :

/* couleur du fond du tableau */
.contenu_commentaires table
{
background:#FFFFCC;
}
/* bordure de chaque cellule */
.contenu_commentaires td
{
border:3px inset #FFCC00;
}
/* couleur du texte des liens */
#article_commentaires.contenu_commentaires a
{
color:#CC0000;
}
/* couleur du surlignement des liens au survol */
#article_commentaires.contenu_commentaires a:hover
{
background:#FFFFFF;
}

 

 

Etude du CSS pour gérer le formulaire

 

Le titre "Poster un commentaire" peut être modifié par une règle, voir exemple sur la capture ci-dessous.

 

CSS du titre formulaire

 

 

 Des zones regroupant plusieurs champs, peuvent être gérées.

 

 

Diverses zones du formulaire

 

 

  1. #articles_commentaires_titre
  2. .form_v2 label
  3. .form_moitie input
  4. #articles_commentaires_message_textarea
  5. #articles_commentaires_submit
  6. #captcha_box

 

 

Sur cette capture quelques identifiants des labels et champs de saisie.

 

ID des labels et input

 

 

 

Exemple de feuille de style pour les commentaires 

 

Pour voir quelques possibilités, sur la partie commentaires de cet article, j'ai appliqué la feuille de style suivante :

 

/* ========================================= */
/* Style pour les commentaires */
/* PapyClic Juillet 2011 */
/* ----------------------------------------- */

/* toute la section commentaires */
div#article_commentaires
{
background:#FFFFCC;
padding: 5px 2px;
color:#009900;
border:3px ridge #FFCC00;
}

/* tableau en général */
.contenu_commentaires table
{
background:#FFFFCC;
width: 95%;
margin-left: auto;
margin-right: auto;
}

/* cellules du tableau */
.contenu_commentaires td
{
border:3px inset #FFCC00;
}

/* cellules deuxième colonne du tableau */
.contenu_commentaires td+td
{
background: url(http://diztest.blog4ever.com/blog/url_artimage-205392-2394226-4835.html) repeat;
font-style: italic;
}

/* contenu du tableau des commentaires */
.contenu_commentaires tr
{
margin-bottom: 2px;
}

/* les liens */
#article_commentaires.contenu_commentaires a
{
color:#CC0000;
}
#article_commentaires.contenu_commentaires a:hover
{
background:#FFFFFF;
}

/* titre Poster un commentaire */
#articles_commentaires_titre
{
margin-left: 100px;
margin-top: 20px;
color: #990000;
font-family: Comic sans MS;
font-size: 18pt;
font-style: italic;
font-weight: bold;
}

/* ensemble du formulaire */
#articles_commentaires_form
{
background:#F0F0F0;
width:90%;
height:440px;
margin: 10px auto 30px auto;
padding: 30px 20px;
color:#663300;
border: 3px inset #FFCC00;
}

/* exemple encadrement des 3 premiers champs */
.form_moitie
{
background: #FFFFFF;
padding: 3px;
margin: 5px 0px;
border: 1px solid #000000;
}

/* étiquette pseudo */
#articles_commentaires_pseudo_label{}

/* champ de saisie pseudo */
#articles_commentaires_pseudo_input
{
background:FFFFCC;
font-style:italic;
border: 2px groove #FF0000;
}
#articles_commentaires_pseudo_input:hover
{
background:#FFFF99;
border: 2px inset #FF0000;
}
#articles_commentaires_pseudo_input:focus
{
background:#CCFFCC; color:#990000; font-style:italic;
}

/* étiquette email */
#articles_commentaires_email_label{}

/* champ de saisie email */
#articles_commentaires_email_input
{
background:FFFFCC; font-style:italic;
}
#articles_commentaires_email_input:hover
{
background:#FFFF99;
}
#articles_commentaires_email_input:focus
{
background:#CCFFCC;color:#990000; font-style:italic;
}

/* étiquette site */
#articles_commentaires_site_label{}

/* champ de saisie site */
#articles_commentaires_site_input
{
background:FFFFCC; font-style:italic;
}
#articles_commentaires_site_input:hover
{
background:#FFFF99;
}
#articles_commentaires_site_input:focus
{
background:#CCFFCC;color:#990000; font-style:italic;
}

/* etiquette message */
#articles_commentaires_message_label
{
background : #F4F4F4;
}

/* composeur message */
#articles_commentaires_message_textarea
{
background-image : url(http://static.blog4ever.com/2008/05/205392/artimage_205392_1210162_201004220909820.gif);
background-repeat : repeat;
font-style : italic;
width : 80%;
margin-bottom: 10px;
border : 2px ridge #8F8F8F;
}

/* personnaliser le bouton */
#articles_commentaires_submit
{
background-image : url(http://sd-1.archive-host.com/membres/images/183822970129391303/design/fd_degrade/or/fd_1.png);
background-repeat : repeat-x;
height:30px;
padding-top: 0px;
font-size: 14pt;
}

 

Il y a d'autres identifiants mais cet exemple permet de bien voir le résultat que l'on peut obtenir. Ne tenez pas compte des couleurs, je n'ai pas recherché à faire un design super.

 

Pour trouver tous les identifiants regardez dans la structure HTML, au début de cet article. 

 

 

....



11-02-2010 | 1581 vues
Partager


Commentaires


PapyClic
site/blog
le 12-02-2010 à 00:53:42		 Bonsoir à tous
Ce commentaire pour tester la coloration du "Contenu Commentaires" et mieux situer où se positionnent les commentaires.
En espérant que ce tuto vous aidera dans la présentation de vos blogs.

Bonne continuation
PapyClic
site/blog
le 12-02-2010 à 01:01:42		 re Bonsoir

Surtout ne tenez pas compte de mon choix de couleurs, pas très esthétique, mon but est de bien faire voir ce que gère le CSS.

Bonne pioche
Fred
site/blog
le 01-03-2010 à 01:44:57		 Hello Papyclic,

Merci pour tout le travail que tu fais pour nous ;-)

Bon début de semaine

Bye
Chrisithaque
site/blog
le 18-03-2010 à 22:16:14		 Bonsoir Papyclic ! Heureuse de te retrouver sur ton diz test. Quelle source de renseignements précieux ! Le seul problème, c'est que je ne comprends pas grand chose. Par exemple, si je veux améliorer mon blog sur cette partie "commentaires" je le fais où ? J'ajoute les codes dans partie contenu ? car je ne vois pas où ailleurs. Ce n'est peut-être pas ici qu'il faut que je pose des questions; si c'est le cas, je m'en excuse. En tout cas, énorme bravo pour tout ton travail de titan! Chapeau bas !
PapyClic
site/blog
18-03-2010 à 23:31:20
 Bonsoir Chrisi
Pour placer le code, c'est selon la version, gratuite ou payante, voir dans la description de la catégorie "DizPerso Labs". Dans toutes les versions c'est dans la feuille de style mais dans le cas du DizPerso il faut rentrer en modification directe et ne plus se servir de l'assistant "Configuration assistée".
Le code sur cette page est valable mais il y a eu encore des nouveautés, je dois préciser certaines choses mais je n'ai pas eu le temps.
Le mieux c'est sur le forum B4E pour poser des questions.
Merci pour ton commentaire, à bientôt.
Amicalement
casino en ligne
site/blog
le 19-05-2011 à 15:30:37		 Bonjour
Je suis venu par hasard sur ce site et je dois dire que je suis très surpris. Déjà le thème est vraiment bien fait, mais je tenais à mentionner un autre aspect, en effet, les billets sont très gratifiant et comment vous aborder les thèmes qui est vraiment intéressant.
Vous voir bientôt.
location voiture aer...
site/blog
le 16-06-2011 à 17:02:36		 Un article très interessant ! merci beaucoup et Bonne continuation
simon
le 12-07-2011 à 22:03:31		 Salut l'artiste

Très gros travail qui mérite des applaudissements.

Je vais regarder de près car mes codes sont dans le css et un peu différents.

@+
PapyClic
le 12-07-2011 à 22:59:01		 Salut Simon
Le code que tu as fait, il est toujours valable. La seule chose qui change ce sont des identifiants créés par KL, qui permettent d'affiner ou qui donnent la possibilité de mettre tous les formulaires d'un blog identiques. Les commentaires photos peuvent être pareils ou différents.
Ces nouveautés sont en vue de nouvelles fonctions que KL met au point en ce moment.
Bonne soirée
Poster un commentaire
Merci de recopier le nombre de gauche dans la case ci-dessous (Pourquoi?)

Liens

Voir les articles de la catégorie " DizPerso Labs "
Imprimer cet article

Rechercher sur Diztest ? :

Recommander ce blog | Contacter l'auteur | Signaler un contenu | S'abonner au blog Flux RSS du blog | Espace de gestion | Annuaire des blogs