dKret : utiliser le sous-thème Illumini

Comme nous l’avions indiqué dans la page dKret : créer une feuille de style, le thème dKret est facilement personnalisable.

Mise à jour le

Cette page est en cours de rédaction…

Personnaliser son thème avec les feuilles de styles fournies

De base, il est possible de personnaliser l’entête, de choisir parmi les différentes feuilles de style.

Par défaut, le répertoire dKret3 est installé dans le dossier wp-content > thèmes. Pour l’activer, il faut aller dans Apparence > Thèmes et cliquer sur la vignette représentant le thème souhaité.

Jörn, le développeur de dkret, a créé deux sous-thèmes, Illumini et Illuminidi. Pour les activer, il suffit de les placer dans le répertoire wp-content > thèmes et de les choisir dans le panneau Apparence > Thèmes. Ces deux sous-thèmes ont besoin de dKret pour fonctionner, ils en reprennent quelques éléments.

Dans chacun de ces répertoires, dkret3, Illumini ou Illuminidi se trouve un fichier style.css. C’est ce fichier qui définit le thème. Il existe un sous répertoire schemes qui comprend plusieurs fichiers.

Dans l’exemple ci-dessous, j’utilisais le thème dKret, en cliquant sur la vignette Illumini, j’ai activé ce dernier. Une fois le thème sélectionné, dans Apparence > options Illumini, on peut choisir l’un des fichiers situés dans le répertoire schemes.

Les feuilles de styles fournies

Voilà quelques captures d’écran montrant les différentes personnalisations possibles.

Créer sa propre feuille de style

On peut également, à partir des fichiers proposés construire sa propre feuille de style. Cela permet, lors de la mise à jour du thème, de conserver sa personnalisation sans avoir besoin de tout recommencer !

Suite à un commentaire que j’avais laissé sur la page de Jörn, le développeur du thème, celui-ci m’indique qu’il apporte encore quelques modifications à la version définitive de dKret3 2.4. Les exemples ci-dessous pourront donc être modifiés dans les prochains jours… En vous rendant sur son blog, vous verrez par exemple que le survol par la souris des menus déroulants donne un nouvel effet !

Adaptation à la taille de la fenêtre

Comme pour dKret, j’ai pris comme point de départ une feuille de style existante, Sidebar-Right-Fluid, qui comme son homologue pour dKret, permet un affichage du blog qui s’adapte à la fenêtre du navigateur.

f22bf7^e35828f76042c60df418c9fd11000

Pour ceux qui souhaitent en savoir davantage sur les dimensions de la page, notamment sur la configuration de la barre latérale, et qui parlent allemand, je vous invite à vous reporter aux explications que Jörn a mises en ligne sur ce sujet.

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 :

f22bf7^e35828f76042c60df418c9fd11001

Titre des articles et des pages

f22bf7^e35828f76042c60df418c9fd11002

Barre de menu en haut du blog et barre du pied-de-page

Comme pour dKret, j’ai créé un répertoire images dans le dossier wp-content/themes/illumini/schemes/, dans lequel j’ai placé une image meta.gif.

f22bf7^e35828f76042c60df418c9fd11003

Menu et sous-menu

Dans cette version de dKret, le code a changé, nous utilisions précédemment #menu, il faut maintenant utiliser .menu.

f22bf7^e35828f76042c60df418c9fd11004

Couleur des titres de la barre latérale

f22bf7^e35828f76042c60df418c9fd11005

Widget affichant les pages dans la barre latérale

f22bf7^e35828f76042c60df418c9fd11006

Citations

f22bf7^e35828f76042c60df418c9fd11007

Couleur de la bande meta (bande affichée sous les articles du blog)

f22bf7^e35828f76042c60df418c9fd11008

Modification du pied de page

Les indications mentionnées dans le pied de page, comme le copyright, sont celles définies dans le fichier footer.php de dKret qui se trouve dans wp-content/themes/dkret. Voir à ce sujet la page dKret : insérer un copyright dans le pied-de-page.

f22bf7^e35828f76042c60df418c9fd11009

Style de puce de niveaux 1 & 2

Pour personnaliser les puces, j’ai dû mettre en commentaire 4 lignes du fichier style.css qui se trouve dans le répertoire wp-content/themes/illumini/ ; ces lignes étaient destinées à ne pas faire apparaître de puce. Il est vraisemblable que pour cette partie, des modifications seront apportées par Jörn dans la prochaine version.

f22bf7^e35828f76042c60df418c9fd11010

J’ai placé deux fichiers images dans le répertoire wp-content/themes/illumini/schemes/lise_images de façon à personnaliser les puces. Après avoir mis en commentaires les lignes ci-dessus, les puces par défaut sont celles du thème dKret, que vous pouvez voir ici, dans la barre latérale ; avec le code ci-dessous les puces apparaissent comme ceci :

• première puce de niveau 1
• deuxième puce de niveau 1
  • première puce de niveau 2
  • deuxième puce de niveau 2

f22bf7^e35828f76042c60df418c9fd11011

Couleur des commentaires de l’auteur d’un article

Lorsque l’auteur de l’article répond à des commentaires, ses propres commentaires s’affichent dans une couleur distincte.

Pour changer cette couleur, j’ai dû modifier le fichier style.css qui se trouve dans le répertoire wp-content/themes/illumini/, car mes changements ne sont pas prises en compte quand je les insère dans ma feuille de style.

f22bf7^e35828f76042c60df418c9fd11012

Ascenseur pour l’insertion de code

Lorsqu’on présente du code dans un article, comme je le fais ici, il arrive que les lignes de code soient plus longues que la largeur de la page. Il est donc nécessaire de disposer d’un ascenseur horizontal pour lire le code entièrement.

f22bf7^e35828f76042c60df418c9fd11013

Ajout de code pour adapter quelques plugins à ma feuille de style

Correction de l’affichage de WP-Syntax, qui colorise les lignes de code, comme vous le voyez ici

f22bf7^e35828f76042c60df418c9fd11014

Modification de la feuille de style pour NextGEN Gallery, pour l’assortir à mes couleurs 😉

f22bf7^e35828f76042c60df418c9fd11015

Modification de la feuille de style pour PageBar, pour l’assortir à mes couleurs 😉

f22bf7^e35828f76042c60df418c9fd11016

A suivre… 😉

Ecrit par Lise - Site