Ma bannière en avancé, alors que je n'en avais pas avant.

Oui!!

Bon alors,

On s'est créé un gentil blog, en mode normal on s'est mis un beau titre, une toute belle explication, puis on a évolué, sommes passés en mode "avancé", avons ajouté des trucs de ci de là....
Et on veut ajouter une bannière parce que du coup ça ferait plus beau....

Heuuuuu oui, mais en mode avancé, il n'y a plus le choix de chargement du logo ou de la bannière,
- Diantre!! Mais où donc vais-je pour la charger, cette belle et nouvelle bannière?

Première étape,

Créer un nouveau message, qu'on sauvera en mode brouillon, pour pouvoir y retourner de temps en temps.

Et là, charger la photo (mais attention, pas par le traditionnel lien "d'insertion d'image", mais par l'insertion d'un fichier. Car.... la photo serait redimensionnée et ne correspondrait plus à la longueur de la bannière.

Ceci effectué, basculer en mode "html" [avec la touche <> ] et copier l'adresse url du document chargé.

Sauvegarder (publier en mode brouillon ne le rend pas accessible au public et permet de pouvoir récupérer au besoin l'adresse du fichier dans "mes documents" du blog).

Deuxième étape,

Editons donc nos fichiers de mise en page, et plus principalement la feuille de style

Etant donné que nous n'avions pas de bannière, le bloc #topbar a la propriété display: block; (afficher en bloc) mais ce n'est pas lui qui affiche la bannière en image, non allons donc remplacer block; par none;

Ensuite on recherche le bloc #topbar-logo qui lui affiche la bannière en image, on s'aperçoit que le height (hauteur de l'image) est à 0px et que le display est à none

nous allons intervenir à background (qui est le fond) et y coller l'url qu'on a copier après la couleur:

le lien sera pécisé par url(lien-de-l-image.jpg) suivi de no-repeat et de 0 0 (pour qu'elle ne se répète pas et qu'elle soit position en haut à gauche)
changer la hauteur de l'image height: hauteur-de-l-image-en-px;
et changer display: block;
un petit coup d'oeil qu'on a bien changer #topbar

on valide, et on jette un oeil sur le résultat

(réactualiser la page au besoin "[Ctrl] + [F5]")

Comments

[misscrapbooking]

Coucou :) je suis sur canalblog! et ça fait des heures que j'essaie de mettre une bannière! je suis en mode avancé!j'ai tout fait les changements que vous avez mentionné et toujours rien c'est blanc et je ne vois pas la bannière!!! voici le codage que j'ai mis! pouvez-vous m'aider svp :)


body {
margin: 60px 0px 0px 0px;
text-align: center;
background: #E3E3E3;
}
#container {
width: 986px;
padding: 0px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-right: auto;
margin-left: auto;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
}
#content {
float: left;
width: 680px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
-webkit-border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;
}
#rightbar {
float: left;
width: 306px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
-webkit-border-radius: 0px 0px 20px 0px;
-moz-border-radius: 0px 0px 20px 0px;
border-radius: 0px 0px 20px 0px;
}
#leftbar {
float: left;
width: 0px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
-webkit-border-radius: 0px 0px 0px 20px;
-moz-border-radius: 0px 0px 0px 20px;
border-radius: 0px 0px 0px 20px;
}
# topbar-logo {
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-width: 1px;
border-color: #99B2CC;
background: #334C66 url(":url:storage.canalblog.com/07/97/926937/70242354.jpg") no-repeat
0% 0%;
height: 150px;
display: block;
-webkit-border-radius: 20px 20px 0px 0px;
-moz-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
}
div .logolink a {
display: block;
text-decoration: none;
width: 100%;
height: 150px;
}
#topbar {
background-color: #ccc;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 20px;
display: none;
-webkit-border-radius: 20px 20px 0px 0px;
-moz-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
}
a {
text-decoration: none;
}
a:link {
color: #345E9B;
text-decoration: none;
}
a:visited {
color: #345E9B;
text-decoration: none;
}
a:active {
color: #345E9B;
text-decoration: none;
}
a:hover {
color: #345E9B;
text-decoration: underline;
}
h1 {
margin: 0px;
padding: 0px;
}
h2 {
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
}
#topbar h1 {
font-family: Arial, Helvetica, sans-serif;
color: #345E9B;
font-size: 60px;
font-weight: normal;
font-style: normal;
text-align: left;
}
#topbar a {
text-decoration: none;
color: #345E9B;
}
.blogbody {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
padding: 10px;
text-align: left;
line-height: 150%;
}
.blogbody h2 {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-bottom: 10px;
padding: 0px;
}
.blogbody h3 {
font-family: Arial, Helvetica, sans-serif;
color: #345E9B;
font-size: medium;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: dotted;
border-left-style: none;
border-width: 1px;
border-color: #E7E2DC;
margin-bottom: 10px;
padding: 3px;
}
.blogbody p {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
line-height: 150%;
margin-bottom: 10px;
}
.blogbody .itemfooter {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: x-small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
margin-bottom: 25px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 0px;
clear: both;
}
.navlinks {
padding: 10px 2px 10px 2px;
}
.navlinks .title {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: dotted;
border-left-style: none;
border-width: 1px;
border-color: #E7E2DC;
padding: 3px;
}
.navlinks ul {
padding: 0px;
margin: 0px 0px 20px 0px;
list-style-type: none;
margin: 0px 0px 20px 0px;
}
.navlinks li {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: normal;
font-style: normal;
text-align: left;
line-height: 150%;
margin-top: 10px;
}
.navlinks .item {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: normal;
font-style: normal;
text-align: left;
line-height: 150%;
margin-top: 10px;
margin-bottom: 10px;
}
#calendar {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
line-height: 150%;
padding: 2px;
margin-bottom: 20px;
}
#calendar table {
width: 100%;
padding: 2px;
border-collapse: collapse;
border: 0px;
}
#calendar caption {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: bold;
text-align: center;
text-transform: uppercase;
padding: 3px;
}
#calendar th {
font-weight: normal;
text-align: center;
}
#calendar td {
text-align: center;
}
.image {
text-align: left;
margin-bottom: 20px;
}
.navlinks img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
}
#album-container {
width: 986px;
padding: 0px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-right: auto;
margin-left: auto;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
}
#album-content {
float: left;
width: 680px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
-webkit-border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;

}
#album-nav {
float: left;
width: 306px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
.albumbody {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
padding: 10px;
text-align: left;
line-height: 150%;
}
.albumcol {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
padding: 10px 2px 10px 2px;
text-align: left;
line-height: 150%;
}
.albumcol h3 {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: dotted;
border-left-style: none;
border-width: 1px;
border-color: #E7E2DC;
margin-bottom: 10px;
padding: 3px;
}
.albumbody h2 {
font-family: Arial, Helvetica, sans-serif;
color: #345E9B;
font-size: medium;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: dotted;
border-left-style: none;
border-width: 1px;
border-color: #E7E2DC;
margin-bottom: 10px;
padding: 3px;
}
.albumbody img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
}
.albumcol img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #000000;
margin: 0px;
}
.albumbody p {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
line-height: 150%;
margin-bottom: 10px;
}
.albumcol p {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
line-height: 150%;
margin-bottom: 10px;
}
.clear {
clear: both;
height: 0px;
line-height: 0px;
}
ul.tagcloud {
text-align: left;
margin-top: 10px;
}
ul.tagcloud li {
line-height: 200%;
display: inline;
margin-right: 0.5em;
}
ul.taglist {
text-align: left;
padding: 0px;
margin-left: 0px;
}
ul.taglist li {
line-height: 200%;
display: inline;
margin-right: 0.5em;
}
.relatedlinks .title {
font-weight: bold;
}
.blogbody h3 a {
color: #345E9B;
text-decoration: none;
}
.albumcol ul {
padding: 0px;
margin: 0px 0px 20px 0px;
list-style-type: none;
margin: 0px 0px 20px 0px;
}
.albumcol li {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: normal;
font-style: normal;
text-align: left;
line-height: 150%;
margin-top: 10px;
}
.breadcrumb {
margin: 0px 0px 10px 0px;
font-size: x-small;
}
.breadcrumb div {
display: inline;
}
.navlinks .item em {
text-decoration: none;
}
.mainphoto {
padding: 0px 0px 10px 0px;
}
img.bullet {
margin: 0px 5px 0px 0px;
vertical-align: middle;
border: none;
}
.mainphoto img {
max-width: 640px;
max-height: 640px;
width: expression(this.width > 640 ? 640: auto);
height: expression(this.height > 640 ? 640: auto);
}
.mainphoto .navphoto {
font-size: x-small;
text-align: center;
margin: 0px 0px 5px 0px;
}
.albumcover {
float: left;
padding: 0px 5px 5px 0px;
}
.albumcover img {
max-width: 320px;
max-height: 320px;
width: expression(this.width > 320 ? 320: auto);
height: expression(this.height > 320 ? 320: auto);
}
.albumbody .itemfooter {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: x-small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
margin-bottom: 25px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 0px;
clear: both;
}
img.gravatar {
float: left;
margin: 0 5px 5px 0;
border: 1px solid black;
}
.albumbody h3 {
font-family: Arial, Helvetica, sans-serif;
color: #616161;
font-size: small;
font-weight: bold;
font-style: normal;
text-transform: none;
text-align: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-bottom: 10px;
padding: 0px;
}
.albumbody h3 a {
color: #616161;
text-decoration: none;
}

[maud]

j'ai oublié de te mettre le script
body {
margin: 0px 0px 0px 0px;
text-align: center;
background: #C9C9C9 url(":url:storage.canalblog.com/38/64/840937/63943538.jpg") no-repeat 0 0;
}
#container {
width: 1086px;
padding: 0px;
background-color: #141414;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-right: auto;
margin-left: auto;
}
#content {
float: left;
width: 580px;
background-color: #141414;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#rightbar {
float: left;
width: 306px;
background-color: #DBDBDB;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#leftbar {
float: left;
width: 200px;
background-color: #DBDBDB;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#topbar-logo {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
background:#C9C9C9 url(":url:storage.canalblog.com/38/64/840937/63943538.jpg") no-repeat 0 0;
height: 150px;
display: block;
}
div .logolink a {
display: block;
text-decoration: none;
width: 100%;
height: 150px;
}
#topbar {
background-color: #;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 10px;
display: none;

[maud]

je reviens jai voulu remodifier et jai fait une banniere sur phoyofiltre (800*150) et ca me plait!! maintenant que je veux l'inserer ca beug car maintenant toute mon image de fond a disparue et ma banniere est décalee pourtant ja itout suivie a la lettre

je t'en prie aide moi!! merci d'avance

[juju1725]

Bonjour !

J'ai réussis à insérer une photo dans ma bannière mais je ne sais pas où écrire ( parce que je suppose qu'on peut écrire des trucs).
Peux-tu m'aider ?

Merci beaucoup d'avance !!

Julia

[klodine]

Tes explications sont claires.
C'est très clair [:)]
J'ai réussi à mettre cette fichue bannière et je me voyais mal recréer un nouveau modèle en mode normal [Triste ouin]

merci Alerione pour tes précieux conseils.