decoblogchantalou42.blog4ever.com

Partie 2 - Changer la couleur de l'arrière-plan du titre

 

 

 

EXPLICATION N°2

 

 

On va changer la couleur de l'arrière-plan du titre. Pour trouver la couleur qui vous convient cliquez sur le lien ci-dessous

 

019ba.gif

 

 

Codes couleur HTML - Html Color Codes

 

 

 

Pour l'exemple, on va continuer dans le ton des bleus et la couleur sera donc identifiée par son code #2A047C

 

 

 

17.jpg

 

 

 

A présent que la couleur est choisie (#2A047C), on se rend sur l'espace de gestion de notre blog on clique sur :

 

 

1 - VOTRE BLOG

 

2 - Design du blog

 

 

et vous obtenez ce tableau sur le côté gauche de l'écran

 

 

blog 2 expl.jpg

 

 

3 - Cliquez sur "CSS/HTML"

 

 

Vous obtenez :

 

blog 2 expl2.jpg

 

 

 

4 - Cliquez sur "Modifier"

 

 

 

Vous accédez à une page blanche où on colle des codes. On va donc copier les codes concernant l'en-tête et les coller sur cette page (le code appelé diz-entete), ce qui donne l'exemple ci-dessous :

 

 

blog 2 expl3.jpg

 

 

 

 

5 - Vous copiez donc les codes ci-dessous

 

 

.diz-entete-image{
   height: 280px;
}


/* Alignement du titre du blog */
.diz-entete-titre {
   text-align: left;
}


.diz-entete {
background-color: #2A047C;  
}



#titre_lien {
   visibility: hidden;
}

 

 

 

Méthode :

 

 

a) en le sélectionnant du début jusqu'à la fin avec la souris, puis en appuyant en même temps sur les touches : CtrlC, vous faites ainsi un "copier" plus rapidement

 

 

b) allez vous positionner sur la ligne 1 de la page

 

 

c) vous faites un "coller" en actionnant en même temps les touches :  CtrlV

 

 

Il ne vous reste plus qu'à ne pas oublier de cliquer sur la touche 15.jpg en bas, à gauche pour valider votre travail

 

 

 

 

 

0RmPR-vmmJp_iqh6oIBIAGvGFMw.gif

 

 

 

 

Pour changer la couleur, changer le code couleur par celui de votre choix. Pour notre exemple on prend le code choisi en début d'article

 

2A047C

 

Ce qui donne :

 

.diz-entete {
background-color: #2A047C;  
}

        

 

 

Toujours penser à cliquer sur la touche 15.jpgaprès chaque modification c'est ce qui valide vos actions.

 

 

 

Et voilà le résultat

 

blog2-1.jpg

 

 

Prochaine étape, on va mettre aussi en bleu, la barre de navigation (partie se situant dessous l'image). Pour ce faire, rendez-vous à l'article suivant - Partie 3

 



01/08/2015
0 Poster un commentaire

A découvrir aussi


Ces blogs de Informatique & Internet pourraient vous intéresser

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 4 autres membres