Premier point : ce billet s’adresse aux débutants. Nous allons voir tout simplement comment modifier la couleur du texte, les titres de la sidebar et le footer. Pour celles et ceux qui arrivent en cours, sachez que j’ai déjà rédigé quelques billets sur la feuille de style WordPress.
Retournons sur Tableau de bord->Apparence->Editeur de thème->feuille de style (style.css).
Pour donner une couleur globale à votre police (texte), vous allez insérer dans votre feuille de style :
-
background: white; (couleur de fond de votre blog)
-
color: black; (couleur du texte)
-
font-family: Arial; (type de police)
-
}
Ici, on indique que la couleur principale du texte sera noir. Cela veut dire que si vous n’indiquez pas la couleur du texte par exemple pour votre pied de page (footer.php), la couleur sera noir. Imaginons que nous voulons que le texte de notre footer soit rouge. Nous allons insérer dans notre feuille de style le code suivant :
-
-
#footer {
-
color: red;
-
}
Dans votre template footer.php, la balise <div id= »footer »> servira de relais à votre feuille de style.
Autre exemple : changer la couleur des titres de votre sidebar. Les titres votre sidebar sont généralement balisés par H2. Retournez dans votre feuille de style et chercher la partie Sidebar et indiquer la couleur rouge :
-
color: red;
-
}
Lorsque vous débutez, je vous conseille de faire le petit entraînement suivant : repérer un blog qui vous plaît. Récupérer sa feuille de style (l’URL est du type : http://monsite.com/wp-content/themes/Mon Theme/style.css) et inspirez-vous du thème.
Articles similaires
14 novembre 2008 -- CSS WordPress : modifier les couleurs de son blog #1 (31)
Dans l'article précédent, nous avons vu comment redimmensionner les différents blocs de notre blog WordPress.Aujourd'hui, nous allons voir comment modifier la couleur de nos blocs (fond, titre du bl...
13 novembre 2008 -- CSS WordPress : modifier la feuille de style pour déterminer les tailles de vos blocs (18)
En regardant dernièrement les statistiques de mon blog, je me suis aperçu que pas mal de requêtes concernaient la modification du CSS d'un blog WordPress. En d'autres termes, comment modifier la feu...
5 septembre 2008 -- Mon premier thème wordpress (0)
Et voilà aujourd'hui, j'ai réalisé mon premier thème pour Ragingyul.com. Des modifications dans les templates et le CSS, et le tour est joué ! ^^ Qu'en pensez-vous pour un premier jet ?...
17 comments
Elisabethh says:
déc 16, 2008
Merci David de ces éclaircissements.
Mais pourrais-tu -encore-préciser à la trèèès débutante que je suis, où exactement dans la feuille de style insérer
body {
background: white; (couleur de fond de votre blog)
color: black; (couleur du texte)
font-family: Arial; (type de police)
dans post content?
post entry?
ailleurs?
De plus dans mon thème, les couleurs sont en codes, j’ai un tableau pour les décoder, mais ça n’est pas très commode. Dois-je remettre la nouvelle couleur que je veux insérer en code aussi, ou puis-je juste écrire black?
Merci de ton aide et bonne journée à toi.
David says:
déc 16, 2008
Salut !
Peux tu déjà me donner l’adresse de ton blog pour que je puisse y jeter un oeil ?
Elisabethh says:
déc 16, 2008
mon blog c’est Des mots dans les Bulles
http://motsbulles.fr/blog/motsbulles
Merci et bonne soirée
Elisabethh
David says:
déc 17, 2008
Elisabethh, si tu veux, tu n’es pas obligé de mettre le code de ta couleur, tout dépend si tu veux des couleurs de base.
Exemple : tu veux du jaune, indique ‘yellow’, tu veux du rouge, indiques red, par contre, ne pas mettre le #.
Alors concernant où changer le code. Par exemple, tu veux une couleur noir pour le titre de tes articles. Repères déjà la classe, ici c’est ‘post-title’ et la balise, c’est H2. Donc, tu vas indiquer dans ta feuille de style :
/* Featured Post – Title */
#content .featured-post .post-title {
padding: 0 2px;
width: 624px;
border-bottom: 4px solid #dbdbdb;
color: #878787;
font: normal 11px Verdana, Arial, Sans-Serif;
}
#content .featured-post .post-title a {
color: #4891be;
text-decoration: none;
}
#content .featured-post .post-title a:hover {
text-decoration: underline;
}
#content .featured-post .post-title h2 {
color: #4a91be; (ICI BLACK)
font: normal 24px/30px « Trebuchet MS », Arial, Verdana, Sans-Serif;
padding: 0 2px;
}
Normalement, ça devrait marcher. Je te conseille de sauvegarder ta feuille de style sur un fichier.txt et faire plein de test, histoire de voir ce que cela donne. Je sais, c’est rébarbatif, mais c’est en essayant par toi même que tu comprendras
Elisabethh says:
déc 17, 2008
Merci beaucoup David, je vais essayer tout ça…
Pas facile de s’y retrouver pour quelqu’un comme moi qui, il y a 5 mois, surfait comme tout le monde sans plus, et maîtrisait le traitement de texte sous Word mais pas plus…
Déjà avoir fait crée mon blog sous WP et m’en dépatouiller je me jette quelques fleurs d’encouragement…Heureusement qu’il ya des bloggeurs charitables tels que toi!
Bonne journée à toi.
Elisabethh
David says:
déc 17, 2008
Mais de rien Elisabethh mais tu sais il y a plein de blogueurs sous wordpress charitables, c’est une vraie communauté
Et oui, je te félicite pour t’être jeter dans un blog wordpress, tu vas voir, au bout d’un certain temps, ça roule tout seul.
Bon courage !
Spirit of Wordpress #3 ! | le blogueur masqué says:
déc 18, 2008
[...] CSS WordPress Débutant : couleur du texte [...]
david says:
déc 23, 2008
Merci pour ton aide
Au cas où, j’oublie, je bookmark
David says:
déc 30, 2008
Salut David et bienvenue sur mon bloug !
CB says:
fév 9, 2009
Bonjour,
Pour avoir la main pour changer la couleur de fond du blog faut-il utiliser la version payante.
Merci
David says:
fév 9, 2009
Quelle version payante ? Je ne comprend pas ta question, tu peux détailler ta demande ?
alcidejet says:
mar 9, 2009
Bonsoir,
Pourriez-vous m’indiquer comment je peux changer la couleur et pourquoi pas le text-decoration de mes liens dans les commentaires ?
Dans l’attente, merci pour les services que vos post m’ont déjà rendu !
Alcidejet
David says:
mar 17, 2009
@alcidejet: tu peux m’indiquer l’url de ton blog ou site ?
alcidejet says:
mar 17, 2009
Le voici, mais j’ai un peu avancé dans mon apprentissage tant du PHP que de l’interface WordPress et je m’en sors un peu mieux…
encore quelques galère, mais je ne vais pas vous embettez avec ça ^^
merci bien
http://alterinformation.fr/wordpress/
David says:
mar 18, 2009
Ok mais juste pour info, pour modifier les couleurs et tout le design de tes commentaires, ça se passe ici dans ta feuille de style css :
#comments .comment {
background:#DEF7F8 none repeat scroll 0 0;
border-bottom:1px solid #DDDDDD;
border-top:1px solid #DDDDDD;
margin-bottom:10px;
overflow:hidden;
padding-bottom:5px;
width:670px;
}
#comments .comment .comment-avatar {
float:left;
padding:5px 7px;
width:50px;
}
#comments .comment .comment-content {
background:#FAFAFA none repeat scroll 0 0;
float:left;
margin:5px 5px 0 0;
padding:10px 15px;
width:570px;
}
#comments .comment .comment-content a {
color:#444444;
}
#comments .comment .comment-info {
color:#777777;
font-size:11px;
margin-bottom:5px;
}
#comments .comment .comment-info span {
-x-system-font:none;
font-family: »Trebuchet MS »,Helvetica,Arial,Geneva;
font-size:20px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin-bottom:5px;
padding-right:10px;
}
#comments .comment .comment-info a {
color:#555555;
text-decoration:none;
}
Nico says:
mar 18, 2011
Salut David,
Compliments pour ton blog !
Deux questions à l’expert : je tente de modifier l’aspect des titres utilisés dans l’éditeur (Titre 1, Titre 2, etc.) pour la rédaction des articles.
1. Y a-t-il moyen de faire en sorte que lorsque je choisis le format « Titre 1″ dans l’éditeur, mon titre présente les caractères suivants :
14 px et couleur bleu (par exemple) ?
Où dois-je modifier des choses ?
2. Comment récupérer la feuille .css d’un blog dont s’inspirer ?
Merci par avance pour tes précieux conseils.
Nico
VAL says:
déc 24, 2015
Bonjour,
j’ ai bien lu votre article, mais je n’ arrive toujours pas a changer la couleur du texte à l’ intérieur des widgets dans ma sidebar .( Mon thème est : MATCH wordpress )
Se serait vraiment très aimable de votre part si vous pouviez m ‘éclairer .
En vous remerciant
VAL
http://cookiesaddicte.com