Relooking

Haut et fort est vraiment une super platforme de blog, prete a l'emploi.
On cree son blog, on choisi un gabarit et hop nous voila lance dans le grand bain. Le probleme c'est que cette simplicite debouche sur l'uniformite de tous les blogs, tout se ressemble.
Je me suis donc lance dans le relooking de mon blog et essayant de changer ma banniere.

J'ai pris une photo de la station de metro St Michel que j'ai transforme en peinture. Cela dit n'importe qu'elle image fera l'affaire.
Une fois votre image de banniere choisie, il faut l'uploader sur le serveur de Haut & Fort. 

Pour cela, cliquez sur Tableau de bord > Fichiers pour faire apparaitre quelque chose comme l'image ci-dessous.

 

Puis cliquez sur le lien images/ pour faire apparaitre l'ecran ci-dessous

 

De la cliquez sur browse selectionnez votre banniere sur votre disque local et cliquez sur Enregistrer

Retenez bien le nom que vous avez donne a votre banniere (dans mon cas stm.jpg), il nous sera utile plus tard pour modifier la feuille de style de notre page d'acceuil.

Maintenant que la banniere est disponible sur le serveur de Haut & Fort dans le dossier images, il nous faut maintenant modifier la feuille de style (css - cascading style sheet pour les anglophones).

 

Pour cela cliquez sur Presentation > Configuration avancee

 

 

Puis cliquez sur Modifier le template sur la ligne Feuille de styles

 

La, cherchez le tag banner-img et modifiez le comme ci-dessous en remplacant /images/stm.jpg par le nom que vous avez donne a votre banniere. De plus, vous pouvez augmenter ou reduire la hauteur en pixel de la banniere (200 pixels dans mon cas) 

 

#banner-img {
        background:#009900 url(/images/stm.jpg) no-repeat scroll 0%;
        display:block;
        height:200px;

} 

 

De plus si vous voulez que la banniere reste cliquable, il faut rajouter de la hauteur a l'hyperlien associe a l'image, comme ci-dessous.

 

div.img-link a {
    display: block;
    text-decoration: none;
    width: 100%;
    height:200px;
    }


Ensuite vous pouvez supprimer le cadre autour de la colonne principale si ca ne vous plait pas.
Pour cela modifiez le tag container en supprimant la ligne border ou en mettant 0 pixel comme ci-dessous.

#container {
    width: 951px;
    border: 0px solid #009900;
    line-height: 140%;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    background-color: #fff;
}

Pour les puristes, vous pouvez egalement modifier le sous titre (H2) de la banniere pour supprimer la bordure d'un pixel entre l'image et le sous titre. Pour cela, modifiez le tag ci-dessous en mettant la bordure a 0 pixel ou en supprimant la ligne.

#banner h2 {
    border-bottom:1px solid #009900;
    border-top:0px solid #FFFFFF;
    font-size:80%;
    margin:0px 0px 5px;
    padding:5px 10px 5px 15px;
    width:auto;
}


Voila, c'est sans pretention mais si ca peut aider a modifier un peu la deco de vos blogs, c'etait avec plaisir.
Bon relooking et n'hesitez pas a laisser un commentaire pour me montrer vos creations, bon relooking !