Thème par défaut: installer une bannière sous le logo de PluXml

Rédigé par jack 10 commentaires
Classé dans : PluXml, Thème Mots clés : PluXml, Thème, Template, Css
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 :

par :

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

10 commentaires

#1  - Oui-Oui a dit :

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 ?

#2  - Stéphane a dit :

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;

#3  - Oui-Oui a dit :

Oui, c'est exactement ce que je cherchais !
Merci :)

#4  - Oui-Oui a dit :

Par contre, à noter qu'entre la page d'accueil et le billet, la bannière subit un décalage horizontal

#5  - Stéphane a dit :

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.

#6  - Oui-Oui a dit :

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 ?

#7  - Stéphane a dit :

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.

#8  - Oui-Oui a dit :

Merci, je vais faire des tests :)

#9  - webasso a dit :

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" ?

#10  - Jerry wham a dit :

Essayer d'ajouter la propriété css : background-size: cover;

Les commentaires sont fermés.

Fil RSS des commentaires de cet article

Top