CSS-Personnaliser-bandeau-blog-boutiques-42stores

Il est temps de mettre vos blogs à vos couleurs. Plusieurs d'entre vous m'ont demandé comment personnaliser le bandeau du blog, et j'ai aussi remarqué que certain d'entre vous ont "bricolé" pour arriver à faire ce qu'ils avaient envie. Voici quelques pistes pour améliorer ça.

Dans le bandeau de votre blog-boutique, il y a 3 éléments :

  • l'image de fond,
  • le nom de votre blog,
  • les liens de navigation.

Pour personnaliser l'image de fond du bandeau, c'est très simple : dans votre tableau de bord, allez dans Personnalisez votre thème.  Vous pouvez à cet endroit charger l'image qui sera utilisé en bandeau. Je vous conseil d'utiliser Télécharger le bandeau modèle pour avoir le bon format d'image (la taille surtout, souvent vous ne les faites pas assez grandes).

Le nom de votre blog est affiché sur bandeau. Certains ont intégré le nom dans l'image, et du coup veulent faire disparaitre le texte. Ce n'est pas forcément une bonne idée : 1° C'est utile pour le référencement 2° c'est un lien vers la page d'accueil.

Si vous voulez quand même le faire disparaitre, voici une méthode "propre" :

  1. Vérifiez que le nom est correctement défini dans Configuration de la boutique (il s'affiche en titre des pages, en haut de la fenêtre)
  2. Ajoutez la feuille de style suivante dans Personnalisez votre thème : #top h1 {visibility:hidden;}
  3. Rajoutez un lien vers la page d'accueil dans votre colonne de menu, en ajoutant un widget texte avec le contenu suivant : <a href="/"><h2>Retour à l'accueil</h2></a>

Moi, je vous conseille plutôt d'intégrer le nom de votre boutique dans le bandeau. Vous pouvez changer la taille, la couleur, le style et l'emplacement du texte.

Voilà un exemple de CSS :

 

#top h1 {
    font-family: "Times New Roman", Times, serif; /* Police de caractères*/
    font-size: 24px; /* taille du texte */
    font-style: italic;
    font-weight: bold;
    margin-top:10px; /* décaler de 10 vers le bas (peut être négatif) */
    margin-left:50px; /* décaler de 50 vers la droite */
    text-align:right; /* mettre le texte du coté droit */
    margin-right:50px; /* décaler de 50 vers la gauche */
}

#top a:link, #top a:visited, #top a:hover {
    color: #3300CC; /* Choisissez votre couleur */
}

 

 


Pour faire disparaitre les liens de navigation, il suffit d'ajouter le style :#prelude {visibility:hidden;}. Mais je vous conseille plutôt de les laisser, en les rendant moins visibles (en changeant la couleur par exemple).

Pour changez la hauteur du bandeau, ajoutez le style #top {padding-top:10px;}. Et changer la valeur.

Et voilà, bon courage. N'hésitez pas à me laisser vos commentaires, n'oubliez pas de me donner l'adresse de votre boutique pour que je regarde de près.