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 blog, présentation, titres des articles, liens).
Retournons sur Tableau de bord->Apparence->Editeur de thème->feuille de style (style.css). Et notre feuille de style doit ressembler à ci-dessous :
-
width: 700px;
-
}
-
-
#header {
-
width: 700px;
-
height: 200px;
-
}
-
-
#content {
-
float: left;
-
width: 400px;
-
}
-
-
#footer {
-
width: 700px;
-
height: 200px;
-
}
-
-
# sidebar {
-
float: right;
-
width: 300px;
-
}
1- la couleur de fond : la balise background-color
On utilise la balise « background-color » pour donner une couleur à notre fond de page, à un bloc, à du texte ou du lien. Par exemple, nous voulons que notre header (entête) soit rouge. Nous allons écrire dans notre feuille de style :
-
background-color: red;
-
}
Dans notre exemple de départ, je vais indiquer dans ma feuille de style un fond de page noir, une entête rouge, une sidebar jaune, un footer rouge et un content blanc. Voici le code ajouté à ma feuille de style de départ :
-
width: 700px;
-
}
-
-
#header {
-
width: 700px;
-
height: 200px;
-
}
-
-
#content {
-
float: left;
-
width: 400px;
-
}
-
-
#footer {
-
width: 700px;
-
height: 200px;
-
}
-
-
# sidebar {
-
float: right;
-
width: 300px;
-
}
-
-
body {
-
background-color: black;
-
}
-
-
#header {
-
background-color:red;
-
}
-
-
#content {
-
background-color: white;
-
}
-
-
# sidebar {
-
background-color: yellow;
-
}
-
-
#footer {
-
background-color: red;
-
}
2. Le header
Maintenant que nous avons donné des couleurs à nos blocs, occupons nous du titre de notre blog ainsi que de sa présentation. Le titre du blog et l’intitulé son situé dans le header. Chacuns à une balise propre. <h1> pour le titre et <p> pour la petite ligne de présentation. Pour donner une couleur au titre, on utilise « color ». Comme le titre du blog est un lien par défaut, nous allons traiter directement la partie concernant les liens. Voyons directement ce que cela donner dans notre feuille de style :
-
-
#header {
-
background-color:red;
-
}
-
-
#header h1 a{
-
color: white;
-
}
-
-
#header p {
-
color: white;
-
}
Nous avons donc un header avec un fond rouge, le lien du titre en blanc et la ligne de présentation en blanc.
3. Le bloc content
Dans cette partie, apparaissent principalement les articles (single.php) et les pages (page.php) de notre bloc. Dans un article ou une page, nous avons un titre (généralement avec un lien par défaut), du texte, et des liens. Insérons une nouvelle rubrique dans notre feuille de style qu’on nommera par exemple : LIENS
-
color: red;
-
}
-
-
#content h2 a:visited{
-
color: red;
-
}
-
-
#content h2 a:hover{
-
color: black;
-
}
-
-
.post_content a{
-
color: red;
-
}
-
-
.post_content a:visited {
-
color: red;
-
}
-
-
.post_content a:hover{
-
color: black;
-
}
Nous avons indiqué que nous désirons les liens des articles en rouge avec un roll’over noir en utilisant H2 dans content. Nous avons ajouté « .post content » pour les liens de nos articles. En effet, cela va servir à différencier les liens des metadata (par exemple, date, tags, catégorie) situés généralement en plus petit sous le titre. Je m’arrête là, histoire déjà de digérer un peu les choses. Je vous invite à tester sur d’autres partie de votre blog, même si vous vous plantez ce n’est pas grave, bien au contraire. Comme on dit, c’est en faisant des erreurs que l’on comprend mieux. Dans le prochain billet, on parlera de la couleur du texte, des titres de la sidebar et du footer (texte et liens). Voilà, à bientôt! David
31 comments
Elisabethh says:
déc 11, 2008
Bonjour, je guette, je guette mais je ne vois toujours pas arriver ton article sur comment modifier la couleur de la police dans son blog WordPress…Je serais très intéressée d’avoir cette info technique, car dans mon blog je trouve la police beaucoup trop claire.
Merci pour tes articles très intéressants pour des non-pros comme moi…
David says:
déc 11, 2008
Bonjour Elisabethh,
tu fais bien de me le dire
Je prépare ça certainement en fin d’après-midi
Elisabethh says:
déc 11, 2008
Alors là…Une telle réactivité m’émeut.
Merci David.
David says:
déc 15, 2008
fait !
haroldstan says:
oct 21, 2009
Bonjour,
tout d’abord merci d’éclairer les débutants kom comme moi via ton blog!
Je fais actuellement mon blog, j’ai changé le fond pour le blog mais malheureusement ce fond se répète également quand on consulte les articles. je vous laisse visualiser pour mieux comprendre mes propos. http://letsbuzzit.com/blog
Je voudrais que le fond de l’article soit tout blanc. comment faire?
D’avance merci pour vos réponse!!
David says:
oct 31, 2009
Bonjour haroldstan, je vois que tu as trouvé la solution en parcourant ton blog, c’est cool
haroldstan says:
oct 31, 2009
salut david!
et non je n’ai toujours pas trouvé la solution! il y a toujours les cadres photos de la page d’accueil qui apparaissent sur les pages d’article!!!
ex: http://letsbuzzit.com/blog/2009/10/envie-de-tuer-un-ami/
Certainement qqch à faire dans le css!! mais quoi??? please help!! lol
David says:
oct 31, 2009
Hello Harold, non tu n’as pas changé l’image de fond, elle est toujours présente dans ta feuille de style (style.css) ici à cette ligne :
background:#FFFFFF url(http://letsbuzzit.com/uploads/bgbody.png) repeat-x scroll center top;
url de ton image de fond : http://letsbuzzit.com/uploads/bgbody.png
haroldstan says:
oct 31, 2009
Est-il possible d’avoir 2 background différents?? 1 pour la page d’accueil et 1 autres pour toutes les autres page (article, à propos….)
David says:
oct 31, 2009
Bonne question ^^ oui, mais si je devais le faire, je crérai 2 feuilles de styles : une pour ta home et une pour les autres pages et donc avec pour chacune un background différent
Luciole says:
jan 18, 2010
Bonjour,
Je suis en train de fabriquer mon thème WordPress et je bloque sur la longueur de la sidebar et de la zone des articles. Je m’explique : j’ai une couleur de fond pour mon body, une pour la sidebar et les articles, mais je me suis aperçue que la sidebar ne va pas jusqu’au footer.
Je pense que je dois modifier la feuille de style, mais je ne sais pas comment…
Merci d’avance ! Et bravo pour ton blog, il est vraiment utile !
David says:
jan 18, 2010
Salut Luciole, c’est normal ce qui t’arrive. Je te conseille soit de diminuer le nombre d’article vus sur ton index via ton admin->réglages->lecture ou alors de mettre ta page de la même couleur que ta sidebar et indiquer une couleur pour la partie content (là où tu as tes articles)
Luciole says:
jan 18, 2010
Wow ! ça c’est du rapide !!
Mais si tu as une idée, je suis preneuse !
Merci David pour ta réponse. Certains thèmes ont la sidebar qui va jusqu’au footer, quelque soit le nombre d’articles. Mon thème actuel est comme ça : http://blog.loeildeluciole.com
Je préfèrerai trouver la solution parce que sinon, à moins d’avoir la même couleur en body et sidebar, il y aura forcément un moment où la partie article et la side bar ne seront pas de la même taille.
Je vais regarder les css de mon style actuel pour voir si je trouve
David says:
jan 18, 2010
Désolé, je ne vois pas comment on peut faire. Cette histoire m’intéresse, si tu trouves le problème, n’hésites pas à me le signaler
Luciole says:
jan 18, 2010
Si je trouve la solution, je viendrai l’expliquer ici
Merci de tes réponses !
Yo says:
jan 24, 2010
Salut,
J’aimerai que vous m’éclairiez sur un problème
Donc j’ai installé ce thème:
http://demo.smackthemes.com/?preview_theme=smack-tech
et je n’arrive pas à changer la couleur de la barre bleu où se trouvent les sections « home » « about » etc… que j’aimerai mettre en noir.
Voici le css de la page
http://benaze.free.fr/wp-content/themes/BR%20Theme/style.css
Merci.
David says:
jan 25, 2010
Salut Yo,
le background se trouve dans ta div#menu. Remplaces div#menu {float:left;height:48px;padding:0px;background: #246097 url(images/menu.jpg) repeat-x;width:100%;margin:0;} par div#menu {float:left;height:48px;padding:0px;background: #000000;width:100%;margin:0;}
Luciole says:
jan 25, 2010
Hello David,
Je n’ai pas vraiment trouvé de solution, mais le problème a l’air courant ! On peut créer une fausse colonne qui fait quelques pixels de hauteur, de la même couleur que la sidebar et on lui demande d’aller jusqu’en bas de la page.
Ce n’est pas la solution que j’ai choisie ! J’ai fait un dégradé de couleurs en fond de page et ma couleur du bas est la même que celle de mon background. Du coup, on ne voit pas que la sidebar s’arrête.
Bon, si jamais je veux change de couleurs ou si je veux mettre une image en fond, c’est embêtant… je me pencherai sur le problème au moment venu !
Bonne semaine !
Miss BB says:
fév 5, 2010
Bonjour,
je n’arrive pas modifier le CSS. Pourtant je change bien les codes couleur et j’enregistre la modification mais aucune n’apparit sur mon blog
David says:
fév 6, 2010
Bonjour Miss BB,
tu pourrais m’en dire plus, me donner l’url de ton blog ?
arpia says:
avr 25, 2010
Bonjour,
J’aimerai mettre un background-image différents par page, est ce possible et si oui comment fait-on ?
Merci beaucoup
blogityourself says:
fév 18, 2011
bien sûr que c’est possible, par contre, tu devras utiliser les conditions, genre si je suis sur le template single.php, mon bg aura telle image, etc… cherche du côté des conditional tags sur le codex wordpress
arpia says:
avr 27, 2010
Salut,
J’ai réussi à résoudre mon problème.
Dans le fichier header.php il faut rajouter
<body >
après il ne reste plus qu’à modifier le css
voila, sa peut aider certain
Bonne continuation
arpia says:
avr 27, 2010
pourquoi le code que je viens de mettre n’apparait pas !?
blogityourself says:
fév 18, 2011
parceque ^^
elise says:
fév 18, 2011
Bonjour
je n’arrive pas à trouver quel CSS je dois modifier pour changer la couleur de mon background, il y en a plein et aucun ne s’appelle background-color .. help?
blogityourself says:
fév 18, 2011
Elise cherche background et non background color dans la balise body
alice says:
nov 3, 2011
Bonjour David,
je viens de créer un blog pour une agence mais, tout d’abord j’ai mis un thème au blog et je n’arrive pas à revenir en arrière pour récupérer le blog par défaut, savez vous comment je peux faire pour arranger ça ?
Sinon, faut-il obligatoirement payer pour pouvoir customiser son blog, c’est à dire changer la couleur de la police, la taille etc..
Merci beaucoup d’avance ( si vous voulez me répondre par mail: alice.blard@gmail.com )
Alice
Clemence says:
mar 8, 2012
Bonjour, je viens de créer un wordpress, j’ai l’option CSS et j’aimerai changer la couleur « vert kaki » qui apparaît lorsque je fais défiler les menus! comment faire? et surtout comment faire pour connaître les noms des autres couleurs?
voici le lien :
http://esmsauvetageinfo.site90.net/
Cordialement
Clémence
coralieb says:
sept 24, 2013
Bonjour David
Merci pour cet article, j’ai mis à jour mon thème sous wordpress et dc j’ai tout perdu
Je dois tout recommencer. Bref je vouais remettre mes titres en typo Jenna sueregular, voici ce que j’ai mis dans ma feuille de style css :
body {
color: #555;
font-family: arial, sans-serif;
font-size: 14px;
-moz-transition: left .25s ease-in-out;
-webkit-transition: left .25s ease-in-out;
transition: left .25s ease-in-out;
position: relative;
left: 0;
}
a, h1, h2, h3, h4, h5, h6 {
color: #CC3366;
font-family: jenna_sueregular;
}
a:hover {
color: #000;
}
h1, h2, h3, h4, h5, h6 {
font-family: jenna_sueregular;
color: #CC3366;
font-weight: 400;
}
et j’ai également crée un dossier fonts ds mon ftp en y glissant les fichiers .eot . svg . woff .ttf et le stylesheet.css
et pourtant le changement ne se fait pas, ça fait 1 semaine que je cherche mais étant une débutante je galère, merci
Meryazel Cecile breant says:
nov 11, 2015
Bonjour David,
merci pour l’article.
tu y dis : « Dans le prochain billet, on parlera de la couleur du texte, des titres de la sidebar et du footer (texte et liens) »
mais je ne vois pas de suite. pourtant c’est ce qui m’interesse.
je voudrais changer des paramètres des liens de mes pages;
mon thème evolve est assez réglable. Je peux personnaliser la couleur des liens. je peux aussi paramétrer la taille de quasi toutes les police, content, widget, title, etc…
pour les liens je ne peux pas modifier la taille, seulement la couleur.
j’ai choisi pour le content une police de 16 px, mes liens ont la couleur que j’ai choisi mais sont plus petit que le texte du content et des widgets. je voudrais modifier ca;
je parcours la feuile de style CSS qui est sacrément bien rempli.
je ne trouve pas de taille noté près des mots « links « ;
ou est ce que je pourrais modifier ca ??
merci grandement de ton aide