CSS WordPress : modifier les couleurs de son blog #1

theme-wordpress

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 :

#page {
  1. width: 700px;
  2. }
  3.  
  4. #header {
  5. width: 700px;
  6. height: 200px;
  7. }
  8.  
  9. #content {
  10. float: left;
  11. width: 400px;
  12. }
  13.  
  14. #footer {
  15. width: 700px;
  16. height: 200px;
  17. }
  18.  
  19. # sidebar {
  20. float: right;
  21. width: 300px;
  22. }

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 :

#header {
  1. background-color: red;
  2. }

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 :

#page {
  1. width: 700px;
  2. }
  3.  
  4. #header {
  5. width: 700px;
  6. height: 200px;
  7. }
  8.  
  9. #content {
  10. float: left;
  11. width: 400px;
  12. }
  13.  
  14. #footer {
  15. width: 700px;
  16. height: 200px;
  17. }
  18.  
  19. # sidebar {
  20. float: right;
  21. width: 300px;
  22. }
  23.  
  24. body {
  25. background-color: black;
  26. }
  27.  
  28. #header {
  29. background-color:red;
  30. }
  31.  
  32. #content {
  33. background-color: white;
  34. }
  35.  
  36. # sidebar {
  37. background-color: yellow;
  38. }
  39.  
  40. #footer {
  41. background-color: red;
  42. }

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//
  1.  
  2. #header {
  3. background-color:red;
  4. }
  5.  
  6. #header h1 a{
  7. color: white;
  8. }
  9.  
  10. #header p {
  11. color: white;
  12. }

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

#content h2 a{
  1. color: red;
  2. }
  3.  
  4. #content h2 a:visited{
  5. color: red;
  6. }
  7.  
  8. #content h2 a:hover{
  9. color: black;
  10. }
  11.  
  12. .post_content a{
  13. color: red;
  14. }
  15.  
  16. .post_content a:visited {
  17. color: red;
  18. }
  19.  
  20. .post_content a:hover{
  21. color: black;
  22. }

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

Partager :
  • Facebook
  • Twitter
  • del.icio.us
  • email
Tags : | | |

Publié le 14 novembre 2008 dans wordpress | 9 933 lectures

Ces billets pourraient vous interesser...


23 commentaires

  • Elisabethh

    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

    Bonjour Elisabethh,

    tu fais bien de me le dire ;)

    Je prépare ça certainement en fin d’après-midi

  • Elisabethh

    Alors là…Une telle réactivité m’émeut.
    Merci David.

  • David

    fait ! ;)

  • haroldstan

    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

    Bonjour haroldstan, je vois que tu as trouvé la solution en parcourant ton blog, c’est cool ;)

  • haroldstan

    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

    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

    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

    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

    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

    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

    Wow ! ça c’est du rapide !!
    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 ;) Mais si tu as une idée, je suis preneuse !

  • David

    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

    Si je trouve la solution, je viendrai l’expliquer ici ;)
    Merci de tes réponses !

  • Yo

    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

    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

    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

    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

    Bonjour Miss BB,
    tu pourrais m’en dire plus, me donner l’url de ton blog ?

  • arpia

    Bonjour,
    J’aimerai mettre un background-image différents par page, est ce possible et si oui comment fait-on ?
    Merci beaucoup

  • arpia

    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

    pourquoi le code que je viens de mettre n’apparait pas !?

Laissez un commentaire