Blog'Notes

En fin de billet, vous pouvez retrouver une archive ZIP (se repérer par rapport au numéro indiqué sur ce billet) qui vous permet d’utiliser facilement ces structures.

Reset : Valable pour toutes les structures proposés

fichier style.css

A inclure dans chacune des structures proposés.

fieldset {
	border: none;
}

p.field, p.form-help, p.remember, p.buttons {
	padding-top: 1em;
	line-height: 150%;
}

input#c_remember {
	margin-right: 5px;
}

.form-help {
	font-size: 0.9em;
}

Layout#1 : Les champs de saisie à la ligne

fichier post.html

Aucune modification du fichier par défault.

fichier style.css

#comment-form p.field label {
	display: block;
}

input#c_name, input#c_mail, input#c_site {
	width: 40%;
}

textarea#c_content {
	width: 100%;
}

Layout#2 : infos côté gauche (1/3) + commentaires côté droit (2/3)

fichier post.html

Rajout de div (left, right) pour englober les éléments suivant le côté qu’on leur attribue.

fichier style.css

#comment-form p.field label {
	display: block;
}

input#c_name, input#c_mail, input#c_site, p.form-help {
	width: 100%;
}

textarea#c_content {
	width: 100%;
}

.left {
	float: left;
	width: 28%;
	padding-right: 2%;
}

.right {
	float: right;
	width: 68%;
	padding-left: 2%;
}

Layout#3 : Champs “Mail” et “Site Web” sur deux colonnes

fichier post.html

Rajout de class supplémentaire à chaque <p class=”field”> : .name pour le champ Nom ou pseudo, .mail pour le champ Mail, .site pour le champ Site Web, .content pour la zone de commentaires.

fichier style.css

#comment-form p.field label {
	display: block;
}

input#c_name, input#c_mail, input#c_site, 
textarea#c_content {
	width: 100%;
}

.mail {
	float: left;
	width: 48%;
}

.site {
	float: right;
	width: 48%;
}

.content {
	clear: both;
}

Layout#4 : Champs “Nom ou pseudo”, “Mail” et “Site Web” sur trois colonnes

fichier post.html

Rajout de class supplémentaire à chaque <p class=”field”> : .name pour le champ Nom ou pseudo, .mail pour le champ Mail, .site pour le champ Site Web, .content pour la zone de commentaires.

fichier style.css

#comment-form p.field label {
	display: block;
}

input#c_name, input#c_mail, input#c_site, 
textarea#c_content {
	width: 100%;
}

.name {
	float: left;
	width: 32%;
	padding-right: 2%;
}

.mail {
	float: left;
	width: 29%;
	padding-left: 2%;
}

.site {
	float: right;
	width: 31%;
}

.content {
	clear: both;
}

Layout#5 : Comme sur le thème par défaut

fichier post.html

Aucune modification du fichier par défaut.

fichier style.css

p.field label {
	display: block;
	float: left;
	width: 27%;
	padding-right: 2%;
	text-align: right;
	}

input#c_name,
input#c_mail,
input#c_site,
textarea#c_content {
	width: 70%;
	}

p.form-help,
p.remember,
p.buttons
 {
	margin-left: 29%;
	width: 70%;
}

Layout#6 : Comme sur les thèmes Wordpress

fichier post.html

<!-- # Comment form -->
    <form action="{{tpl:EntryURL}}#pr" method="post" id="comment-form">
      <tpl:IfCommentPreview>
        <div id="pr">
          <h3>{{tpl:lang Your comment}}</h3>
          <dl>
            <dd class="comment-preview">{{tpl:CommentPreviewContent}}</dd>
          </dl>
          <p class="buttons"><input type="submit" class="submit" value="{{tpl:lang send}}" /></p>
        </div>
      </tpl:IfCommentPreview>
      
      <h3>{{tpl:lang Add a comment}}</h3>
      <fieldset>
        <!-- # --BEHAVIOR-- publicCommentFormBeforeContent -->
        {{tpl:SysBehavior behavior="publicCommentFormBeforeContent"}}
        
        <p class="field"> 
        <input name="c_name" id="c_name" type="text" size="30" maxlength="255"
        value="{{tpl:CommentPreviewName encode_html="1"}}" />
	  <label for="c_name" class="name">{{tpl:lang Name or nickname}}</label>
        </p>
        
        <p class="field"> 
        <input name="c_mail" id="c_mail" type="text" size="30" maxlength="255"
        value="{{tpl:CommentPreviewEmail encode_html="1"}}" />
	  <label for="c_mail" class="mail">{{tpl:lang Email address}}</label>
        </p>
        
        <p class="field">
        <input name="c_site" id="c_site" type="text" size="30" maxlength="255"
        value="{{tpl:CommentPreviewSite encode_html="1"}}" />
	  <label for="c_site" class="site">{{tpl:lang Website}} ({{tpl:lang optional}})</label>
        </p>
        
        <p style="display:none"><input name="f_mail" type="text" size="30"
        maxlength="255" value="" /></p>
        
        <p class="field">
        <textarea name="c_content" id="c_content" cols="35"
        rows="7">{{tpl:CommentPreviewContent raw="1" encode_html="1"}}</textarea>
        </p>
        <p class="form-help">{{tpl:lang HTML code is displayed as text and web addresses are
        automatically converted.}}</p>
        
        <!-- # --BEHAVIOR-- publicCommentFormAfterContent -->
        {{tpl:SysBehavior behavior="publicCommentFormAfterContent"}}
      </fieldset>
      
      <fieldset>
        <p class="buttons"><input type="submit" class="preview" name="preview" value="{{tpl:lang preview}}" />
        <tpl:IfCommentPreview><input type="submit" class="submit" value="{{tpl:lang send}}" /></tpl:IfCommentPreview></p>
      </fieldset>
    </form>

fichier style.css

.name, .mail, .site {
	padding-left: 10px;
}

textarea#c_content {
	width: 100%;
}

A vous de jouer !