Des trucs et des astuces

Alors amusons -nous ;)

23 avril 2007

Changer la bannière, en mode avancé

Oui!!

Bon alors,
déja dans un premier temps, ce tuto s'adresse à ceux qui veulent changer de bannière, pour ceux qui n'en avaient pas voir plutôt celui-ci:===>Mettre une bannière en avancé alors que je n'en avais pas

On s'est créé un gentil blog, en mode normal on s'est mis une bannière, toute belle
tutoban01

tutoban02

Puis on a évolué, sommes passés en mode "avancé", avons ajouté des trucs de ci de là....
Et on veut changer de bannière parce que du coup ça ne correspond plus trop....

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 changer, 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.
tutoban05
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.
tutoban06
tutoban07

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

tutoban08

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).
tutoban12

Deuxième étape,

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

Recherchons la ligne du background dans le div #topbar-logo
tutoban04

On sélectionne l'adresse de l'ancienne bannière, et on y colle la nouvelle,
il se peut aussi que les dimensions diffèrent, donc ne pas oublier de modifier height: nouvellehauteurenpx;
tutoban09

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

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


Commentaires

    [Ordi casser]
    ça na marche pas non plus
    [grr bouillir]

    je suis maudite[Triste ouin]

    Super "roblog" et ses explications [;)]

    Posté par kiki, 26 octobre 2008 à 19:03
  • Ques'ce qui ne marche pas? la suppression de l'ancien fichier?

    Posté par Alérion, 26 octobre 2008 à 19:57
  • [Salut]
    j'ai supprimé le fichier mais cette satané bannière est toujours là [Triste ouin]

    Posté par kiki, 27 octobre 2008 à 10:41
  • Je lis, je relis et toujours rien

    J'avais une bannière en mode avancé, j'ai changé les couleurs de fond du blog et j'ai voulu mettre ma nouvelle bannière....la catastrophe !!!

    Je bidouille depuis une journée et je n'arrive à rien. Maintenant je ne sais même plus ce qu'il y avait avant.
    Voici mon petit bazar !!!!
    #topbar-logo {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color:#9E8479;
    background:transparent url(:url:storage.canalblog.com/90/35/431024/33289522.jpg)no-repeat 0 0;
    height: 251px;
    display: block;
    }
    div .logolink a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 251px;
    }
    #topbar {
    background-color:#F4EFF;
    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;
    }
    Merci Pour tout.

    Posté par laet16, 05 décembre 2008 à 21:06
  • background:transparent url(:url:storage.canalblog.com/90/35/431024/33289522.jpg[Font col='#F00000':]:)no-repeat [/Font]0 0;
    il manque un espace entre le [Font col='#F00000':]:)[/Font] et [Font col='#F00000':]:no_repeat[/Font]
    mais je viens de voir ton blog, à priori ta bannière est là... tu as dû y arriver non?

    Posté par Alérion, 08 décembre 2008 à 06:40
  • Joyeux NOEL !!!!

    Mille mercie !
    J'avais envie de mettre une bannière qui fasse plus "Noel", grace à toi, j'ai réussi !!!

    Posté par Claire, 23 décembre 2008 à 17:42
  • une nannière plus "haute"

    Bonjour, je me demandais si c'était possible d'avoir une bannière plus large et haute, en passant en mode avancé (je suis toujours en mode normal, je collecte des infos pour passer enavancé, choisir une image de fond, etc...)
    J'en ai vu chez de multiples autres hébergeurs.Merci!

    Posté par tribudespandas, 07 octobre 2009 à 08:28
  • heuuuu

    bonsoir Tribu des Pandas
    en fait tu télécharge la bannière que tu veux, sans obligatoirement passer ne mode avancé.
    je fais certaines choses ici pour éviter le mode avancé à ceux qui ne le veulent point ;)
    Maintenant un style comme ce blog, tu es obligé d'y passer, seulement il y a des choses à apprendre avant (CSS, HTML, Organisation de la structure de CB)
    bon courage[:)]

    Posté par Alérion, 07 octobre 2009 à 19:49
  • Bonsoir,
    Je viens de lire ton post ainsi que l'intégralité des commentaires postés et pourtant, je n'ai toujours pas trouvé l'origine de mon problème...

    Voici où j'en suis et pourtant ma bannière ne s'affiche toujours pas...
    }
    #topbar-logo {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-width: 1px;
    border-color: #FFFFFF;
    background: #FFFFFF url(":url:storage.canalblog.com/01/99/488968/48192444.jpg")no-repeat 0 0;
    height: 768px;
    display: block;

    Qu'est-ce qui cloche??
    Ma bannière est-elle trop lourde? Pourtant j'essaie de réinstaller la précédente et ça ne marche pas non plus...
    Merci d'avance pour ton aide.

    Isabelle

    Posté par Isabelle A, 10 janvier 2010 à 21:25
  • Bonjour,
    Tout d'abord merci pour tous ces tutos que tu partages avec nous.
    J'ai également un pti souci... J'ai mis ma bannière en place... jusque là pas de pb seulement le titre est toujours là en-dessous de ma bannière !
    Peux-tu m'aider ?[:(]
    Merci par avance !!![;)]
    Art33.

    Posté par art33, 02 juillet 2010 à 19:00
  • bonjour art33,
    en fait oui tu as lu le mauvais tuto, mais ce n'est pas grave, ce qu'il faut c'est changer aussi [Sur col='#CCF':]:#topbar[/Sur] et mettre à la place de display:[Sur col='#CCF':]: block;[/Sur] ceci: display: [Sur col='#CCF':]:none;[/Sur]
    bonne journée

    Posté par Alérion, 06 juillet 2010 à 13:58
  • Bonjour,
    Merci, je viens de te lire (je rentre de vacances...). J'ai fait la manip. Tout est OK. Merci beaucoup de ton aide.
    A bientôt, je ne vais pas manquer de revenir te voir.
    Art33.

    Posté par art33, 04 août 2010 à 14:41
  • merci

    j'avais quelques prob avec ma bannière, et avec tes explications j'ai réussi à tout résoudre
    merci beaucoup

    Posté par Cathy60, 12 novembre 2010 à 15:02
  • au secour

    coucou sachant que tu es super douee j'ai voulu ajouter une bannière j'ai tout fait comme t'as dis mais ca marche pas je ce met ca
    je t'en pris peux tu m'aider s'il te plait

    body {
    margin: 0px 0px 0px 0px;
    text-align: center;
    background: #C9C9C9 url(":url:storage.canalblog.com/52/86/840937/62900193.jpg") repeat scroll left top;
    }
    #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: 4px;
    border-color: #;
    background:#;#C9C9C9 url(":url:storage.canalblog.com/52/86/840937/62900193.jpg")
    height: 0px;
    display: none;
    }
    div .logolink a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 0px;
    }
    #topbar {
    background-color: #;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 4px;
    border-color: #;
    padding: 10px;
    display: block;

    Posté par maud, 21 avril 2011 à 11:30
  • merci

    coucou
    depuis 2h de l'aprés midi j'étais bloqués je n'arrivé pas à mettre ma bannière; ces la 1er et tout les autres expliquer commen la changer et pas mettre une bannière pour la 1er fois en tout cas un grand merci
    merci!!!

    Posté par mel, 11 octobre 2011 à 19:56
  • bonjour

    Salut, j'ai essayé de suivre tout ce que tu m'as dis et j'ai du faire une fausse manipulation, je suis dégoutée j'ai pas l'habitude de me servir du mode avancé. En faite mon souci c'est que a présent ma bannière d’accueil ne fait que la moitier et la disposition du blog c'est décaler a gauche, peut être pourrais tu m'aider a tt remettre en place? merci d'avance.

    Posté par patati-patata, 15 novembre 2011 à 10:39
  • Bonjour Alerion et merci pour ton blog plein de ressources !
    J'ai voulu changer ma bannière en mode avancé mais elle n'apparaît pas sur mon blog, je pense avoir planté sur la taille ... Merci de ton aude :
    body {
    margin: 0px 0px 0px 0px;
    text-align: center;
    background: #9C5E8A;
    }
    #container {
    width: 986px;
    padding: 0px;
    background-color: #FDF7FB;
    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: 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;
    }
    #rightbar {
    float: left;
    width: 306px;
    background-color: #FDF7FB;
    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: 0px;
    background-color: #FDF7FB;
    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: transparent url("<p><a href=":url:storage.canalblog.com/31/26/828102/71228463.jpg">banniere</a></p>") no-repeat 0 0;
    height: 150px;
    display: block;
    }
    div .logolink a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 198px;
    }
    #topbar {
    background-color: #F4EFF7;
    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;
    }
    a {
    text-decoration: none;

    font-style: normal;
    text-align: left;
    line-height: 150%;
    margin-top: 10px;
    }[:(]

    Posté par coccinet-cook, 21 décembre 2011 à 13:14
  • Merci beaucoup, grâce à toi j'ai pu mettre une nouvelle bannière et avancer un peu sur le long chemin de l'aprentissage HTML...

    Posté par Alexandra, 16 avril 2012 à 22:19
  • Bannière vidéo

    Salut vu les commentaires et réponses je pense au meilleur endroit pour te demander s'il est possible d'insérer un bannière vidéo?

    Posté par trader29, 26 septembre 2017 à 16:21
« Premier   1  2 

Poster un commentaire