Quelques modifications apportées au thème K2 sous WordPress

(Mise à jour le 20 septembre 2008 à 16:59)

K2 désigne par apocope, cas particulier de la figure de rhétorique appelée métaplasme 🙂 Kubrick 2 (version 1.0-RC7), un thème pour WordPress, classé désormais parmi les standards. C’est celui que j’utilise sur La dormeuse blogue. J’apprécie la verticalité de ses lignes, et, plus généralement, son style sans esbroufe. J’avais toutefois envie, depuis quelque temps déjà, d’aller vers plus de sobriété encore, d’alléger, d’éclaircir. Je m’en suis expliquée ici même dans Le blog que je souhaiterais.

 

 

Interface de La dormeuse blogue avant les modifications que je décris ci-dessous

 

J’ai donc entrepris d’alléger l’interface de mon blog, et, pour cela, d’apporter quelques modifications au thème K2. Il s’agit de modifications cosmétiques, qui intéressent le style CSS. Codée en PHP, la structure proprement dite demeure, bien sûr, hors de ma portée. Et c’est très bien ainsi. De toute façon, si l’on doit tout changer, autant changer de thème !

Pour apporter des modifications à un thème, il faut intervenir sur la feuille de style. On accède à cette dernière sur le Tableau de bord, via l’onglet Apparence/Editeur de thème. Il suffit de sélectionner et d’ouvrir, dans la colonne « Fichiers du thème », le fichier ‘style.css’. Il vaut mieux réaliser d’abord une copie de sauvegarde de ce fichier, puis coller une seconde copie dans un éditeur de code et travailler sur cette copie en local avant de valider les modifications en ligne.

Comme je ne suis pas experte en CSS, je me suis servie de CSS Edit (réservé aux machines Mac OS), pour lire et mieux comprendre la feuille de style de K2. L’usage de CSS Edit, en effet, facilite grandement cette compréhension : le code se trouve assorti d’une coloration syntaxique ; les lignes sont numérotées ; la colonne de gauche comporte, en regard du code, un sommaire bien utile. Sur ce sommaire, on peut repérer les principales articulations du code et rejoindre ainsi sans se perdre les lignes sur lesquelles on veut opérer une modification.

La feuille de style de K2 demeure tout de même assez touffue. Le code n’est pas toujours assorti de commentaires. Ceux-ci manquent justement là où on en voudrait. « Où sont-elles, dans le code, les icônes que je voudrais supprimer ? »

Il faut tester à l’aveugle parfois, modifier un bout de code sans être sûr que c’est le bon, et regarder ensuite ce qui s’affiche sur le blog… On a ainsi des surprises ! D’où, encore une fois, la nécessité de tester en local.

J’ai voulu, entre autres, modifier le background, l’image, la couleur du titre/sous-titre, et celle du menu de l’en-tête de mon blog ; modifier le background du body (le « corps » du blog), situé sous le header (la « tête » du blog) et modifier la couleur de la page (colonne principale et colonnes latérales) qui s’affiche sur le body ; supprimer les bordures de la colonne centrale ; modifier la couleur des titres et des meta-titres de la page ; supprimer le soulignement des liens ; supprimer aussi certaines icônes que je trouvais inutiles et visuellement encombrantes ; ajouter un background-image dans le footer (pied de page). J’ai réalisé progressivement ces modifications. J’en suis pour le moment moyennement satisfaite. J’envisage d’autres modifications.

Je montre ci-dessous, assorties des numéros de ligne, les parties du code sur lesquelles je suis intervenue. Les numéros de ligne sont ceux, non modifiés, de la version 1.0-RC7 de K2. Lorsque je reproduis un bout de code, j’indique chaque fois s’il s’agit du code original ou du code modifié par mes soins.

 

 

1. Modification du header (en-tête)
Le thème K2 installe sur le Tableau de bord, dans l’onglet Apparence, une option « Image d’en-tête personnalisée ». On peut s’en servir pour changer directement l’image d’en tête et/ou la couleur du titre/sous-titre du blog. Je l’ai déjà fait, du moins pour l’image. Concernant le changement de couleur du titre/sous-titre, le sélecteur de couleur fourni par K2 ne fonctionne pas sur mon MacBook. J’ai donc modifié la feuille de style pour tester dans le code la couleur du titre/sous-titre. Finalement j’ai gardé le blanc pour le titre/sous-titre. En revanche, j’ai changé la couleur du menu « A la Une », « Sommaire », « Recherche », etc.

– Section Headings » (l. 226) : color du titre et du sous-titre du header (l. 238-242)

cd1^e89aba1cc1913a51802c6^e3f94935000

Code modifié

text-decoration : style du link (lien dynamique).
none : sans soulignement

– Section Page Structure (l. 52) : background du header (l. 96-101)

cd1^e89aba1cc1913a51802c6^e3f94935001

Code modifié

background : ici, fond de couleur, dont on peut se contenter, ou qui apparaît avant l’image d’en-tête, lorsqu’on charge la page.
#ffffff : code HTML du blanc.

– Section Main Menu in Header (l. 160)  : modification de la couleur du menu (l.181-204)

cd1^e89aba1cc1913a51802c6^e3f94935002

Code modifié

L’entrée ‘ul.menu li a’ indique une première couleur, celle qu’on voit lorsque la page s’affiche.
L’entrée ‘ul.menu li a:hover’ indique une seconde couleur, celle que l’on voit hover, au survol de la souris.
L’entrée ‘ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover, ul.menu, li.current_page_ancestor a, ul.menu li.current_page_ancestor a:hover’ indique que la seconde couleur doit se substituer à la première, au survol de la souris.

 

2. Modification du body (background et page)

– Section « Page Structure » (l. 52) : background du body (l. 54-59)

cd1^e89aba1cc1913a51802c6^e3f94935003

Code modifié

– Section « Page Structure » (l. 52) : border (bordure) de la page (colonne principale) (l. 73-82)

cd1^e89aba1cc1913a51802c6^e3f94935004

Code modifié

border : none; pas de bordure

 

3. Modification de la couleur des titres des pages et des articles (h2) et modification des meta-titres (h3, h4)

Concernant h3 et h4, la feuille de style de K2 comporte le commentaire suivant :
H3 is entry headlines. H4 is comments and replyform headlines (l. 286).
H3 désigne donc le titre des petites entrées qui figurent sous le titre des articles, par exemple : Published by … on … in … and …. Comment Edit.
H4 désigne les titres dans la sidebar et le titre du formulaire de réponse dans les commentaires.

– Section Headings (l. 226) : h2, h2 a, h2 a:visited (l. 439-444)

cd1^e89aba1cc1913a51802c6^e3f94935005

Code modifié

 

4. Suppression du soulignement des liens et modification de la couleur des liens

– Section Links (l. 794) : #primary a:hover, #primary a:visited:hover, .secondary a:hover, .secondary a:visited:hover, .entry-content a:visited (l. 796-812)

cd1^e89aba1cc1913a51802c6^e3f94935006

Code modifié

text-decoration: none : pas de soulignement
color: #1fb0^e0 : couleur des titres h2 ; on voit dans le code que cette couleur ne change pas au survol.
color: #ff4700 : couleur des liens à l’intérieur des articles.

 

5. Suppression des icônes ‘time.png’ et ‘tags_blue.png’

– Section Headings (l. 224) : .meta-start (l. 460-463)

cd1^e89aba1cc1913a51802c6^e3f94935007

Code original

L’icône ‘time.png’ s’affiche en première position sous le titre des articles. Elle est suivie de l’entrée « Published by… ». Je la trouvais inutile et visuellement encombrante. C’est pourquoi je l’ai supprimée.
Pour cela, j’ai tout simplement supprimé dans le code ci-dessus la ligne ‘background: url(‘images/time.png’) left top no-repeat;’.

Mais attention, la suppression de l’icône crée un blanc à l’endroit où s’affichait l’icône, de telle sorte que, sous le titre de l’article, la ligne « Published by … on … in … and …. Comment Edit » semble désormais commencer en retrait. Pour corriger cet effet, j’ai modifié la ligne ‘padding: 2px 0 2px 20px ;’ en ‘padding: 2px 0 2px 0px ;’. Cette modification supprime l’effet de retrait.

– Section Headings (l. 224) : .meta-start (l. 460-463) ; .entry-tags (l. 500-505)

Je trouvais l’icône ‘tag_blue.png’ redondante, puisqu’elle est suivie du mot « Tags ». Je l’ai donc supprimée aussi.

cd1^e89aba1cc1913a51802c6^e3f94935008

Code original

J’ai supprimé le background-image. J’ai modifié la ligne ‘padding: 0 0 0 20px;’ en ‘padding: 0 0 0 0px;‘, là encore pour éviter l’effet de retrait sous la ligne d’entrées ‘Published by … on … in…
J’ai conservé en revanche les icônes ‘comment.png’ et ‘pencil.png’, qui ne gênent pas en bout de ligne et qui ont une valeur incitative.

5. Ajout d’un background-image dans le footer

Section Footer (l. 760) : attributs du footer (l. 760-766)

cd1^e89aba1cc1913a51802c6^e3f94935009

Code original

J’ai ajouté au code ci-dessus une ligne supplémentaire, qui renseigne sur le background :

cd1^e89aba1cc1913a51802c6^e3f94935010

Code modifié

J’ai installé par ftp le fichier image ‘bwk22.jpg’ dans le répertoire /wp-content/themes/k2/images/headers. Dans la ligne ‘background: #ffffff url(images/headers/bwk22.jpg) bottom center no-repeat;’ j’ai donc indiqué l’url (adresse) de l’image de la façon suivante : ‘url(images/headers/bwk22.jpg)’.
Les attributs ‘bottom center no-repeat’ indiquent que l’image doit s’afficher tout en bas, au centre, et qu’elle ne doit pas être répétée.

 

 

Interface de La dormeuse blogue après les modifications décrites ci-dessus.

 

J’espère que cette petite promenade dans le code du thème K2 sera utile à certains de nos lecteurs.
Je recommande l’usage de CSS Edit qui facilite la navigation dans le code.
Conseil pratique : lorsque vous ne savez pas où se trouve ce que vous cherchez, par exemple l’icône qui précède l’entrée « Tags », ou tel ou tel ‘background’ que vous souhaitez supprimer ou changer, utilisez sous CSS Edit la fonction Find. Entrez le mot « tag » ou le mot « background » : le programme affichera pour vous, l’une après l’autre, chacune des lignes qui sont en rapport avec votre requête.

Ecrit par Christine - Site