Thème par défaut: installer une bannière sous le logo de PluXml
Rédigé par jack le 10 commentairese
Nous allons voir comment installer une image en guise de bannière dans le thème par défaut de PluXml 5.6, de manière à remplacer :
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
DClassé dans : PluXml, Thème ,Mots clés : PluXml, Thème, Template, Css
A propos de l'auteur, jack:
Webmestre de PluXopolis de 2018 à Avril 2023.
10 commentaires
Bonjour. Le code pour centrer la bannière est dans l'article, mais on peut le complèter avec une couleur de fond de cette façon:
background: #3d73b1 url(../img/banner.jpg) top center no-repeat;
Par contre, à noter qu'entre la page d'accueil et le billet, la bannière subit un décalage horizontal
Mauvaises règles css dans votre thème certainement, où en mode article d'autres règles viennent perturber l'affichage créant cette différence avec la page d'accueil.
Je n'ai rien touché dans le dossier du thème officiel qui est resté brut de décoffrage à part ce que tu m'as indiqué ;)
Pages statique et article sont aligné, pas la page d'accueil...
Des modifs à un autre endroit pourraient impacter ?
Utilises-tu des plugins ? Si oui, peut-etre qu'ils chargent du css qui vient gêner
Sinon oui, s'il y a eu d'autres modifs faites à coté, ça peut impacter également.
webasso a dit : #9
Bonjour Stéphane
merci pour cette nouvelle possibilité d'insérer une image en guise de bannière... Mais serait-il possible de faire en sorte qu'elle soit "Responsive" ?
Jerry wham a dit : #10
Essayer d'ajouter la propriété css : background-size: cover;
rFil RSS des commentaires de cet article
Oui-Oui a dit : #1
Merci!
Et ne peut-on ajouter une bannière (centrée, sans répétition) au dessus du fond que l'on garderait et dont on choisirait la couleur pour que cela corresponde (par exemple 3d73b1 dans mon cas - cf http://vie-rose.toile-libre.org/), afin que l'on ait visuellement un bandeau qui fasse toute la largeur de la page comme sur le thème par défaut, avec au milieu la bannière qui se fond ?