Un vrai sidebar structuré
Vous êtes plusieurs à m'avoir contacté pour savoir comment je faisais pour mettre les boîtes présentes dans la sidebar du site The Rapid Page. Je vous propose plusieurs approches graphiques ou non à utiliser incluses dans votre thème ou non.Les précautions à prendre
Il faut noter que, suivant le thème que vous utilisez, le sidebar est plus où moins large, je vais utiliser pour cet exemple le thème Aqualicieux standard (ou Aqualicious).1 - Savoir à quoi vous serve les boîtes
Nous allons d'abord créer une boîte simple à remplir avec du texte, ou, accessoirement, placer une image. La base CSS peut être une balise p, span, div, le comportement n'est pas toujours le même suivant la balise choisit, n'oubliez pas aussi que le sidebar peut fonctionner en mode texte stylé ou mode HTML. Il sera plus facile de mettre une image en mode texte stylé, idem pour un lien (interne ou externe), par contre les balises et l'ensemble du code utilisé s'insère dans le formatage général de Rapidweaver, cela joue surtout sur les marges ou padding des balises utilisés, alors qu'en mode HTML c'est du code brut, les retour lignes font appel obligatoirement à la balise break.
2 - Aspect graphique complexe ou non
Suivant le thème que vous utilisez vous pouvez vouloir des boîtes très personnalisées, avec un fond titre différent pour chaque boîte, des typographies spécifiques (hors web sécurisé), couleur, filet, etc. On ne peut pas tout faire dans ce registre mais cela demande bien plus de développement qu'une boîte générique simplifié et légère en code.
Le principe
Pour un exemple de boîte simple et ponctuelle on va rester sur un style local appliqué à une balise p, ceci en mode HTML dans le sidebar.Voici un code pour une boîte fond coloré avec une marge de 10 px en dessous (commentaires à la suite) :
<p style="background:#BCEAFF;padding:10px;margin-bottom:10px;">Mon texte d'exemple sans retour à la ligne forcé, le code est dans le sidebar en mode HTML.</p>Les attributs utilisé :background = choix de la couleur (hexadécimale) du fond
padding = marge intérieur pour "pousser" le texte à l'intérieur et qu'il ne colle pas aux bords de la boîte
margin-bottom = cet attribut de marge est localisé au bas de la boîte (bottom) je libère 10 pixels sous la boîte avant l'élément suivant
Vous remarquerez la syntaxe qui sépare les attributs par un point-virgule (;).Un exemple
Option : filets partiels ou non
Toujours dans cet exemple ou peut rajouter un filet autour de la boîte, mais le filet peut aussi n'apparaître que sur l'un ou certains côtés de la boite.
Un code pour un filet en haut et en bas de la boîte :
<p style="background:#BCEAFF;padding:10px;margin-bottom:10px;border-top: 5px solid #3366CC;border-bottom: 5px solid #3366CC;">Mon texte d'exemple sans retour à la ligne forcé, le code est dans le sidebar en mode HTML.</p>Les attributs ajouté :border-bottom (-top) = l'attribut border désigne le filet de contour de l'élément, on lui associe avec un tiret le côté où l'appliquer (ici top et bottom - haut et bas), ensuite on défni dans l'ordre l'épaisseur (ici en pixels), le type (ici solid - pour plein) et enfin la couleur (toujours en hexadécimal)
De quoi attirer un peu plus l'oeil du visiteur. Un exemple
Option : ajouter un titre
Vous savez que Rapidweaver propose un titre de sidebar, si vous voulez ajouter un titre à votre boîte (et aux futures autres) on va modifier un peu le code, la balise p est un élément en ligne, on ne peut pas y ajouter un autre élément en ligne. Je remplace le paragraphe par une div et structure le titre sur une balise p, avec bien sûr son style local (on verra par la suite comment gérer cela dans un thème).
Voici le code avec un titre en blanc sur fond bleu foncé :
<div style="background:#BCEAFF;padding:10px;margin-bottom:10px;border-top: 5px solid #3366CC;border-bottom: 5px solid #3366CC;"><p style="background:#0F3F95;padding:3px;margin:0px;color:#FFFFFF;text-align:center;">Mon titre ici</p>Mon texte d'exemple sans retour à la ligne forcé, le code est dans le sidebar en mode HTML.</div>Je passe sur les attributs utilisé, cet exemple n'est là que pour vous monter qu'à un certain niveau de complexité il devient difficile de gérer ce genre d'élément, c'est à ce niveau qu'il faut penser à passer la description totale du design par des styles sur la feuille du thème.Mais on va les créer dans la page via l'onglet CSS de l'inspecteur de page, le code du sidebar sera modifié en conséquence.Un exemple
Avec les CSS c'est mieux
Pour poursuivre cet exemple je vais reporter les définitions de styles ci-dessus dans 2 classes CSS : .boite et .titreboite, on pourra ajouter une définition pour le paragraphe de .boite (.boite p).Voici les classes saisies dans la partie CSS de l'inspecteur de page :
.boite {
background:#BCEAFF;
padding:0px;
margin:0px 0px 10px 0px;
border-top: 5px solid #3366CC;
border-bottom: 5px solid #3366CC;
line-height:1.3em;
}
.titreboite {
background:#0F3F95;
line-height:1.8em;
padding:0px;
margin:0px;
color:#FFFFFF;
text-align:center;
}
.boite p {
padding: 0px 10px 0px 10px;
margin: 0px:
}On a changé un peu les déclarations, la construction va passer par une div qui contient des paragraphes, celui du titre recevra une classe titreboite supplémentaire, j'ai choisit de faire coller le titre à la boîte et donc la valeur de padding sur la classe boîte est passée à zéro, c'est sur la balise p de la boîte que je viens ajouter 10 pixels à droite et à gauche pour chasser le texte vers le centre de la boîte.
On ajoute ceci dans le champ du texte du sidebar :
<div class="boite"><p class="titreboite">Mon titre ici</p><p>Mon texte d'exemple sans retour à la ligne forcé, le code est dans le sidebar en mode HTML.</p><p>Une autre ligne pour voir l'intervale entre paragraphe.</p></div>Cette fois-ci je peux facilement ajouter une autre boîte sous la première en dupliquant le code et en changeant juste mes textes.Un exemple
Un peu de graphisme
Tel quel ces boîtes sont basiques, nous allons ajouter et modifier l'aspect général avec des fichiers graphiques (.jpg) créés pour eux. J'ai créé un fond pour le titre et un autre pour la boîte générale. Je place ces 2 fichiers .jpg en assets (pour les tests).
Ci-contre celui du titre fait toute la largeur du titre (180 pixels) il est dégradé vers le bas et ce fond dans le blanc.
Pour la boîte c'est un dessin qui sera placé en bas à droite de la boîte (quelque soit sa hauteur).Révisons les styles pour changer un peu les choses, le filet fera 1 pixel et tout le tour de la boîte sa couleur sera harmonisée au visuels.
Voici les nouvelles classes CSS :
.boite {
background:url(assets/bg_motif_bleu.jpg) no-repeat right bottom;
padding:0px;
margin:0px 0px 10px 0px;
border: 1px solid #8AEAE7;
line-height:1.3em;
}
.titreboite {
background:url(assets/bg_fond_bleu.jpg) no-repeat left top;
line-height:1.8em;
font-size:1.1em;
font-weight:bold;
padding:0px;
margin:0px;
color:#2C98B5;
text-align:center;
}
.boite p {
padding: 0px 10px 0px 10px;
margin: 0px:
}L'attribut background est maintenant décrit comme suit : url (chemin vers l'image), no-repeat pour que l'image ne soit pas répétée dans l'élément (option repeat, repeat-x, repeat-y), right bottom pour le visuel de la boîte placé en bas à droite (on peut mettre d'autres positions : left, top, center mais aussi des valeurs en pixels par exemple).
J'ai grossi un peu le corps du texte du titre (1.1 em soit 110 % du corps de l'élément) et je l'ai mis en bleu et en gras (font-weight).
Voilà une approche graphique pour les boîtes du sidebar.
Un exemple
Les variantes CSS
Une fois défini il me reste à définir de nouvelles classes pour créer une boîte avec un fond orange par exemple, elles vont venir s'appuyer sur les premières mais définirons certains attributs en fonction du design souhaité (j'ai créé 2 nouveaux visuels pour cela - placés en assets toujours pour les tests).Voici maintenant le code CSS final pour avoir 2 blocs différents dans mon sidebar :
.boite_bleue, .boite_orange {
background:url(assets/bg_motif_bleu.jpg) no-repeat right bottom;
padding:0px;
margin:0px 0px 10px 0px;
border: 1px solid #8AEAE7;
line-height:1.3em;
}
.boite_orange {
background:url(assets/bg_motif_orange.jpg) no-repeat right bottom;
border: 1px solid #FFB982;
}
.titreboite_bleue, .titreboite_orange {
background:url(assets/bg_fond_bleu.jpg) no-repeat left top;
line-height:1.8em;
font-size:1.1em;
font-weight:bold;
padding:0px;
margin:0px;
color:#2C98B5;
text-align:center;
}
.titreboite_orange {
color:#C05904;
background:url(assets/bg_fond_orange.jpg) no-repeat left top;
}
.boite_bleue p, .boite_orange p {
padding: 0px 10px 0px 10px;
margin: 0px:
}Les noms ont changés pour dissocier les 2 types de boîtes maintenant, pour les titres idem. Le principe c'est de mettre les 2 classes sur la définition générale : .boite_bleue, .boite_orange (séparées par une virgule), ainsi elles auront un certain nombre d'attributs en commun, ensuite on ajoute une définition pour les attributs qui sont modifiés dans la seconde classe : background et border. La même chose s'applique au titre.
Le code dans le sidebar à changé pour s'adapter à cette nouvelle façon de définir les classes :
<div class="boite_bleue"><p class="titreboite_bleue">Mon titre ici</p><p>Mon texte d'exemple sans retour à la ligne forcé, le code est dans le sidebar en mode HTML.</p><p>Une autre ligne pour voir l'intervale entre paragraphe.</p></div>
<div class="boite_orange"><p class="titreboite_orange">Second titre</p><p>Cette fois ci j'ai dupliqué mon code et changé seulement les textes à afficher.</p></div>Si j'ai enfin fini la création de mes styles il me faudrait pouvoir disposer de ces derniers sur toutes mes pages, et là il n'est pas question de répéter les styles sur tous les inspecteurs de pages. Pour cela je vais modifier le thème avec mon code CSS, après avoir sauvé mon fichier de test et sa page de visualisation.Un exemple
Intégrer les styles au thème
Il me reste à intégrer mes styles dans le thème, pour cela je duplique le thème et j'ouvre son contenu pour éditer la feuille de styles styles.css du thème avec TextEdit (mode brut). je vous conseille de coller le code CSS final dans le Groupe Global de la feuille de styles (en premier), une fois collé pensez à modifier les chemins des images utilisées dans les classes : on change assets par images.
Une fois enregistré ce fichier styles.css il faut copier vos fichiers graphiques dans le dossier images du thème, on place les fichiers en racine du dossier.
Revenez dans Rapidweaver après l'avoir relancé pour bien valider votre nouveau thème, effacez le code CSS de la partie Expert de votre page de test, prévisualisez, vos boîtes doivent êtres toujours personnalisées. Vous pourrez en mettre sur chacune de vos pages.
Conclusion
Si dans l'avenir une fonction pour inclure son code CSS personnalisé dans la feuille générique apparaît ce sera un vrai plus dans la personnalisation des thèmes (idem pour les images). En attendant il faut passer par ces différentes étapes pour obtenir un "plus" dans vos sites.Bonne pratique.