Ce qui suit ne concerne pas le choix d’un thème WordPress, mais la recherche des styles CSS dans votre thème actuel. Souvent, un problème se produit dans une partie de la mise en page ou du modèle. Par exemple, il y a une bordure que vous ne voulez pas entre le menu de la barre latérale et le reste de la page. Vous chassez et chassez mais vous ne trouvez aucune référence à la bordure. Et maintenant ?

Jouer le détective CSS

Commençons par jouer au détective CSS. Vous savez où se trouve le problème, mais vous n’arrivez pas à le trouver. Dans l’exemple ci-dessus, vous devez faire la chasse à une bordure errante.

Commencez par examiner attentivement une page générée (ou page de test) et recherchez un texte d’identification dans la barre latérale, près de la bordure errante. Disons que, listé dans la barre latérale, vous avez un titre d’article appelé « Tout sur Harry ». Vous savez que vous trouverez ce titre dans votre barre latérale lorsque vous visualisez le code source de la page.

Pour visualiser le code source d’une page, montez dans la barre de menu de votre navigateur et choisissez VIEW > PAGE SOURCE ou VIEW > SOURCE. Une page s’affichera avec le code source de la page.

Utilisez votre outil de détective pratique, Ctrl+F, pour activer votre recherche. Tapez « all about harry » et cliquez sur FIND. Il y a fort à parier que, à moins que vous n’ayez les mots « tout sur harry » dans votre message, cela vous mènera à la première apparition de la phrase « tout sur harry » qui se trouve probablement dans votre barre latérale. Si ce n’est pas le cas, appuyez à nouveau sur FIND jusqu’à ce que vous ayez trouvé la bonne phrase dans la bonne zone.

Si vous utilisez Internet Explorer, une autre méthode consiste à utiliser la barre d’outils de développement d’Internet Explorer, qui vous permet de voir et de sélectionner visuellement les éléments, les ID et les classes de la page. Elle affiche les éléments dans la hiérarchie de la page, leurs attributs CSS, et peut délimiter les DIV, les tableaux, etc. Vous pouvez télécharger la barre d’outils depuis Microsoft.

Une fois que vous avez trouvé la phrase, il est temps de jouer au détective CSS. Recherchez dans le code de la phrase « Tout sur Harry » l’une des deux choses suivantes. Cela ressemblera à l’une ou l’autre de ces choses, en utilisant des mots comme sidebar, menu, ou sidecolumn:

<div>or<div class="sidebar">

C’est la section principale qui contient votre menu de barre latérale. Vous avez trouvé le premier suspect.

Maintenant, ouvrez votre fichier style.css et faites une autre recherche pour sidebar ou quel que soit le nom résultant que vous avez découvert. Il est généralement identifié de deux façons :

#sidebaror.sidebar

Regardez dans les styles sous ces sélecteurs CSS et voyez s’il y a une mention de bordure, ressemblant souvent à quelque chose comme ceci :

#sidebar {position: relative; float: right; width: 170px; color: blue; font-size: 90%; border-right: solid 1px blue; }

Voilà votre bordure, la criminelle ! Si c’est le coupable, supprimez la référence à la bordure et vous êtes bon pour partir.

Si ce n’est pas le cas, la chasse continue.

Parfois, le coupable est celui que vous soupçonnez le moins. Peut-être que la bordure n’est pas causée par le suspect évident, la barre latérale, mais par la section de contenu. Retournez au code source de la page générée et recherchez les premiers mots de votre message. Regardez au-dessus de cela pour quelque chose comme:

<div>

Il pourrait être appelé content, page. post, maincolumn, widecolumn, ou avoir un autre alias, mais il devrait être le conteneur CSS qui contient vos informations de post. Maintenant, retournez à la feuille de style et vérifiez s’il y a une bordure dans cette section.

Frisquer la feuille de style

Si tout cela échoue, le détective CSS n’abandonne jamais la chasse. Retournez dans la cachette de tous les styles, le fichier style.css, et fouillez-le en effectuant une recherche pour « border » et regardez attentivement chaque suspect. Notez le nom d’ID du sélecteur, comme sidebar, menu, content et page, puis retournez à la source de la page générée pour voir si cela pourrait être votre coupable.

Vous pouvez également sélectionner le suspect de bordure que vous avez trouvé sur la feuille de style et le couper-coller dans un fichier TXT (comme Notepad) qui reste simplement ouvert sur votre ordinateur comme un bloc-notes scratch. Notez le nom du sélecteur dont vous l’avez retiré, comme ceci : 

Removed border: solid 2px green from #content

Enregistrez ensuite le fichier style.css modifié et téléchargez-le sur votre site. Actualisez le billet de test généré et voyez si la bordure indésirable a disparu. Si c’est le cas, vous avez trouvé le coupable. Si ce n’est pas le cas, retournez au Bloc-notes et copiez le code et remettez-le dans votre style.css dans la section « contenu », remettant les choses là où vous les avez trouvées.

Si vous trouvez votre coupable, faites une petite danse, couinez et applaudissez, et rendez les autres méfiants et nerveux quand ils sont autour de vous. Le détective CSS résout un autre crime CSS !

Plus d’aide au dépannage CSS

  • CSS Correction des bogues de navigateur
  • Dépannage CSS

.