Insérer sa bannière dans blogspirit

Rate this post

Suite à une forte demande des utilisateurs concernant la personnalisation de la bannière, voici un tutorial qui vous expliquera pas à pas comment procéder pour mettre votre bannière à la place de celle qui existait déjà.

– Dans un premier temps, il vous faut ajouter votre bannière à vos fichiers.
– Récupérez ensuite le lien de votre image (en cliquant sur le nom).

Arrive maintenant la partie la plus difficile mais si vous suivez bien les étapes, tout devrait aller.
– Allez dans les configurations avancées de l’onglet « PRESENTATION » et modifiez votre feuille de style.
Pour plus de sécurité, sauvegarder son contenu dans un éditeur de texte de votre choix avant toute modification.

– Il s’agit maintenant de modifier les lignes de code concernant votre bannière. Pour cela, repérer la ligne #banner.
Vous devriez avoir les lignes suivantes:

Les valeurs qui suivent les « : » peuvent différer suivant les modèles.

– Dans #banner, ajouter une ligne : display:none;. Si cette ligne existe déjà, modifiez sa valeur par none. Ceci permet de faire disparaître la bannière préexistante sans pour autant les enlever ce qui permet de rester référencé.
– A présent, repérez le bloc avec #banner-img et remplacez display:none; par display:block;
– Vous pouvez maintenant ajouter votre image en remplaçant la ligne background:#…… par background:#XXXXXX url(« /url_de_votre_bannière ») no-repeat 0% 0%;
Remplacez XXXXXX par le code hexadecimal de la couleur dominante de votre bannière
– Ajoutez height: hauteur_de_votre_bannière; dans le bloc précédent et dans le bloc div.img-link a {.

Votre feuille de style doit maintenant ressemblez à ce qui suit:

Pour les modifications portées sur le design 4 (en comptant à partir du haut de la gauche vers la droite) uniquement:

* Au niveau des styles « #container .container-decorator1 » : remplacez « 90px » dans background: transparent url(http://[…]) no-repeat 0% 90px; par la somme suivante : hauteur de votre image + marge de 9px.. Ex : votre image fait 120px en hauteur, le code à insérer est : « 129px »

Pour les modifications portées sur le design 5 (en comptant à partir du haut de la gauche vers la droite) uniquement.

* Au niveau des styles « #container .container-decorator1 » et « .album-container .container-decorator3 » : remplacez « 90px » dans background: transparent url(http://[…]) no-repeat 0% 100px; par la somme suivante : hauteur de votre image + marge de 8px.. Ex : votre image fait 120px en hauteur, le code à insérer est : « 128px »

Post Your Comment Here

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *