Le thème que nous utilisons, dKret, permet de personnaliser assez facilement son blog. En effet, Jörn Kretzschmar, le développeur, l’a conçu de telle sorte, qu’il est possible de fabriquer sa propre feuille de style. Cela permet, notamment, de conserver sa présentation lors des mises à jour du thème.
Mise à jour le
Les modifications proposées ici ont été utilisées avec les versions de dKret3 jusqu’à la version 2.4. A partir de la version 2.5, l’architecture de dKret3 a été modifiée
Quelques exemples de blogs utilisant dKret
Quelques blogs utilisant dKret sont mentionnés sur la page dKret : des blogs utilisant dKret.
Téléchargez nos feuilles de styles
Si vous voulez utiliser nos feuilles de style ou si vous souhaitez vous en servir comme point de départ pour personnaliser la vôtre, téléchargez-les !
La feuille de style de Lise pour dKret3 version 2.0 (compatible jusqu’à WordPress 2.6)
La feuille de style de Lise pour dKret3 2.4 (pour WordPress 2.7)
Mise à jour le 20 décembre 2008
dKret3 depuis la version 2.1 prend en compte les modifications de WordPress 2.7 mais devrait être compatible avec WordPress 2.6.
La feuille de style de Yin-Yin
Téléchargez la feuille de style de Yin-Yin.
PREMIERE PARTIE PAR LISE
Les options déjà proposées
En standard, dKret permet déjà une certaine personnalisation.
Il est par exemple possible
- de choisir un entête personnalisé,
- de montrer une image d’entête aléatoire,
- d’afficher ou non les fils RSS dans la barre de menu,
- d’afficher ou non des sous-menus, et de choisir le nombre de niveaux affichés,
- ou de choisir un des styles proposés : une barre latérale, à droite ou à gauche, deux barres latérales, aucune barre latérale, petite police, affichage de la page à la taille de l’écran,…
Les feuilles de styles
La présentation du thème est défini dans le fichier style.css. Les différents styles proposés se trouvent dans le répertoire …/themes/dkret3/schemes/
La façon la plus simple de commencer à travailler avec les feuilles de styles est de démarrer depuis une feuille de style existante. Pour ma part, j’ai commencé avec la feuille fluidelity.css que j’ai renommée lise_fluidelity.css ; c’est le nom qui apparaît dans la liste de choix dans la page des options du thème.
Adaptation à la taille de la fenêtre
Les lignes qui suivent sont celles du thème fluidelity.css et permettent que l’affichage du blog s’adapte à la fenêtre du navigateur. Essayez de réduire ou agrandir la vôtre, vous verrez !
ae5e7add8d30cd6b560eb32242f1a294000
Petite police
Puis j’ai recopié le fichier Small_Fontsize.css de façon à afficher une petite police :
ae5e7add8d30cd6b560eb32242f1a294001
Soulignement et couleur des liens
Afin que les liens soient soulignés en permanence et qu’ils s’affichent dans la couleur souhaitée, j’ai inséré le code suivant :
ae5e7add8d30cd6b560eb32242f1a294002
Couleur du titre et du sous-titre du blog dans l’entête
ae5e7add8d30cd6b560eb32242f1a294003
Titre des articles et des pages
J’ai choisi de changer la couleur des titres de niveaux 2, 3 et 4 ; j’ai laissé par défaut le changement de couleur au passage de la souris (a:hover).
ae5e7add8d30cd6b560eb32242f1a294004
Couleur des menus et sous-menus
Pour écrire ce bout de code, je me suis inspirée de ce qu’avait fait yin-yin qui a bien voulu m’envoyer son script, notamment pour l’affichage du fond « vert pointillé » des sous-menus.
J’ai créé une image que j’ai nommée stri.gif que j’ai placée dans le répertoire lise_images, lui même se trouvant dans le dossier wp-content/themes/dkret3/schemes/.
ae5e7add8d30cd6b560eb32242f1a294005
La barre latérale
Là encore, je me suis largement inspirée de ce qu’avait fait yin-yin. En effet, l’affichage par défaut des widgets manquait de clarté, j’ai donc souhaité des séparations plus nettes.
J’ai réutilisé mon image stri.gif, et choisi de l’encadrer de lignes pointillées.
ae5e7add8d30cd6b560eb32242f1a294006
J’ai choisi de présenter de la même façon le widget qui affiche les pages et les sous-pages :
ae5e7add8d30cd6b560eb32242f1a294007
Pied-de-page
J’ai également changé la couleur des liens dans le pied de page :
ae5e7add8d30cd6b560eb32242f1a294008
La barre inférieure (au dessus du pied-de page)
De la même façon que pour la barre de menu, je peux modifier la barre inférieure.
ae5e7add8d30cd6b560eb32242f1a294009
Icônes du calendrier et de l’auteur
J’ai modifié les couleurs, la taille et la bordure du petit éphéméride qui s’affiche devant chaque billet du blog, et supprimé, sur la proposition de Christine, la petite icône présente devant le nom de l’auteur.
Les commentaires sont saisis sans lettre accentuée ni apostrophe.
ae5e7add8d30cd6b560eb32242f1a294010
Par défaut, le fichier style.css affiche une icône devant le nom de l’auteur, icône pour laquelle est indiquée une url. Je précise donc dans mon code qu’il n’y a pas d’url. Cette icône est précédée d’un espace, que je supprime également, en mettant le dernier chiffre de padding à zéro.
Style de puce
Pour répondre au commentaire de Gene, voici comment modifier les puces, de façon que les deux niveaux disposent d’icônes différentes. Les images sont copiées dans le répertoire wp-content/themes/dkret3/schemes/image/lise-images.
La modification des puces affecte l’ensemble du blog, et donc l’affichage des articles liés si on utilise des mots-clés (image de droite) mais pas l’affichage dans la barre latérale ou celle située au-dessus du pied-de-page.
ae5e7add8d30cd6b560eb32242f1a294011
DEUXIEME PARTIE PAR YIN-YIN
J’ai créé un dossier dans le répertoire schemes afin d’y placer mes images. Nous avons choisi, Lise comme moi-même, de nommer ce répertoire avec notre nom de « blogmaster ».
ae5e7add8d30cd6b560eb32242f1a294012
Vous pourrez y placer toutes les images servant à la personnalisation de votre thème.
Fond du blog
Pour personnaliser le fond d’écran du blog il faut ajouter le code suivant :
ae5e7add8d30cd6b560eb32242f1a294013
Ne pas oublier de télécharger votre image de fond dans le répertoire « image ».
Fond du contenu du blog
Pour modifier le fond du contenu du blog il faut ajouter le code suivant:
ae5e7add8d30cd6b560eb32242f1a294014
Barre de menu
Pour changer l’image de fond ou la couleur de la barre de menu ajouter le code suivant :
ae5e7add8d30cd6b560eb32242f1a294015
Police et couleur de police
Pour la police et la couleur principale de police il faut ajouter le code suivant :
ae5e7add8d30cd6b560eb32242f1a294016
Il faut noter que les polices sont « appelées » dans l’ordre de votre saisie (ne pas oublier d’ajouter des apostrophes de chaque côté du nom de la police si celui-ci contient plusieurs mots).
Zone méta
Pour modifier le fond de la « zone meta » (cadre sous les articles de la page d’accueil et lors de l’affichage d’un article seul) il faut ajouter le code suivant :
ae5e7add8d30cd6b560eb32242f1a294017
Ajout de Lise
Pour ma part, j’ai modifié la zone méta comme ceci :
ae5e7add8d30cd6b560eb32242f1a294018
On peut également choisir une couleur unie pour le fond :
ae5e7add8d30cd6b560eb32242f1a294019
Bordure des images
Pour personnaliser les bordures de vos images ajouter le code suivant :
ae5e7add8d30cd6b560eb32242f1a294020
Pour masquer la bordure il faut saisir « border:0px ».
Alignement et bordure des smileys
L’alignement par défaut d’un smiley (émoticon en français) se fait en bas par rapport à la ligne de base du texte.
J’ai choisi de les aligner au milieu verticalement en insérant le code suivant :
ae5e7add8d30cd6b560eb32242f1a294021
Bloc de citation
Le bloc de citation (traduction Française de « blockquote » ) défini par défaut dans le thème dkret3 me paraissait un peu trop « grossier ». J’ai donc modifié l’image des guillemets et la couleur de fond.
- Pour les articles et les pages ajouter le code :
ae5e7add8d30cd6b560eb32242f1a294022
- Pour les commentaires ajouter le code :
ae5e7add8d30cd6b560eb32242f1a294023
Footer
J’ai modifié le fond du pied de page en y ajoutant une image :
ae5e7add8d30cd6b560eb32242f1a294024
J’ai également changé la couleur et la “décoration” des liens dans le pied de page :
ae5e7add8d30cd6b560eb32242f1a294025
Pour changer la couleur de police du nom du blog dans le pied de page :
ae5e7add8d30cd6b560eb32242f1a294026
Ajout de Lise (18 septembre 2008)
Pour réduire la taille de la police du pied-de-page :
ae5e7add8d30cd6b560eb32242f1a294027
C’est ce que j’ai effectué dans la page consacrée au Forum, car j’ai utilisé comme point de départ la feuille de style sans barre latérale No-sidebar, qui est plus étroite.
Evidemment, ce ne sont que quelques exemples que nous vous invitons à essayer sur une base de test, en vous inspirant du fichier style.css mentionné plus haut.
A venir :
- Astuces et bidouilles
Ecrit par Yin-Yin - Site
Ultra-trail, Vélo, Vtt & WordPressovore...
bonsoir,
j’ai essayé moi-même sur plusieurs thèmes. tu dois regarder quel comment est géré ton fond de page dans ta feuille de style CSS. au tout début de ta feuille de style, tu as ça:
body
(accolade)
margin: 0 auto;
padding: 0;
font-size: 62.5%; /* Resets 1em to 10px */
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
background-color: #22333E; /*c’est ici que tu changes la couleur*/
color: #000000;/* et la*/
il se peut que tu aies aussi [un background-image: url(‘images/mon-fond-depage.png’) repeat x-y;]
dans ce cas il faut changer l’adresse de l’image entre les guillemets et la remplacer par celle que tu souhaites.
mais attention, si ton fond de page est géré par une méthode offset ca ne marchera pas…
va voir du coté du blogueur masqué…
bon wordpress
Je n’ai pas cherché 😉
Entre Google qui déclarait mon blog malveillant, le changement d’hébergeur, la correction des liens après l’utilisation d’une adresse provisoire, la traduction de Simple:Press Forum et autres mises à jour,… je ne suis pas sûre de trouver le temps d’y jeter un oeil.
Le mieux serait de poser la question au développeur du thème, la réponse serait sans doute beaucoup plus rapide !
cela signifie que pour l’instant pas d’idée sur la présentation de menus en dkret 2.8 ??
cdlt Gilles
Bonjour,
j’ai un petit soucis que je n’arrive pas à résoudre
je suis en train de basculer mon site en wp 2.8 et dkret dernière evrsion et malgré l’import ok, les menus ne s’affichent plus pareil
la colonne est réduite ce qui implique un retour à la ligne de stitre, ce que je n’avais pas avant
je ne trouve pas l’info dans la feuilled e style pour revenir à une présentation plus fluide comme il exiatait précédement
savez vous ou trouver cette info et la modifier
j’ai remarqué que cur votre site, vous aviez gardé une présentation de smenus comme je le souhaite
cdlt Gilles
Effectivement, lorsque la dernière version de dKret a été publiée, mon blog était encore hébergé chez 1&1. La nouvelle version provoquait des erreurs à l’affichage, j’ai donc conservé dKret 2.7.1 et mon sous-thème adapté à cette version. C’est pourquoi les menus sont affichés comme précédemment.
Il y a un moment que je n’ai pas touché aux feuilles de style.
En fonction de la version de dKret que tu utilises, les fichiers images sont à placer dans un répertoire qui devrait se nommer
wp-content/themes/dkret3/schemes/
ou
wp-content/themes/dkret3/library/layouts
Il faut de toute façon que le chemin indiqué dans la feuille de style corresponde au répertoire dans lequel se trouve l’image.
Si tu indiques dans la feuille de style un répertoire lise_images, il faut créer le répertoire lise_images et y placer l’image. Le chemin est alors
wp-content/themes/dkret3/schemes/lise_images
ou
wp-content/themes/dkret3/library/layouts/lise_images.
Bonjour Lise , nous venons de passer à WordPress 2.8 et dkret3 v3 , encore merci pour tes fichiers de langues
Couleur des menus et sous-menus :
« J’ai créé une image que j’ai nommée stri.gif que j’ai placée dans le répertoire lise_images, lui même se trouvant dans le dossier wp-content/themes/dkret3/schemes/. »
Il faut certainement placer ce dossier ailleurs mais je n’ai pas encore touvé ou ? J’ai essayé dans wp-content/themes/dkret3 /library/ layouts (près de la feuille de style personnalisée en fait) mais ça ne fonctionne pas ! Si jamais tu trouves…