Blog it yourself ! but with 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 {
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 :

#header {
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 :

#page {
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//
 
#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

#content h2 a{
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