Kit 2 - Personnalisations

3. Le fond de fenêtre

Lomalarch — Mon, 08 Oct 2007 16:46:00 +0200

Sauf si vous avez choisi une largeur fluide à 100% pour l'affichage du blog, un fond apparaît sur les côtés. On peut habiller ce fond avec une couleur uniforme, un motif répétitif ou, pourquoi pas, une couleur à gauche et une autre à droite.

Contenu de cet article :

Pour changer la couleur du fond de page ou y appliquer une image qui se répète, tout se passe dans la règle de body :

body {
	font : 86%/130% arial,"Lucida Grande","Trebuchet MS", sans-serif;
	background : #f0f0f0;
	color:#222;
    }

Un fond de fenêtre de couleur uniforme…

La ligne background : #f0f0f0; détermine actuellement un fond uniforme de couleur gris pâle. Pour modifier cette couleur il suffit d'indiquer le code hexadécimal correspondant à la couleur souhaitée. De nombreux sites permettent de choisir des couleurs, quelques-uns d'entre eux sont listés parmi les liens Dotaddict.org. Exemple pour un fond bleu clair :

	background : #cce0f0;

En voici le résultat :

… ou avec un motif répétitif

Pour un motif répétitif, placer l'image de ce motif dans le répertoire /kit2/images/ puis modifiez la ligne background ci-dessus de la façon suivante :

  	background : #f0f0f0 url(images/fond_motif.gif);

En voici le résultat :

Et pourquoi pas bicolore ?

Si vous souhaitez que la couleur « débordant » de la page ne soit pas la même à gauche et à droite, procédez comme suit :

fabriquez une image de 1600px de large et quelques pixels de haut avec une couleur sur la moitié gauche et une autre sur la moitié droite
placez-la dans le répertoire /kit2/images/
remplacez la ligne de background par :

  	background : #f0f0f0 url(images/fond_bicolore.png) top center;

En voici un exemple :

Sur le même principe de construction et de placement vous pouvez utiliser des motifs différents à gauche et à droite, etc.

Les images fond_motif.png et fond_bicolore.png sont disponibles dans le répertoire zegoodies.

2. Choisir une palette de couleurs

Koz, pour l'équipe de Dotaddict — Mon, 01 Oct 2007 16:00:00 +0200

Sans que cela représente une véritable obligation, définir d'emblée un assortiment de couleurs et/ou images peut s'avérer un bon préalable. Il vous faut au minimum une couleur contrastée pour les liens. Vous pouvez vous en tenir là, assortie de la vaste gamme des gris, comme c'est le cas pour le thème Kit2 dans sa version basique, avec une petite pointe de bleu dans les éléments décoratifs.

Si vous voulez en utiliser plusieurs, une présélection peut par exemple être faite sur la base suivante :

une couleur contrastée pour les liens en général
une couleur contrastée pour les liens de navigation, qui permettrait de les identifier rapidement
une couleur contrastée pour la titraille (titre du blog et/ou titres des billets et/ou intertitres)
une couleur discrète pour le fond de fenêtre si votre page n'occupe pas toute la largeur
une couleur discrète pour les fonds de blocs à contenu spécifique (citations, extraits de codes...)
une couleur discrète pour les fonds des commentaires

A titre d'exemple, voici la palette choisie pour le présent thème :

En tous les cas, tâchez de ne pas perturber le lecteur : n'utilisez pas par exemple la même couleur pour du texte cliquable (liens) et non cliquable (intertitres), évitez les ton sur ton trop discrets qui gêneront les visiteurs percevant mal les couleurs - savez-vous par exemple que xx% des humains sont atteints de daltonisme à des degrés divers ?

Comment choisir ses couleurs ?

Il existe différents outils en ligne qui proposent une gamme de couleurs en harmonie avec la couleur de base qu'on leur indique. Vous pouvez vous y référer, ainsi qu'à d'autres petites ou grandes applications à télécharger sur votre ordinateur. Je vous invite à consulter la page consacrée aux outils sur Le Petit Dotclear illustré ou à effectuer vos propres recherches dans un moteur de recherche.

Une méthode que je recommande chaudement car elle évite bien des fautes de goût consiste à... faire confiance à la nature. Choisissez une photographie dont vous aimez les tonalités générales, paysages, bouquets de fleurs, animaux, etc. Puis recueillez les couleurs qui la composent pour établir votre palette.

Faites-en de même si vous disposez d'une image que vous souhaitez intégrer à votre blog (typiquement une bannière) ou d'un motif à placer en fond de fenêtre sous la page.

Au début du fichier style.css vous trouverez dans un commentaire les références des couleurs utilisées. Pour une première étape, vous pouvez, après avoir réalisé votre choix de palette, faire un cherche/remplace sur les #xxxxxx d'origine pour les remplacer par les vôtres.

1. Choisir la structure

Koz, pour l'équipe de Dotaddict — Mon, 01 Oct 2007 15:00:00 +0200

Après avoir installé le thème selon la procédure habituelle décrite dans la documentation, la première étape de votre personnalisation consistera à choisir quelle structure générale de mise en page vous souhaitez pour votre blog.

Pour ce faire, il faut suivre les trois étapes décrites dans ce billet :

choisir la structure parmi les quatorze proposées
l'activer via la feuille de style
éventuellement y apporter quelque variation

Choisir

Repérez celle qui vous convient et retenez le nom du fichier correspondant. (Cliquez sur l'image pour voir une capture d'écran en taille réelle.)

Une colonne

nom du fichier : layout-1A.css
largeur fixe 760px
le menu se trouve tout en bas de la page, les items les uns à la suite des autres.

nom du fichier : layout-1B.css
largeur fixe 740px
le menu se trouve tout en bas de la page en deux colonnes, l'une comportant les widgets du bandeau de navigation et l'autre contenant les widgets placés dans le bandeau d'extra.

nom du fichier : layout-1C.css
largeur fixe 760px
le menu est placé en haut de page sur une hauteur de 180s pixels avec un ascenseur sur le côté.

Deux colonnes

nom du fichier : layout-2A.css
largeur fixe : 760px
menu à gauche

nom du fichier : layout-2B.css
largeur fluide
menu à gauche

nom du fichier : layout-2C.css
largeur fixe : 760px
menu à droite

nom du fichier : layout-2D.css
largeur fluide
menu à droite

Trois colonnes

nom du fichier : layout-3A.css
largeur fixe 940px
menu à gauche en deux colonnes, l'une pour le bandeau de navigation, l'autre pour le bandeau d'extra

nom du fichier : layout-3B.css
largeur fluide
menu à gauche en deux colonnes, l'une pour le bandeau de navigation, l'autre pour le bandeau d'extra

nom du fichier : layout-3C.css
largeur fixe 940px
menu à droite en deux colonnes

nom du fichier : layout-3D.css
largeur fluide
menu à droite en deux colonnes

nom du fichier : layout-3E.css
largeur fixe 940px
trois colonnes, un bandeau de chaque côté

nom du fichier : layout-3F.css
largeur fluide
trois colonnes de largeurs variables, un bandeau de chaque côté.

Quatre colonnes

nom du fichier : layout-4A.css
largeur fluide
un bandeau de chaque côté. A l'accueil les billets sont répartis en deux colonnes. (Ce thème sera plus joli avec des chapô de même hauteur.)

Activer

Cliquez sur l'onglet « Paramètres du thème » (depuis votre espace d'administration : tableau de bord -> Paramètres des thèmes -> Paramètres du thème) ou ouvrez le fichier style.css contenu dans le répertoire kit2 au sein du répertoire de tous vos thèmes. La ligne que vous devrez modifier est celle-ci :

@import url(layouts/layout-2C.css);

Remplacez "layout-2C.css" par le nom du fichier correspondant à la structure que vous souhaitez.

Adapter

Les largeurs de pages prédéfinies ne vous conviendront peut-être pas tout à fait. Vous interviendrez alors dans le fichier de structure que vous avez choisi pour modifier la valeur de width dans la règle de #page {}

Recommandation :
Plutôt qu'y intervenir directement, je vous suggère de dupliquer le fichier de structure qui vous convient, puis de le renommer (par exemple en mon_layout.css) et dans l'étape ci-dessus décrite de remplacer l'inclusion du fichier de structure "layout-2C.css" par "mon_layout.css". Ainsi vous gardez les structures en leur état originel et pourrez y revenir en cas de souci.

Quelle largeur ?

Pour les thèmes à largeur fixe, prenez garde de ne pas choisir une valeur trop grande : les petits écrans risquent de se retrouver dotés d'un ascenseur horizontal, ce qui rend la navigation très inconfortable. Si j'ai choisi 940px pour les layouts en trois colonnes pour éviter que ce soit trop moche, en réalité 840px c'est déjà le max pour rester à l'aise sur un écran 15 pouces.

Pour les thèmes à largeur fluide, vous pouvez remplacer la valeur 100% par une autre valeur en pourcentage, afin de laisser une marge de chaque côté de la page. C'est par exemple ce que j'ai fait ici en choisissant la structure 2D puis en modifiant la valeur 100% par 90%.

Un billet de test

Marcel biou — Tue, 18 Apr 2006 10:25:00 +0000

Regroupement dans ce billet des principales balises d'enrichissement. Elles sont présentées avec du faux texte. C'est une très ancienne tradition en vigueur dans l'imprimerie. Ce faux texte a ici été généré par un site dont je vous donne le lien (ipsum generator), ce qui me permet du même coup de montrer la présentation des liens dans les billets. Le texte a été saisi en wiki, wiki2xhtml se chargeant ensuite de la conversion en HTML.

Titre de niveau h3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed scelerisque euismod leo. Donec magna (balise <strong>). Integer mollis nonummy magna. Donec tristique lorem a pede. Nunc scelerisque sodales justo. Phasellus tempus eros. Praesent feugiat, mauris at malesuada blandit, justo nisl dignissim tortor, a ornare sem nulla in ante. Integer elit orci, tempor eu, rhoncus ut, tristique eu, tellus. Sed eget lorem. (<em>) Sed sodales, purus et luctus adipiscing, orci nulla scelerisque orci, at lobortis ante sapien vitae felis. Aenean varius tempor ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras malesuada commodo leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Etiam mollis, nunc vitae dignissim cursus, velit odio sollicitudin mi, ut sollicitudin turpis elit eu elit. (<q>)

Titre de niveau h4

Vestibulum ultrices purus id odio. Duis nec erat ornare dolor pellentesque gravida. Pellentesque turpis. Cras non mauris. Donec pede leo, eleifend non, imperdiet non, interdum ut, diam. Vestibulum porta. Nulla interdum wisi non neque. Ut sollicitudin blandit sem. Etiam risus diam, elementum id, vehicula eget, consectetuer ac, quam. Cras sapien.

Morbi sed erat. Maecenas rutrum nunc a erat. Nam libero nunc, mattis eget, pellentesque nec, molestie in, wisi. Phasellus rutrum neque nec eros. Donec lectus lacus, lacinia in, lacinia non, semper eget, lectus. In hac habitasse platea dictumst. (<blockquote>)

In velit. Suspendisse potenti. In accumsan, odio id commodo consectetuer, libero nulla feugiat nisl, eget tincidunt metus quam non justo. Praesent tellus. Integer aliquam. Duis pulvinar lectus ac nibh auctor pharetra. In eleifend. Donec rhoncus erat quis mi. Aenean leo ante, adipiscing venenatis, mattis ut, volutpat nec, sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Titre de niveau h5

Curabitur aliquet arcu non nulla. Phasellus dictum enim sed odi :

Integer molestie faucibus felis. Nam volutpat commodo dolor. Cras viverra. Cras euismod odio et massa commodo vehicula. Etiam eget tellus. Etiam tempus sapien sit amet nulla. Sed euismod, metus eu condimentum ornare, nunc dui malesuada wisi, et tempor nisl ante vel nisl. Praesent sit amet libero ut wisi tincidunt eleifend. (<pre>)

Aenean mauris. Ut egestas cursus massa. Fusce venenatis tellus nec augue dapibus aliquam. Ut ac lorem.

Morbi eget purus. Integer tempor consectetuer risus :

Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
- Cras wisi sapien
- dictum id,
- fringilla ut,
- gravida sed, mi
Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
Vivamus mollis. (<ul><li>)

Vivamus risus. Maecenas eros arcu, dictum ut, euismod et, dictum id, tellus. Etiam nonummy vestibulum mi. Donec leo dui, congue et, rhoncus eu, accumsan eu, arcu. Morbi id enim vel elit varius cursus.

Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
1. Cras wisi sapien
2. dictum id,
3. fringilla ut,
4. gravida sed, mi
Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
Vivamus mollis. (<ol><li>)

Pellentesque condimentum nisl vitae sapien. Phasellus convallis leo id tortor. In eu felis in neque placerat auctor. Phasellus in mi at wisi congue ultrices. Etiam viverra. In vel sem sed augue dignissim aliquet. Integer nisl quam, vestibulum nec, consectetuer eu, sodales at, ligula. ~~Pellentesque habitant morbi tristique senectus~~^[1] et netus et malesuada fames ac turpis.

Notes

[1] Une petite note expliquant la suppression et qui permet de tester aussi cette mise en forme particulière.