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

David LOUIS

Directeur chez Webset, Organisme de formation professionnelle pour les métiers de la culture, du spectacle vivant, Consultant web 2.0, adepte du DIY et du Coworking

More Posts - Website - Twitter - Facebook

Articles similaires

  • CSS WordPress Débutant : couleur du texte15 décembre 2008 -- CSS WordPress Débutant : couleur du texte (17)
    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 cou...
  • Comment masquer le titre et la présentation de votre blog wordpress?16 janvier 2009 -- Comment masquer le titre et la présentation de votre blog wordpress? (26)
    Maj du 20 mars 2010 : une différente façon est présentée ici en vidéo Beaucoup de personnes désirent un thème avec une bannière cliquable pointant vers l'index dans l'entête de votre blog à la plac...
  • 3 livres pour améliorer son blog12 janvier 2009 -- 3 livres pour améliorer son blog (0)
    Je ne suis pas du genre à acheter beaucoup d'ouvrages mais j'ai décidé d'investir un peu dans des livres qui en valent, je pense, vraiment la peine. En effet, même s'il existe une multitude de ressour...