27 avril 2008
Encadrer les messages
Etiquettes: avancé, mise en page
Mode: avancé
En mode normal, la seule possibilité de séparer les différents messages sur la page est de définir des bordures à la date ou au pied de message.
En mode avancé, on va pouvoir faire bien plus évidemment, comme encadrer chaque message.
Pour cela, on va placer les messages dans un conteneur supplémentaire de type div. On va donc chercher, dans le code html de la page des archives et de la page d'accueil le code suivant et ajouter ce qui est en gras (note: ne copiez pas l'ensemble du code ci-dessous, d'autant que le pied de page est personnalisé. Ajoutez seulement ce qui est en gras dans vos pages pour ne pas toucher au reste):
<Blogger>
<div class="billet">
<BlogDateHeader>
<h2><$BlogDateHeaderDate<Blogger>
<div class="billet">
<BlogDateHeader>
<h2><$BlogDateHeaderDate$></h2>
</BlogDateHeader>
<a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3><$BlogItemTitle$></h3>
<h4><BlogItemCategories>Dans <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a></h4>
</BlogItemTitle>
<$BlogItemBody$>
<div class="itemfooter">;Dans: <BlogItemCategories><a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
</div>
</Blogger>
Ici, j'ai mis class="billet" mais vous appelez votre class comme vous voulez.
Ensuite, dans la feuille de style, on va définir les attributs de la class billet:
.billet {
border: 1px solid #000000; /*bordure*/
padding: 5px; /*marges intérieures*/
margin-bottom: 40px; /*marge en dessous, pour bien séparer du billet suivant*/
background-color: #EFF6F7; /*couleur de fond*/
}
Et voilà ce que ça donne:
Ah ben oui, mais moi je voudrais que les cadres soit séparé mais qu'ils apparaissent sur le fond du blog, pas sur un fond blanc ou quoi.
Et ben là on va modifier 2 ~ 3 choses dans la feuille de style pour qu'il n'y ait pas de fond et pour placer les cadres comme il faut. Il va falloir donner un background transparent et aucune bordure au container et au content, et définir les marges du blogbody comme on le souhaite pour notre affichage. Par exemple, si je veux que le cadre de mes messages soit bien à gauche aligné avec le bord de la bannière, avec une marge à droite et une en haut sous la bannière:
#container {
width: 900px;
padding: 0px;
background: transparent;
margin-right: auto;
margin-left: auto;
}
#content {
float: left;
width: 700px;
padding: 0;
background: transparent;
overflow: hidden;
}
.blogbody {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
padding-right: 10px;
padding-top: 10px;
text-align: left;
line-height: 150%;
}
Et voilà ce que ça donne:
14 avril 2008
Personnaliser le formulaire de commentaire
Etiquettes: avancé, commentaires, mise en page
Mode: avancé
Modifier le formulaire de commentaires peut être intéressant pour plusieurs choses:
- en changer les couleurs ou la présentation pour mieux l'intégrer dans le style du blog, ou au contraire l'en détacher pour le mettre en évidence.
- modifier son encombrement
- personnaliser les textes et/ou ajouter des informations, comme signaler les champs obligatoires
Dans cet article je vais vous donner quelques exemples avec une capture d'écran du résultat, et le code commenté.
Je dis bien quelques exemples, ceux qui me paraissent les plus significatifs, car les possibilités sont très nombreuses évidemment.
Nous allons voir comment modifier par une feuille css et comment modifier par le XHTML avant de conclure.
Mais commençons déjà par regarder le code XHTML du formulaire présent dans la "page d'un message", en gras les commentaires pour vous indiquer ce qui correspond à quoi:
<h2>Poster un commentaire</h2> <!--ça c'est le titre-->
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">
<!--la balise d'ouverture du formulaire-->
<p>
<label for="authorNickName">Nom ou pseudo :</label>
<br />
<input id="authorNickName" name="authorNickName" value="" maxlength="16" onchange="handleChange(this)" /> <!--le champ où on entre le nom-->
</p>
<p>
<label for="authorEmail">Adresse email :</label>
<br />
<input id="authorEmail" name="authorEmail" value="" maxlength="64" onchange="handleChange(this)" /> <!--le champ pour l'email-->
</p>
<p>
<label for="authorWebsiteUrl">Site Web (URL) :</label>
<br />
<input id="authorWebsiteUrl" name="authorWebsiteUrl" value="" maxlength="128" onchange="handleChange(this)" /> <!--le champ pour le site-->
</p>
<p>
<label for="commentTitle">Titre du commentaire :</label>
<br />
<input id="commentTitle" name="commentTitle" value="" maxlength="128" /> <!--le champ pour le titre-->
</p>
<p>
<label for="commentBody">Commentaire :</label>
<br />
<textarea id="commentBody" name="commentBody" rows="10" cols="50"></textarea> <!--le cadre pour écrire le commentaire-->
</p>
<p>
<label>
<input onclick="handleCheck(this)" type="checkbox" id="rememberInfo" name="rememberInfo" value="1" /> <!--la case à cocher-->
Se souvenir de mes informations personnelles</label>
</p>
<input type="submit" name="submit" value="Envoyer" /> <!--le bouton envoyer-->
<br />
</form> <!--balise de fermeture du formulaire-->
1/ Personnaliser par une feuille CSS
On reviendra plus en détail sur le code XHTML plus tard, pour l'instant, on va voir comment modifier la présentation du formulaire uniquement au niveau du style. On va juste ajouter un id au bouton "envoyer", pour le différencier aussi des autres <input>. Donc par exemple:
<input id="envoyer" type="submit" name="submit" value="Envoyer" />
Ensuite, on va ajouter une feuille de style interne à la page d'un message, entre les balises <head></head> de cette page.
Bien sûr, on pourrait plutôt l'ajouter à la feuille de style générale, l'effet serait le même. Mais ce style ne s'appliquant qu'à ce type de page, il n'est pas nécessaire d'alourdir la feuille de style générale. Mais c'est comme vous voulez. Personnellement, j'ai choisi la solution de la feuille interne.
On va utiliser les id des différentes zones pour définir les styles. Par exemple (en gras, les commentaires)
<style type="text/css">
/*style du cadre global du formulaire*/
#frmComment {
border: dotted 1px #000000; /*style, épaisseur, couleur de bordure*/
width: 500px; /*largeur du cadre*/
background-color: #DFD1D9; /*couleur de fond*/
padding: 0 0 5px 10px; /*marges intérieures, haut, gauche, bas, droite*/
margin: auto; /*marges extérieures automatique pour centrer le cadre*/
}
/*style des champs, sauf "site web"*/
#authorNickName,#authorEmail,#commentTitle {
background-color: #5F2046; /*couleur de fond*/
color: #DFD1D9; /*couleur de police*/
border: none; /*pas de bordure*/
}
/*style du champ "site web" en utilisant l'id*/
#authorWebsiteUrl {
background-color: #F7EFF4;
color: #5F2046;
border: solid 1px #5F2046;
width: 200px; /*largeur*/
}
/*style du bouton "envoyer"*/
#envoyer {
background-color:#A0DFB9;
color: #5F2046;
border: outset 1px #999999;
width: 80px;
}
label {
font-style: italic; /*mise en italique des titres de champs*/
}
*/style de la zone d'écriture du commentaire*/
#commentBody {
background-color:#F7F7F7;
color: #5F2046;
border: none;
}
</style>
Ce qui donne ceci:
Vous remarquerez qu'en utilisant les id, on pourrait appliquer un style différent à chaque champ si on voulait (mais bon, est-ce bien utile?). Ici, j'ai utilisé un attribut width pour modifier la longueur du champ, nous allons voir après qu'il y a un autre moyen, dans le XHTML.
On oublie le CSS, nous allons voir ce qu'il est possible de faire en tripatouillant uniquement le code XHTML.
Commençons par regarder les différents attributs des éléments input et textarea en jeu.
Ceux auxquels on ne touchera pas (donc pas la peine d'expliquer ce que c'est ;P):
id, name, onchange, type.
Celui qu'on peut éventuellement modifier mais ça servirait pas à grand chose:
maxlength, qui détermine le nombre de caractères maximum acceptés dans le champ.
Ceux qu'on va pouvoir modifier pour jouer sur l'apparence:
rows, détermine la hauteur du textarea en nombre de rangées (attention, la dimension d'une rangée dans Internet Explorer est moindre que dans les autres navigateurs)
cols, détermine la largeur du textarea en nombre de colonnes (même remarque que pour rows)
value, indique ce qui sera écrit dans le champ
Ceux qu'on va pouvoir ajouter:
size, dans les input pour leur définir une largeur
onclick, indique un comportement au clic de la souris
Dans un premier temps, on va se contenter de modifier les noms et dimensions des champs et d'ajouter une indication de champ obligatoire.
Voici un exemple (en gras, ce qui a été modifié ou ajouté):
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">
<p>* champ obligatoire</p>
<p>
<label for="authorNickName">Votre nom :</label>
<input id="authorNickName" name="authorNickName" value="" maxlength="16" onchange="handleChange(this)" /> *
</p>
<p>
<input id="authorEmail" name="authorEmail" value="" maxlength="64" onchange="handleChange(this)" size="25"/>
<label for="authorEmail">* Adresse email (non affichée)</label> </p>
<p>
<label for="authorWebsiteUrl">Votre Site Web (URL) :</label>
<br />
<input id="authorWebsiteUrl" name="authorWebsiteUrl" value="" maxlength="128" onchange="handleChange(this)" size="30"/>
</p>
<p>
<label for="commentTitle">Titre du commentaire :</label>
<br />
<input id="commentTitle" name="commentTitle" value="" maxlength="128" size="40"/>
</p>
<p>
<label for="commentBody">Commentaire :*</label>
<br />
<textarea id="commentBody" name="commentBody" rows="7" cols="70"></textarea>
</p>
<p>
<label>
<input onclick="handleCheck(this)" type="checkbox" id="rememberInfo" name="rememberInfo" value="1" />
Se souvenir de mes informations personnelles</label>
</p>
<input id="envoyer" type="submit" name="submit" value="envoi" />
<br />
</form>
Et voici le résultat:
On peut placer le titre et le champ sur la même ligne, il suffit de faire suivre les <label> et les <input> sans mettre de <br/> qui est un retour à la ligne. On peut placer du texte à droite ou à gauche du champ.
Si l'attribut size n'est pas précisé, il prendra sa valeur par défaut qui est 20.
En l'absence de style CSS particulier, l'aspect des champs et du bouton "envoi" dépend du système du visiteur.
Maintenant, nous allons voir un autre principe, celui de mettre le nom des champs directement dedans au lieu de haut-dessus.
On va supprimer tous les <label> et indiquer une valeur à l'attribut value. C'est là aussi qu'on va utiliser l'attribut onclick.
Voici un code exemple:
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">
<p>* champ obligatoire</p>
<p>
<input id="authorNickName" name="authorNickName" value="Votre nom" maxlength="16" onchange="handleChange(this)" onclick="if (this.value=='Votre nom') this.value=''" /> *
</p>
<p>
<input id="authorEmail" name="authorEmail" value="votre adresse mail" maxlength="64" onchange="handleChange(this)" onclick="if (this.value=='votre adresse mail') this.value=''"/> *
</p>
<p>
<input id="authorWebsiteUrl" name="authorWebsiteUrl" value="votre site web" maxlength="128" onchange="handleChange(this)" onclick="if (this.value=='votre site web') this.value='http://'"/>
</p>
<p>
<input id="commentTitle" name="commentTitle" value="titre du commentaire" maxlength="128" onclick="if (this.value=='titre du commentaire') this.value=''"/>
</p>
<p>
<textarea id="commentBody" name="commentBody" rows="7" cols="58" onclick="if (this.value=='C’est à vous de parler!') this.value=''">C’est à vous de parler!</textarea>
</p>
<p>
<label>
<input onclick="handleCheck(this)" type="checkbox" id="rememberInfo" name="rememberInfo" value="1" />
Se souvenir de mes informations personnelles</label>
</p>
<input type="submit" name="submit" value="Envoyer" />
</form>
<form action="" method="post" name="frmComment" style="display: none;">
</form>
Vous pouvez voir ce que ça donne sur cette page.
Les deux dernières lignes annulent la fonction qui fait que ce qui s'affiche dans les champs sont les informations enregistrées sur l'ordinateur de l'utilisateur dans un cookie. En effet, la case à cocher "se souvenir de mes informations" permet d'afficher directement le nom, le mail et le site de l'utilisateur. Mais si rien n'est enregistré, les champs s'afficheront vides.
La fonctionnalité "se souvenir de mes informations" est toujours disponible, mais il faudra cocher la case pour ré-afficher les informations enregistrées. Il sera alors judicieux de modifier l'intitulé de cette case, comme je l'ai fait sur ce blog.
Ce qui est indiqué entre guillemets après value= sera donc ce qui s'affichera par défaut dans le champ.
Pour le textarea c'est un peu différent, on met directement le texte entre les balise <textarea></textarea>, comme pour un paragraphe.
Revenons sur l'attribut onclick. Il pourrait être de cette forme:
onclick="this.value=''"
Dans ce cas, le contenu du champ s'efface quand on clique dessus, quel que soit ce qui y est écrit.
L'inconvénient est que si l'utilisateur s'est trompé et veut revenir dessus, tout s'efface et il doit tout retaper.
Pour remédier à cela, on indique que le contenu doit s'effacer uniquement s'il contient un certain texte, en l'occurrence le texte par défaut. C'est ce qu'on indique après "if". Par exemple
onclick="if (this.value=='Votre nom') this.value=''"
Plutôt que de s'effacer, on peut remplacer le texte par défaut par un autre, c'est ce que j'ai fait dans mon exemple pour le champ "votre site web" qui devient "http://" quand on clique dessus, permettant de saisir l'adresse à la suite.
Si vous avez des apostrophes ou des guillemets dans le texte par défaut, il est impératif de les transcrire en code html (’ pour l'apostrophe et "e; pour les guillemets) sinon il seront interprétés comme faisant partie du code et ça ne fonctionnera pas.
Le seul petit inconvénient des valeurs par défaut, c'est que si l'utilisateur ne clique pas dans les champs facultatifs, la valeur par défaut sera tout de même envoyée.
Je vous conseille, contrairement à ce qui est fait dans mon dernier exemple, de garder les titres de champs en dehors du champ lui-même avec les balises <label></label>pour plusieurs raisons:
- Quand on clique sur un champ, la valeurs par défaut s'effacent et ne se ré-affichent que si on vide le cache du navigateur. Imaginez si vous cliquez sur tous les champs sans les remplir, vous ne savez plus où mettre quoi.
- Si on clique sur le texte de la balise <label> le curseur de la souris sera pointé dans le champ correspondant, ce qui permet à l'utilisateur d'être moins précis dans le pointage.
- Si on clique sur ce texte quand le champ est vide, dans certains navigateurs on obtient une liste déroulante de ce qu'on a déjà entré dans ce même type de champ.
Il ne nous reste plus qu'à mixer tout ce qu'on vient de voir pour personnaliser totalement le formulaire de commentaire! Petits exemples sur ce blog-là où sur mon autre blog où comme tout le monde je raconte un peu ma vie.
02 avril 2008
Personnaliser le pied de message
Etiquettes: avancé, mise en page
Mode: avancé
Par défaut, en bas des messages du blog, on a un truc comme ça:
où "tutos Canalblog" est le nom de la catégorie.
Pas très fun tout ça. Mais on peut le modifier très facilement en mode avancé.
Le pied de message est constitué par le div de classe itemfooter.
Il suffit de rechercher dans le code des pages ceci:
<div class="itemfooter">Postépar <$BlogItemAuthorNickname$>à <$BlogItemDateTime$>
<BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a></BlogItemCategories>
<BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments>
<BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> -
Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
On peut y repérer:
<$BlogItemAuthorNickname$> : le pseudo de l'auteur
<$BlogItemDateTime$> : l'heure du message
<$BlogItemCategoryName$> : le nom de la catégorie, entourée des balises de lien
Le lien vers les commentaires avec <$BlogItemCommentsCount$> le nombre de commentaires
Le lien vers les rétroliens avec <$BlogItemTrackBacksCount$> le nombre de rétroliens
Le lien permanent
Les trucs bizarres é et à sont les codes html des lettres accentuées é et à. Les écrire de cette façon assure qu'elles seront affichées correctement à l'écran, quel que soit l'encodage utilisé par le visiteur.
A partir de là, une fois les éléments repérés, seule notre imagination peut nous limiter.
On peut supprimer des éléments, les déplacer, mais on ne supprimera pas ici les blocs commentaires et rétroliens, il est préférable de les conserver pour pouvoir les activer ou désactiver dans les paramètres du blog. Par contre on peut en modifier les intitulés.
Par exemple:
<div class="itemfooter">é par <$BlogItemAuthorNickname$> à pas d'heure dans la
gribouill
<BlogItemCategories>rubrique <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories>
<BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message"><$BlogItemCommentsCount$> ce que j'en dit</a> </BlogItemComments>
<BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens"><$BlogItemTrackBacksCount$> liens boomerang</a> </BlogItemTrackBacks>
- <a href="<$BlogItemURL$>" title="Lien permanent vers ce message">pour retrouver ce message</a></div>
donnera:
De plus, rien ne vous empêche de déplacer ou copier certains de ces blocs ailleurs qu'en pied de message, comme je l'ai fait avec le bloc <BlogItemCategories> sur les pages d'archives de ce blog, en le répétant sous le titre du message. Attention toutefois, j'ai pu me rendre compte dans ce cas que si un message était sans catégorie, il y a un problème d'interprétation et ça fout en l'air l'agencement du blog.
