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 !
5c78d5581251bc63e51e9a46b95ddf63000
Petite police
Puis j’ai recopié le fichier Small_Fontsize.css de façon à afficher une petite police :
5c78d5581251bc63e51e9a46b95ddf63001
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 :
5c78d5581251bc63e51e9a46b95ddf63002
Couleur du titre et du sous-titre du blog dans l’entête
5c78d5581251bc63e51e9a46b95ddf63003
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).
5c78d5581251bc63e51e9a46b95ddf63004
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/.
5c78d5581251bc63e51e9a46b95ddf63005
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.
5c78d5581251bc63e51e9a46b95ddf63006
J’ai choisi de présenter de la même façon le widget qui affiche les pages et les sous-pages :
5c78d5581251bc63e51e9a46b95ddf63007
Pied-de-page
J’ai également changé la couleur des liens dans le pied de page :
5c78d5581251bc63e51e9a46b95ddf63008
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.
5c78d5581251bc63e51e9a46b95ddf63009
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.
5c78d5581251bc63e51e9a46b95ddf63010
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.
5c78d5581251bc63e51e9a46b95ddf63011
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 ».
5c78d5581251bc63e51e9a46b95ddf63012
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 :
5c78d5581251bc63e51e9a46b95ddf63013
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:
5c78d5581251bc63e51e9a46b95ddf63014
Barre de menu
Pour changer l’image de fond ou la couleur de la barre de menu ajouter le code suivant :
5c78d5581251bc63e51e9a46b95ddf63015
Police et couleur de police
Pour la police et la couleur principale de police il faut ajouter le code suivant :
5c78d5581251bc63e51e9a46b95ddf63016
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 :
5c78d5581251bc63e51e9a46b95ddf63017
Ajout de Lise
Pour ma part, j’ai modifié la zone méta comme ceci :
5c78d5581251bc63e51e9a46b95ddf63018
On peut également choisir une couleur unie pour le fond :
5c78d5581251bc63e51e9a46b95ddf63019
Bordure des images
Pour personnaliser les bordures de vos images ajouter le code suivant :
5c78d5581251bc63e51e9a46b95ddf63020
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 :
5c78d5581251bc63e51e9a46b95ddf63021
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 :
5c78d5581251bc63e51e9a46b95ddf63022
- Pour les commentaires ajouter le code :
5c78d5581251bc63e51e9a46b95ddf63023
Footer
J’ai modifié le fond du pied de page en y ajoutant une image :
5c78d5581251bc63e51e9a46b95ddf63024
J’ai également changé la couleur et la “décoration” des liens dans le pied de page :
5c78d5581251bc63e51e9a46b95ddf63025
Pour changer la couleur de police du nom du blog dans le pied de page :
5c78d5581251bc63e51e9a46b95ddf63026
Ajout de Lise (18 septembre 2008)
Pour réduire la taille de la police du pied-de-page :
5c78d5581251bc63e51e9a46b95ddf63027
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...
Bonjour Lise,
Mon souci était le suivant :
Les menus déroulants s’affichaient sous le sidebar de gauche, et donc étaient inaccessibles. Ubuntu 7 et firefox 2.
J’ai réglé le problème en passant à firefox 3.06, et en passant également à ubuntu version Hardy le héron.
Bonne journée
G
Merci 😉
Il faut remplacer les # par des .
soit
.menu li ul {
background:transparent url(lise_images/stri.gif) repeat scroll left top; /*premier sous-menu*/
}
au lieu de
#menu li ul {
background:transparent url(lise_images/stri.gif) repeat scroll left top; /*premier sous-menu*/
}
Couleur des menus et sous-menus :
/*couleur des sous-menus*/
#menu li ul {
background:transparent url(lise_images/stri.gif) repeat scroll left top; /*premier sous-menu*/
}
#menu li li ul {
background:transparent url(lise_images/stri.gif) repeat scroll left top; /*deuxième sous-menu*/
}
#menu li li li ul {
background:transparent url(lise_images/stri.gif) repeat scroll left top; /*troisième sous-menu*/
}
Le code indiqué fonctionnait pour la dKret3 2.21 mais ne fonctionne plus sur la dKret3 2.4 que nous venons d’installer. Peux-tu nous aider svp ?
Oui… merci Yin_Yin, mais j’en reste à WP_Syntax 😉
J’ai modifié aujourd’hui les balises de quelques pages du blog, je n’ai pas envie d’effectuer de nouvelles retouches !
Hello Lise!
Jette un p’tit coup d’oeil sur Syntaxhighlighter c’est pas mal pour le code et parfaitement intégré à dKret 😉 .
Biz @ peluche…
Hello Gene! Dans quelle partie de ton blog souhaites-tu différencier les catégories et sous-catégories?
Tu n’as pas tort… Cependant la balise « // » n’est pas gênante car en css ce qui n’est pas déclaré en bonne et due forme n’est pas interpreté donc invisible… Tu peux essayer avec d’autres caractères 😉 .
Voilou @ peluche…
Bonjour Lise
et encore merci
pour mes petites puces j’ai modifié dans le fichier .css que j’ai construit
/*puce différente selon la hierarchie des catégorie*/
.sidebar ul li, .bottombar-column ul li {
background: url(image/bullet_go.gif) no-repeat;
padding: 0 0 0 16px;
}
.sidebar ul ul li, .bottombar-column ul ul li {
background: url(image/Vert.gif) no-repeat;
padding: 0 0 0 16px;
}
.sidebar ul ul ul li, .bottombar-column ul ul ul li {
background: url(image/bullet_blue.gif) no-repeat;
padding: 0 0 0 16px;
}
et cela répond partiellement à mon problème. Je me rends compte que cela ne distingue pas suffisamment les catégories et sous carégories. Alors maintenant je cherche à gérer les titres de catégories, soit en gras soit en souligné.
Si tu as une idée elle m’intéresse. Merci encore.
Dans les aides que tu indiques les commentaires sont suffixés avec des //. Il faut que chacun pense soit à les enlever, soit à les encadrer de /* */.
Je m’y remets. A bientôt.
Gene
Merci Yin-Yin !
Ce tuto, c’est la grande classe !
Je vais tester tout ça et je te montrerai quand mon blog ressemblera à quelque chose.
A ,
Fred
J’en connais un qui va être content… Pas vrai FredT78? 😉
Regarde ici -> dKret : personnaliser un template (Yin-Yin)
J’espère qu’avec tout ça ton blog avance 🙂 J’attends de voir ça 😉
@ peluche…
Yin,
C’est super !
Ca me plait bien !
Bon, y’aura juste à changer la couleur grise de la police qui se retrouve sur fond noir, bien sûr, mais je suis très preneur de ta soluce !
Merci d’avance
Re-hello FredT78!
Regarde ici en cliquant sur le lien pour voir l’aspet que cela donne:
PAGE NGGALLERY SUR FOND NOIR
Si c’est ce que tu recherches je fais un tuto ce soir 🙂 .
@ peluche…
Hello FredT78. J’ai eu un peu de temps ce matin et j’ai réussi à affecter une classe « fond-noir » à la balise « #container » dans un template « dkret-template-nosidebar-fondnoir.php » que j’ai ajouté.
Le fond des pages devient bien noir mais le hic c’est que plein de petits éléments ont leur propre classe ce qui fait que l’apparence ne fait pas très « propre« .
je vais faire un article sur mon blog une fois que j’aurai trouvé la solution idéale 🙂 .
@ peluche…
Tu peux peut-être essayer avec un plugin comme Post Template.
Ce plugin permet de réaliser des modèles, que l’on peut ensuite utiliser pour des pages ou des billets.
Merci Yin-Yin pour ta réponse.
En fait, je voudrais tout simplement que mes pages contenant des galeries NextGen apparaissent sur un fond noir. Je comprends qu’il faut pour cela que toutes les pages de mon blog adoptent un fond noir…
Gene, je t’apporte la réponse un peu plus haut dans la page.
Attention, cependant, la modification des puces affecte l’ensemble du blog, et notamment l’affichage des articles liés si tu utilises des mots-clés.
Hello! J’apporte une information « rapide » pour te répondre Fred.
Il faut savoir que les fichiers de disposition (No_sidebar_page.css, etc…) ne sont là que pour modifier l’organisation des sidebar.
@ partir du moment ou tu actives un « scheme » personnel, celui-ci prend le pas sur toutes les autres feuilles de style (c’est le fonctionnement de dKret qui veut ça).
Ensuite si tu utilises le « scheme » par défaut c’est la feuille de style « style.css » du répertoire du thème qui est utilisée et reprends la priorité.
Je pense donc que tu dois affecter ta couleur de fond dans la feuille de style de ton modèle perso, à moins que ta demande sois plus précise encore.
Sinon pour personnaliser un élément précis il est plus simple de lui affecter une classe spécifique. Mais là il faut prendre le temps de créer un tuto dessus car cela nécessite de connaître tous les éléments sur le bout des doigts 😉 .
@ peluche…
Salut,
J’aimerais personnaliser le style de certaines pages seulement de mon blog. A la création d’une page, on a le choix entre quelques styles de pages, dont No_sidebar_page.
J’ai donc modifié No_sidebar_page.css en y incluant le code suivant, pour avoir un fond noir :
#container {
background: #000000; //modifier la couleur du fond du contenu du blog.
}
Hé ben ça marche pô : les pages que je crée ainsi sont comme les autres du blog (je suis en Fluidelity).
Merci d’avance de vos suggestions…
Hello! Je vais tenter d’y jeter un coup d’oeil d’ici demain soir…
Moi aussi je suis pas mal occupé 🙂
@ peluche…
Il faudrait rechercher dans le fichier style.css quelle image les puces utilisent.
Je n’ai pas trop le temps en ce moment de me plonger dans le code du fichier, peut-être Yin-Yin en a-t-il plus que moi ????
Merci beaucoup pour ton site.
J’aimerais distinguer les catégories et sous catégories par une
puce différente ou une police de caractères différente.
A bientôt de vous lire
A yin-yin,
En ce qui concerne notre collaboration, si tu as des dispositions dans le traitement des images, je t’invite à lire notre dernier échange avec J Kretzschmar, ça te donnera peut-être des idées 😉
Pour ma part, je me contenterai d’effectuer des liens vers des images, si je prends le temps de m’en trouver une plus sympa pour le calendrier, du genre de celle d’iCal.
Ce serait une excellente idée ! On gagnerait du temps !
De rien c’est avec plaisir!
Je vais probablement réaliser un glossaire avec les élément du style dkret et leurs références dans la feuille de style.
@ peluche… 🙂
Merci et bravo à yin-yin pour les derniers ajouts sur cette page, qui m’ont bien aidés.
J’ai pu notamment changer la couleur de fond du contenu du blog.
Mais il devient alors utile de changer la couleur :
– du texte des articles
– de fond de la zone qui indique « Publié dans … » à la fin de chaque article.
Heu… yin-yi, peux-tu indiquer à tout le monde comment on fait ?
Merci encore