1. Choisir la structure

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 :

  1. choisir la structure parmi les quatorze proposées
  2. l'activer via la feuille de style
  3. é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

capture-1A.png

  • 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.

capture-1B.png

  • 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.

capture-1C.png

  • 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

capture-2A.png

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

capture-2B.png

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

capture-2C.png

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

capture-2D.png

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

Trois colonnes

capture-3A.png

  • 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

capture-3B.png

  • 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

capture-3C.png

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

capture-3D.png

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

capture-3E.png

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

capture-3F.png

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

Quatre colonnes

capture-4A.png

  • 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%.

Commentaires

1. Le mardi 3 février 2009, 20:17 par Teka

Mmm ça à l'air vraiment pratique :)
Moi qui pensais devoir me prendre la tête a coder mon design, je vais juste l'adapter avec ce kit :)
Je suis impatient qu'il sorte ^^, bonne chance, et merci d'avance pour tout ce travail :D

2. Le mercredi 2 septembre 2009, 17:38 par mart

merci pour ce tuto, petite erreur qui m'a fait perdre un bon 10min :
De base le css utilisé est layout-2D.css et non layout-2C.css (j'avais fait un ctrl-F, et je m'étonnais de ne pas trouver ^^)