WordPress : réglages CSS du thème Twenty Twelve
29 avril 2014
Le thème Twenty Twelve est un des thèmes les plus intéressants proposés par WordPress, qui a la particularité d’être en Html5. Mais il possède quelques aspects « pénibles » au niveau de la gestion des CSS.
clear:both pour h1, h2,
L’un des principaux problèmes que vous rencontrerez se situe au niveau de l’insertion des images au niveau des zones h1, h2,…, h6. Le texte du titre est alors « chassé » automatiquement au dessous de l’image.
A partir de l’interface d’administration WordPress, allez dans le menu Apparence -> Editeur. Pour modifier la feuille de style style.css, vous devez disposer des droits en écriture sur ce fichier qui se situe dans wp-content/themes/twentytwelve. Vous pouvez vous aider d’une interface graphique telle que FileZilla ou WinSCP si vous disposez d’accès distants en mode FTP ou SSH. Modifiez alors le code comme suit. Il s’agit de mettre la ligne clear:both en commentaire.
h1,
h2,
h3,
h4,
h5,
h6 {
/*
clear: both;
*/
}
Les césures
Le thème propose par défaut la coupure des mots à la fin des lignes. C’est particulièrement pénible. Là-encore, accédez au fichier wp-content/themes/twentytwelve/style.css à partir de l’interface d’administration de WordPress et mettez en commentaire les lignes faisant référence au mot hyphens. pour le style .site-content article.
.site-content article {
border-bottom: 4px double #ededed;
margin-bottom: 72px;
margin-bottom: 5.142857143rem;
padding-bottom: 24px;
padding-bottom: 1.714285714rem;
word-wrap: break-word;
/*
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
*/
}