Les tuto 2 Demolite

Blog tuto, aide à la création et au design des blogs et sites internet, Montage photo, trucs et astuces, logiciels gratuits...

29 novembre 2010

Mettre une bannière différente sur les pages de votre blog

Posté par Demolite - Dans la catégorie Canalblog
Tags : , ,

Commencez par ouvrir votre Feuille de style et descendez sur le bloc de votre bannière :

#topbar-logo {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none
    border-left-style: none;
    border-width: 1px;
    border-color: #910000;
    background: url("http://p1.storage.canalblog.com/12/44/255038/19315550.jpg") no-repeat 0% 0%;
    height: 150px;
    display: block;
}

Copiez ce bloc et collez-le juste en dessous de celui-ci, comme sur la capture :

Sans_titre_1


Ajoutez un "
1" à  #topbar-logo pour différencier les bannières :

#topbar-logo1

Puis coller l'adresse de la nouvelle bannière à la place de l'autre, si vous changez sa taille en hauteur, pensez à modifier le height: 150px;

Valider.

Ouvrez maintenant la page où vous voulez mettre cette nouvelle bannière, on va choisir Page d'un message pour cet exemple :

Sans_titre_2

Repérez la ligne du <body> et ajoutez le "1" au code <div id="topbar-logo"> ce qui va permettre d'afficher votre nouvelle bannière à la place de l'autre.

Voilà...

Pour mettre une autre bannière sur la Page de votre profil par exemple, faites la même opération, en créant un autre bloc #topbar-logo dans votre feuille de style, mais cette fois mettez ajoutez un "2" :

#topbar-logo2 {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none
    border-left-style: none;
    border-width: 1px;
    border-color: #910000;
    background: url("Adresse de votre nouvelle bannière") no-repeat 0% 0%;
    height: 150px;
    display: block;
}

et même chose dans la Page d'un profil sur la ligne du <body> ajoutez le "2" dans le code <div id="topbar-logo"> :

<div id="topbar-logo2">


Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici


« Accueil 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41