Thème par défaut: installer une bannière sous le logo de PluXml
Rédigé par jack 10 commentaires
Pour rappel, le thème par défaut est dans le dossier: /themes/defaut/
Commençons par copier notre banière banner.jpg, dans le dossier /themes/defaut/img/
J'ai pris une image au format jpg de 640x240. Veillez tout de même à ne pas prendre une image trop lourde. N'hésitez pas à utiliser des services comme https://tinyjpg.com/ pour optimiser le poids de vos images que vous mettez en ligne sur votre site, ceci pour gagner en vitesse d'affichage et en bande passante: pensez à vos visiteurs !
Éditez le fichier /themes/defaut/css/theme.css
Localiser le code suivant:
.header {
background-color: #1a6699;
color: #fff;
padding-bottom: 6rem;
padding-top: 6rem;
text-align: center;
}
et remplacer la ligne
background-color: #1a6699;
par
background: url(../img/banner.jpg) top left repeat-x;
Pour afficher une bannière centrée sans qu'elle se répète horizontalement, utilisez à la place le code suivant:
background: url(../img/banner.jpg) top center no-repeat;
Nous remplaçons tout simplement la couleur de fond de l'entête du site par notre image
- url : correspond au lien relatif de l'image par rapport au fichier css édité
- top left : permet de positionner l'image en haut à gauche de la balise <div> identifiée par la classe css .header
- repeat-x : permet de répéter l'image sur toute la largeur pour qu'elle occupe horizontalement tout l'écran
Si vous souhaitez masquer le titre du site et sa description, rajoutez à la fin du fichier theme.css
.header h1,
.header h2 {
display: none;
}
Il est préférable de masquer plutôt que de supprimer le titre du site, pour laisser l'information disponible et accessible aux moteurs de recherche. Dans ce cas là vous pouvez toujours rajouter le titre du site directement sur la bannière en utilisant un logiciel de retouche d'image.
crédit photo: pixabay CC0 Public Domain