Cette page est destinée à vous montrer comment changer la bannière d'un thème prédéfini. Cette méthode est valable pour tout type de changement que vous souhaiterez effectuer dans la feuille de style de votre thème. Cependant, en cas d'erreur dans votre code, Gandi ne pourra pas vous assister. Pensez donc à sauvegarder une copie de votre feuille de style dans un éditeur de texte pour pouvoir y revenir en cas de besoin.

Veuillez tout d'abord choisir le thème que vous souhaitez utiliser et regardez son code CSS (feuille de style).

Pour ce faire, aller dans “Apparences du blog”, puis choisissez votre thème. Dans notre exemple, nous avons choisi “White Road”. Cliquez sur “Utiliser ce thème”, un bouton “feuille de style” apparaît alors, cliquez dessus pour accéder au code CSS du thème.

Dans le code, la partie qui nous intéresse contient “import” :

<style type="text/css" media="screen">
@import url(/themes/whiteroad/style.css);

</style>
<style type="text/css" media="print">
@import url(/themes/whiteroad/../default/print.css);
</style>
<file>

Copier ceci.

Retournez dans “Apparences du blog”, là où vous pouvez choisir le thème, activez alors le “custom thème”.

Puis cliquez sur “Configuration du Thème”, vous accédez alors à une page vide, c'est la feuille de style. Ajoutez ici les lignes @import que vous avez copié auparavant, comme ceci :

@import url(/themes/whiteroad/style.css);
@import url(/themes/whiteroad/../default/print.css);

Sauvegardez votre travail.

Déposez l'image de la nouvelle bannière sur votre blog en utilisant l'outil “Gestionnaire des médias”. Une fois ceci fait, récupérez l'URL de la bannière en cliquant dessus. Dans cet exemple, cela donne l'URL suivante:

http://blog.example.com/public/newbanner.jpeg

Vous devez indiquer dans le code où trouver la nouvelle bannière, voici comment faire.

Ajoutez le paramètre layout.css à l'URL de votre blog pour voir le code du CSS. La forme basique est par exemple, /themes/whiteroad/layout.css :

http://blog.example.com/themes/whiteroad/layout.css

Cela affichera le CSS du thème.

Trouvez la zone concernant la bannière:

/* top */

#top {
float:left;
width:779px;
margin-left:auto;
margin-right:auto;
background:url(heading.jpg) top center no-repeat;
height:160px;
border-left:1px solid #6D6C61;
border-right:1px solid #6D6C61;

}

Copier ceci.

Vous pouvez voir que la ligne à éditer pour changer l'image est:

background:url(heading.jpg) top center no-repeat;

Retournez sur l'interface d'administration de votre blog, sur la “Configuration du thème” du “custom thème”.

Sous les lignes @import que vous avez ajouté plus tôt, ajoutez les lignes CSS qui vont écraser la valeur existante dans layout.css:

#top {
background:url(http://blog.andersonmail.eu/public/newbanner.jpeg) top center no-repeat;
}

Notez, que nous avons remplacé 'heading.jpg' (l'image actuelle) avec l'URL de la nouvelle image, que nous avons récupérez un peu plus tôt dans ce tutoriel.

La configuration finale de notre “Custom Thème” ressemblera à:

@import url(/themes/whiteroad/style.css);
@import url(/themes/whiteroad/../default/print.css));

#top {
background:url(http://blog.andersonmail.eu/public/newbanner.jpeg) top center no-repeat;
}

Cliquez sur sauvegarder pour finir.

Si vos changements n’apparaissent pas de suite, c'est à cause du cache. Videz le cache de votre navigateur et rechargez la page, ou attendez un peu. Une fois la cache vidé, vous verrez la nouvelle bannière.