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 !
/*Theme Name: dkret3 Userstyle: lise_fluidelity Description: Modele personnalise pour le theme dKret. Version: 1.0 */ div#wrapper { width: auto; max-width: 1100px; /* Largeur maximum du blog*/ } .access-rss { background: none; padding: 0; } .access-rss-comments { border-right: 1px solid #aaa; margin: 0 2px; padding: 0 2px 0 22px; } |
Petite police
Puis j’ai recopié le fichier Small_Fontsize.css de façon à afficher une petite police :
body { font-size: 0.8em; } #header { font-size: 1.1em; } .sidebar.column { font-size: 1em; } |
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 :
.entry-content a { text-decoration: underline; /*soulignement des liens*/ } a { color: #339900; /* couleur des liens*/ } |
Couleur du titre et du sous-titre du blog dans l’entête
#blog-title { font-size: 2.3em; padding: 15px 80px 0; color: #003300; } #blog-description { font-size: 1.5em; padding: 0 80px 0; color: #003300; } #header h1 a { font-size: 1.5em; color: #003300; } |
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).
h2, h2 a, h2 a:hover, h3, h3 a, h3 a:hover, h4, h4 a, h4 a:hover { color: #006699; } h3, h3 a, h3 a:hover { border-bottom: 1px dotted #006600; /*soulignement des titres de niveau 3 par une ligne pointillée*/ } |
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/.
/*couleur des liens*/ #menu a { color:#336666; } #menu a:hover { color:#00CCFF; } /*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*/ } |
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.
.sidebar h2, .bottombar-column h3, .sidebar h3, .widget_title, #wp-calendar caption { background:transparent url(lise_images/stri.gif) repeat scroll left top; border-top: 2px dotted #444; /*ligne pointillée en haut*/ border-bottom: 2px dotted #444; /*ligne pointillée en bas*/ margin: 15px 0 5px; padding:6px 0pt 6px 2px;/*pour placer le titre du widget dans un cadre*/ } |
J’ai choisi de présenter de la même façon le widget qui affiche les pages et les sous-pages :
#pages { background:transparent url(lise_images/stri.gif) repeat scroll; border: 2px dotted #444; margin: 15px 0 0; padding: 7px 7px 0; } |
Pied-de-page
J’ai également changé la couleur des liens dans le pied de page :
#footer a { color: #339933; } |
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.
div#bottombars { background: transparent url(lise_images/stri.gif) repeat scroll; /*image de fond de la barre inferieure*/ border-top: 1px dotted #9CC; /*ligne superieure en pointillé*/ } |
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.
.entry-calendar-date { border: 1px dotted #9CC; /* bordure du calendrier */ color: #363; /* couleur du mois*/ font-size: 0.9em; /*petite police du calendrier */ } .entry-calendar-date .entry-calendar-day { color: #C33; /* couleur du jour */ } .entry-calendar-date .entry-calendar-year { color: #363; /* couleur année */ } .post .author, .entry-meta .author { background: url(none); /* suppression icône auteur */ padding: 0 0 0 0px; /*suppression espace avant nom auteur*/ } |
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.
#content ul li { background: url(lise_images/bullet_go_bleu.gif) no-repeat 0 1px; /*premier niveau*/ padding: 0 0 0 16px; } #content ul ul li { background: url(lise_images/bullet_sub_bleu.gif) no-repeat 0 1px; /*deuxième niveau*/ padding: 0 0 0 20px; } |
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 ».
.../themes/dkret3/schemes/lise_images/ et .../themes/dkret3/schemes/yin-yin_images/ |
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 :
body { padding: 15px 0 15px 0; /* Ajouter un espace en haut du blog.*/ background: url(yin-yin_images/fond.gif); /* Image de fond personnnalisée*/ background-attachment:fixed; /* Pas de défilement du fond*/ } |
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:
#container { background: transparent url(nom_images/votre_fond.gif); /*modifier l'image de fond du contenu du blog. */ } ou #container { background: #BBBBBB; /*modifier la couleur du fond du contenu du blog. */ } |
Barre de menu
Pour changer l’image de fond ou la couleur de la barre de menu ajouter le code suivant :
#access { background: transparent url(nom_images/votre_nav.gif) repeat-x; /*modifier l'image de fond de la barre de menu.*/ border-bottom: none; /*supprime le soulignement de la barre de menu.*/ } ou #access { background: #BBBBBB; /*modifier la couleur de fond de la barre de menu.*/ border-bottom: none; /*supprime le soulignement de la barre de menu.*/ } |
Police et couleur de police
Pour la police et la couleur principale de police il faut ajouter le code suivant :
{ color:#474747; /* Couleur principale de police.*/ font-family:'Lucida grande','Lucida Sans Unicode',Verdana,Geneva,Arial,Sans-Serif; /* Liste des polices.*/ } |
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 :
.entry-meta, #now-reading-statistic { background:transparent url(images/fond.gif) repeat scroll left top; /* Image ou couleur de fond de la zone.*/ border-top:1px solid #BBBBBB; /* Couleur et style de la bordure supérieure.*/ border-bottom:1px solid #BBBBBB; /* Couleur et style de la bordure inférieure.*/ } |
Ajout de Lise
Pour ma part, j’ai modifié la zone méta comme ceci :
.entry-meta, #now-reading-statistic { background:transparent url(lise_images/meta.gif) repeat scroll left top; /*image de fond*/ border-bottom: 1px dotted #9CC; /*ligne inférieure en pointillé*/ border-top: 1px dotted #9CC; /*ligne supérieure en pointillé*/ } |
On peut également choisir une couleur unie pour le fond :
.entry-meta, #now-reading-statistic { background:#CFC; /*couleur de fond*/ border-bottom: 1px dotted #9CC; /*ligne inférieure en pointillé*/ border-top: 1px dotted #9CC; /*ligne supérieure en pointillé*/ } |
Bordure des images
Pour personnaliser les bordures de vos images ajouter le code suivant :
/* bordure des images */ .image, .entry-content img, img.alignleft, img.alignright, img.aligncenter, .entry-gallery-image img { border:1px solid #BBBBBB; /* Epaisseur et couleur*/ padding: 2px; } |
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 :
/* alignement et bordure des smileys */ .entry-content .wp-smiley, .wp-smiley { vertical-align:middle; /* Smileys alignés verticalement au milieu du texte*/ border: 0 !important; /* Aucune bordure*/ } |
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 :
/* Blocs de citation dans les articles et les pages */ blockquote { background:#FBFBFB url(yin-yin_images/guillemet.gif) no-repeat scroll left top; /* Couleur et Image de guillemets personnalisés*/ border:1px solid #EBEBEB; display:block; font-size:0.9em; margin: 5px 15px; padding: 5px 20px; } |
- Pour les commentaires ajouter le code :
/* Blocs de citation dans les commentaires et adaptation au plugin "WP Ajax edit comment" */ #comments blockquote, #live-preview blockquote { background:#FBFBFB url(yin-yin_images/guillemet.gif) no-repeat scroll left top; /* Couleur et Image de guillemets personnalisés*/ border:1px solid #EBEBEB; display:block; font-size:0.9em; margin:5px 30px 10px 0pt; padding:5px 10px 5px 17px; } |
Footer
J’ai modifié le fond du pied de page en y ajoutant une image :
#footer { background: url(yin-yin_images/nav.gif) repeat-x; /* Image de fond du footer.*/ } |
J’ai également changé la couleur et la “décoration” des liens dans le pied de page :
#footer a { color: #109DD0; } #footer a:hover { color:#109DD0; text-decoration:underline; } |
Pour changer la couleur de police du nom du blog dans le pied de page :
#copyright { color: #EEEEEE; /* Couleur du titre du blog dans le footer.*/ } |
Ajout de Lise (18 septembre 2008)
Pour réduire la taille de la police du pied-de-page :
#footer { font-size: 90%; } |
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