Documentation

Voici quelques informations qui vous aiderons à personnaliser votre thème “Enjoy”.

Le menu principal

Le menu principal est composé d’un lien vers la page d’accueil du blog et de liens vers des pages Wordpress.

Par défaut, le thème “Enjoy” pointe vers des pages (page_1, page_2 …) qui n’existent pas dans votre base de données. Pour que les liens vers les items “page_1″, “page_2″ … fonctionnent, il faudra créer dans la partie administration les “pages” Wordpress correspondantes.

Pour personnaliser votre menu, vous devez modifier les trois fichiers suivant :

• enjoy/header.php
• enjoy/js/mesFonctionsJQuery.js
• enjoy/style.css

Libellés et liens hypertextes du menu

Dans le fichier header.php, recherchez l’expression “header_mainMenu”. Le menu se trouve dans une liste de type “ul”. Rajoutez dans cette liste les libellés de vos menus et les liens hypertextes correspondants. Attention au nombre et à la longueur des libellés, vous aurez peut être besoin d’adapter la feuille de style CSS “style.css” pour obtenir une mise en page correcte.

Curseur sur le menu actif

La balise “body” possède un “id” et/ou une “class” qui lui est attribuée dynamiquement par un petit script php présent dans le fichier header.php.

• Si page d’accueil affichée : body id=”home”
• Si article, archive, recherche affichés : body id=”blog”
• Si page WP affichée : body id=”page” class=”(title de la page)”
• Si rien de tous cela : body id=”(title de la page)”

Pour que le curseur reste sur l’item actif du menu principal, il faut :

- Modifier le fichier “style.css” au niveau du commentaire /* ———- Styles pour marquer le menu principale en fonction de la rubrique où on se trouve ———–*/
- Si les items du menu principal correspondent à des liens sur des “pages” Wordpress, il faut que le libellé des items et le titre des pages dans la partie administration soient identiques (la case n’est pas importante)
- Modifier le fichier “header.php” au niveau de la classe css “header_mainMenu” et remplacez dans le nom des classes de la balise html “a” par les libellés désirés. (ex. class=”mainColumn_mainMenu_VotreItem”)

Le menu secondaire

Pour personnaliser votre menu, vous devez modifier les trois fichiers suivant :

• enjoy/sidebar.php
• enjoy/js/mesFonctionsJQuery.js
• enjoy/style.css

Pour que le curseur reste sur l’item actif du menu secondaire, il faut :

- Modifier le fichier “style.css” au niveau du commentaire /* ———- Styles pour marquer le menu secondaire en fonction de la rubrique où on se trouve ———–*/
- Modifier le fichier “js/mesFonctiondJQuery.js” en remplaçant les mots “rubriques”, “mois”, “tags”, “liens” par les libellés que vous désirez utiliser.
- Modifier le fichier “sidebar.php” en adaptant le nom des classes en utilisant vos libellés.

L’image d’en tête

Pour personnaliser l’image d’en tête, il faut modifier les fichiers :

• enjoy/img/bg_header.jpg
• enjoy/style.css

L’image bg_header.jpg (984×302 px) est affectée en arrière plan de la classe CSS “container”. Attention, si vous utilisez des images .png transparentes, vous devez rajouter “-trans” à la fin du libellé de votre image pour que le javascript IE7.js gère la transparence sous IE6.

Insérer votre logo

Vous pouvez insérer votre logo dans le fichier “header.php” en retirant le commentaire de la ligne de code que vous trouverez en recherchant l’expression “votre_logo”

La taille de l’image du logo est prévue pour une dimension de 290×145 px afin qu’elle s’intègre correctement dans le template. Vous pouvez utiliser un logo avec une dimension différente à condition de modifier le fichier style.css en conséquence pour ne pas perturber le positionnement des éléments.

Attention, si vous utilisez des images .png transparentes, vous devez rajouter “-trans” à la fin du libellé de votre image pour que le javascript IE7.js gère la transparence sous IE6.

La baseline

La baseline ou slogan correspond au libellé que vous avez saisi dans le champ “Slogan” présent dans votre espace d’administration Wordpress sur l’onglet Options>Général. Il vous suffit de la modifier en prenant garde au nombre de caractères que vous utiliserez. La mise en page est prévue ici pour un affichage de la baseline sur une ou deux lignes. Modifiez le fichier style.css si vous voulez utiliser une baseline plus longue.

L’image du chapeau des articles

Le chapeau des articles est accompagné d’une vignette qui illustre tous les articles du blog. Cette image doit faire impérativement 300×225 px. Pour l’insérer à votre article, il suffit dans la page d’édition de votre article d’utiliser les champs personnalisés :

• clés = vignette
• valeur = url de votre image

Les images dans les articles

A l’intérieur des articles, insérez vos images de façon classique avec une balise “img”. Ne dépassez pas une largeur de 600 px.

Le chapeau des articles

Le chapeau des articles est détecté par une fonction JQuery du fichier mesFonctionsJQuery.js qui repère le premier paragraphe de l’article. Recherchez l’expression “Mettre le début de l’article …” pour retrouver les lignes de codes correspondantes.

Cette fonction insère dynamiquement la classe css “chapeau” à ce paragraphe pour l’afficher en gris clair et gras lorsque l’on affiche l’article en entier.

N’oubliez donc pas de passer une ligne dans votre éditeur après la balise Wordpress “more” pour que Wordpress affecte une balise de paragraphe “p” à votre chapeau.

Pour désactiver l’habillage du premier paragraphe, mettez en commentaire le code correspondant dans le fichier mesFonctionsJQuery.js.

Afficher la grille en arrière plan

Si vous voulez voir la grille qui a été utilisée pour la mise en page de ce thème, vous pouvez l’afficher en arrière plan de votre page en retirant le commentaire :

/* .container { background: url(’/css/blueprint/lib/grid.png’); } */

… du fichier header.php.

Designs de démonstration

Pour voir plusieurs exemples de design pour ce thème, rendez-vous sur le portfolio de mon site www.pixenjoy.com