Remplacer la bannière horizontale du thème par défaut

nounours18200

Bonjour,
Je ne sais pas si c'est la bonne rubrique, mais j'espère !
Je commence à progresser dans la mise en place mon site sur PluXml, et il me reste 2 points durs, dont l'un est le suivant:
Je voudrais remplacer la bannière horizontale (qui s'affiche sur toutes les pages) du thème par défaut par une autre image (carrée et centrée).
J'ai trouvé ce fil: https://pluxopolis.net/theme-par-defaut-installer-une-banniere-sous-le-logo-de-pluxml.html
mais il conserve la bannière horizontale, et n'en change que la couleur; alors que moi je voudrais remplacer cette bannière par un logo centré.
J'imagine qu'il faut éditer le thème, mais je n'ai pas la connaissance PHP requise...
Merci pour votre aide,
P.S.: le 2ème point dur, ce sera pour demain !...

bazooka07

Rien à voir avec PHP.
Il faut modifier les valeurs de background le fichier "css/theme.css" dans le thème defaut.
à la ligne 53 pour le logo
à la ligne 61 pour la banière

.logo {
    background: url('../img/pluxml-logo-black.png') top left no-repeat;
    height: calc(var(--header-height) + var(--bg-height) - var(--header-padding-top));
    background-size: 6rem;
    background-position: 5rem 0;
    padding-left: 12rem;
    margin-left: -5rem;
}
.bg {
    background: url('../img/bg.jpg') no-repeat top left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: var(--bg-height);
}

nounours18200

Merci Bazooka,
Je viens de le faire (je ne cherche qu'à remplacer la bannière horizontale), et j'ai donc remplacé
"background: url('../img/bg.jpg') no-repeat top left;"
par
background: url('../img/mon_image.jpg') no-repeat top center;
puisque je veux que mon image soit centrée sans répétition.

Mon image fait 240x240 pixels, mais à l'affichage cette image est étirée sur toute la largeur de l'écran (comme l'ancienne bannière) au lieu de n'occuper qu'un carré de 240px au centre : que faire ??

bazooka07

Vire toutes les lignes qui finissent par "cover;"

L'usage veut que le logo soit situé en haut et à gauche de la page. En général quand on clique dessus partout dans le site, on revient vers la page d'accueil.
Il vaudrait utiliser la class .logo et supprimer le bandeau.

nounours18200

Bien, j'ai compris l'approche du logo qui ramène à la page d'accueil, tu as raison c'est plus logique.

Donc j'ai déjà remplacé le logo PluXml par mon logo (un de petite taille 77x77) dans le fichier "theme.css", et après un vidage du cache de Firefox, ça roule parfaitement.

Maintenant concernant la bannière, vu que je ne pige rien à l'intérêt " d'utiliser la class .logo" comme tu le suggères (sorry je suis une buse !), vois-tu un problème à ce que je remplace cette image de bannière par une image à moi qui sera centrée ?

Merci encore pour l'aide que tu apportes aux débutants comme moi...

bazooka07

Non pas de souci.
Mais une bannière c'est plus joli. Si tu n'as que des petites images, tu peux faire une mosaique comme l'habit d'Arlequin.
Certains profitent de l'espace pour faire défiler des images.

nounours18200

OK merci , je vais voir ce que je décide, mais ce n'est pas le plus urgent, j'ai 2 autres problèmes que je posterai demain,
Bonne soirée et encore merci

nounours18200

Bon j'ai finalement créé ma propre bannière que j'ai voulu moins haute que celle d'origine: toujours 1280 px de large mais seulement 250 px de haut.
J'ai modifié la ligne 61 du fichier "css/theme.css", ma bannière s'affiche comme prévu mais le bas est tronqué......
Y a-t-il possibilité de corriger ça ?
Mille mercis...

bazooka07

Dans css/theme.css, il faut mettre comme valeur de --bg-height la hauteur de ta bannière en px ci-dessous

body {
    --header-height: 7rem;
    --header-padding-top: 1.3rem;
    --bg-height: 250px; /* hauteur bandeau */
    font-family: 'open_sansregular', sans-serif;
    font-size: 1.7em;
    line-height: 1.6em;
    color: #3A4145;
    background-color: #fff;
}

--bg-height est une variable CSS à ajuster selon les besoins

nounours18200

Bon je pense que je vais devenir fou ! ...
Voici ce que l'on trouve dans mon fichier "css/theme.css" modifié:
body {
--header-height: 7rem;
--header-padding-top: 1.3rem;
--bg-height: 250px;
font-family: 'open_sansregular', sans-serif;
font-size: 1.7em;
line-height: 1.6em;
color: #3A4145;
background-color: #fff;
}
/* ---------- Header ---------- */

donc pour la hauteur on devrait être bon (même si je ne comprends pourquoi cette valeur existait à l'origine avec la bannière originale qui fait 375px de haut..).

Ensuite ligne 61:
.bg {
background: url(../img/bandeau_AVE_03_1280x250.jpg) no-repeat top left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: var(--bg-height);
}

où mon image créée fait bien 1280x250, vérifié sur mon logiciel de retouche.

Et à l'affichage du site Web il manque toujours le bas du bandeau (le cache a bien été vidé)...Je peux te mettre une capture hébergée en ligne si tu veux ?

bazooka07

A l'origine le bandeau est déjà masqué car très gros.

Donne-moi l'url de ton site s'il est en ligne.
Ce sera plus vite réglé avec Firefox

nounours18200

C'est fait : je viens de t'envoyer un message

nounours18200

As-tu reçu mon mail ?
Sinon, comment supprimer purement et simplement cette bannière, s'il est si compliqué de la changer , la supprimer m'ira très bien !
Merci

bazooka07

Oui, j'ai bien reçu ton message. J'ai regardé cela hier soir.
Mais il y a beaucoup de bizarreries dans ce thème ( float: left, marges négatives, ..) que cela devient compliqué pour avoir un affichage correct pour le logo et la bannière à la fois sur un smartphone, une tablette et un PC de bureau.
Je suis donc partir à écrire un thème basique avec Knacss et non PluCss.

Pour enlever la bannière, il faut enlever la ligne suivante dans le fichier header.php :

<div class="bg"></div>

nounours18200

Parfait, j'ai supprimé cette bannière en suivant tes instructions: puisque l'on ne peut pas la customiser, autant s'en passer...

Et bien dis donc, tu n'y vas pas par 4 chemins: re-écrire un thème from scratch...
Pourquoi ne pas en utiliser un déjà existant ?

Je donne mon avis d'utilisateur de base sans connaissance: pourquoi ne pas "imposer" que les thèmes puissent être facilement configurables sur ces 2 aspects que sont les logos et bannières, en ayant la possibilité de spécifier dans le thème les fichiers logo et bannière à utiliser, à la façon Wordpress ?
J'avoue que ce Wordpress est une usine à gaz que je n'aime pas, mais au moins ces points ne font pas perdre de temps, alors que sur la plupart des CMS sans BDD, on perd des jours avec ces 2 points basiques que la quasi totalité des utilisateurs doivent customiser...

Bon maintenant on va s'attaquer au dernier point qui fâche: la possibilité d'installer CKeditor Full, un autre grand classique qui fait perdre du temps...

Mille mercis pour ton aide: comment ferait-on sans toi ??