PapyClic - Design

PapyClic - Design

Personnalisation de la partie Bas

dizperso-facile.gif

footer2-0.png

 

La partie "Bas" de toutes les pages du blog, se compose d'un bloc nommé "footer" ou la CLASS".diz-bas" (nouveau sélecteur), qui contient un menu horizontal nommé "barre_bas".
Dans ce menu certains liens sont obligatoires, donc vous ne devez pas les supprimer.

 

► Pour le bloc "footer" ou ".diz-bas", le sélecteur de la règle de CSS est :

.diz-bas 

Propriétés : valeurs
fond couleur : background-color : #codecouleur;
fond image : background-image : url("adressedelimage");
bordure taille/style/couleur : border : 1px solid #codecouleur;

 

 

► Dans le bloc menu "barre_bas", il y a des liens, pour gèrer le style des textes de ces liens, le sélecteur de la règle de CSS est :

#barre_bas a 

Propriétés : valeurs
couleur : color : #codecouleur;
surlignage : background-color : #codecouleur;
taille : font-size : 15px
police : font-family : nomdelafamille;

 

 Vous pouvez mettre des couleurs différentes au survol de la souris.

 

#barre_bas a:hover 

Propriétés : valeurs
couleur : color : #codecouleur;
surlignage : background-color : #codecouleur;

 

 

 

 Le code des 3 règles :

 

.diz-bas{
  background-color : #DD8B42;
  border : 1px solid #000000;
}
#barre_bas a{
  background-color : #FFFFFF;
  color : #000000;
}
#barre_bas a:hover{
  background-color : #000000;
  color : #FFFFFF;
}

 

 footer1-1.png

 

 

 

► Mettre un fond image, dans cet exemple une image texture qui doit être répétée.

 

footer 

Propriétés : valeurs
fond couleur : background-color : #codecouleur;
fond image : background-image : url("adressedelimage");
Répétition image : background-repeat: repeat;
bordure taille/style/couleur : border : 1px solid #codecouleur;

 

 

 

.diz-bas{
background-color : #DD8B42;
background-image: url("http://static.blog4ever.com/2012/06/704535/artfichier_704535_3634426_201404123945918.gif");
background-repeat : repeat;
border : 1px solid #000000;
}
#barre_bas a{
background-color : #FFFFFF;
color : #000000;
}
#barre_bas a:hover{
background-color : #000000;
color : #FFFFFF;
}

 

footer1-2.png

 

Si vous avez une image aux dimensions du bloc "footer" 960*120, vous avez simplement à modifier la valeur de la propriété >>> background-repeat : no-repeat;

 

 

Cliquez pour ouvrir une page où vous pourrez tester le code CSS >>>lien
Et même le modifier si vous connaissez le CSS.

 

 

 Les codes ci-dessus sont à coller dans la zone de personnalisation du CSS de l'assistant du RapidDesign.

 

Espace de gestion → VOTRE BLOG → Design du blog → CSS/HTML → CSS personnalisé.

CSS-footer.png

 

Si votre espace de gestion est ouvert, cliquez sur : lien

 

N'oubliez pas, après visualisation dans l'assistant de cliquer sur "Appliquer" en bas de la colonne.

 

 


Si cet article vous a été utile, un petit J'aime me fera plaisir.

N'hésitez pas un mettre un commentaire, si vous avez apprécié cet article, mais également si vous n'êtes pas pleinement satisfait. 
Pour plus d'explications poster sur le forum

 

 

HautPrécédente



11/12/2014
11 Poster un commentaire

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 149 autres membres