Changement du logo par défaut

Peter · août 2023

Bonjour,
J'ai changer le logo dans le theme.css à la ligne 54.
Logo uploaded, et ancien retiré.
Et c'est encore l'ancien qui s'affiche .
Quelqu'un sait pourquoi ?

gcyrillus-nomade · août 2023

Bonjour et bienvenue sur le forum.

Il te faut rafraîchir le cache du navigateur.

En général c'est la combinaison des touches ctrl + f5 pour vider le cache de la page et la recharger.

Cdt

Peter · août 2023

Merci, c'était ça.
Mais le logo n'apparaît pas

gcyrillus-nomade · août 2023

Si le logo ne s'affiche pas, alors il faut vérifier que son lien et son nom(même format de lettre et extension) correspondent bien au nom et endroit où se trouve le fichier.

Peter · août 2023

Oui, c'est dans le fichier, j'ai fait un copie-coller

Peter · août 2023

.logo { background: url("../img/logo-terra-v4.4-128.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; }

Et voici le nom du fichier : logo-terra-v4.4-128.png

Et que signifie les 5rem et les autres 'rem' ?

gcyrillus-nomade · août 2023

Bonjour/bonsoir,

1rem est égal à la valeur de font-size donnée à HTML .
Dans le thème par défaut, cette valeur est définie dans la feuille de style de plucss.css

html {
    font-size: 62.5%;
}

Exprimée en % elle se calcule sur la taille définie dans le navigateur, généralement 16px , ce qui fait ici environ 10px.

Dans le fichier theme.css

.logo {/* sélectionne tous les éléments trouvés  avec la class logo */
    background: url("../img/logo-terra-v4.4-128.png") top left no-repeat; /* image dans le  dossier adjacent **img** depuis l'endroit où se trouve la feuille de style, ou si <styles> dans la page , depuis un dossier adjacent à l'endroit ou se trouve la page */
    height: calc(var(--header-height) + var(--bg-height) - var(--header-padding-top));
    background-size: 6rem; /* image redimensionné en 1 carré de 60px environ*/
    background-position: 5rem 0;/* image décalé horizontalement d'environ 50px */
    padding-left: 12rem;/* marge interne d'environ 120px */
    margin-left: -5rem; /* marge négative d'environ 50px */
}

En principe, si tu as juste mis le fichier logo-terra-v4.4-128.png où se trouve logo.png et seulement changé son nom dans la feuille de style, il doit-être vu.
est ce qu'en ajoutant une bordure à .logo{}, celle ci apparait ? si non(a part le cache à rafraichir) il y a peut-être une typo dans la feuille de style qui casse tout ou que tu n'as plus le conteneur avec la class logo dans ton thème modifié.

Est tu certain de l'avoir mis au bon endroit , dans le bon thème ?
Le fichier est-il accessible directement ?
n'est-il pas corrompu?
est ce bien un png et pas un jpg(ou autre) avec l'extension png?
...
Cdt

Peter · août 2023

Bonjour,
Non, j'ai mis une copie du fichier ici ainsi que le nom du logo.

.logo {
background: url("../img/logo-terra-v4.4-128.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;
}

Je crois que j'avais changé 6rem et 5 rem, et rien d'autre

Peut-être qu'avec une copie de .logo {} original, ça devrait aller ?

gcyrillus-nomade · août 2023

Bonjour,

Non, j'ai mis une copie du fichier ici ainsi que le nom du logo.

okay, et le fichier du nouveau logo est bien dans le répertoire img ?
Cette copie remplace bien le fichier theme.css et à comme nom theme.css ?
En ajoutant une bordure , la vois tu ?
Ton site est-il en ligne ?

cdt

Peter · août 2023

Le site est ici : https://www.terraburg.net/
Fichiers à leur place prévue.

Pour la bordure ?

gcyrillus-nomade · août 2023

Merci, je vois bien ton logo dans le header

Pour la bordure , ou un outline ou un box-shadow est une façon de voir où se trouve un element et quel espace il occupe.
Par exemple pour .logo:

.logo {
border:solid red; /* ou */
outline: solid red; /* ou */
box-shadow: 0 0 0 3px red; /* ou */
box-shadow: inset 0 0 0 3px red; 
}

Chacune de ses règles te dessine une bordure rouge autour de l'élément et permet de les repérer plus facilement

par exemple avec :

.logo {
box-shadow: inset 0 0 0 3px red; 
}

Cela donne:

on voit bien :

que l’élément est visible,
l'espace qu'il occupe,
que la marge négative en cache une partie
et pour le coup on aperçoit le logo en background avec sa position et la taille appliquée via background-size.

Cdt

Peter · août 2023

Merci, je vais voir pour la bordure.
Par contre, je ne vois toujours pas le logo, même après rafraîchissement.

gcyrillus-nomade · août 2023

Du coup, pas besoin de la bordure, on a pu vérifier que ton élément s'affiche bien.

Pour l'image, étonnant, je la vois bien et elle est bien accessible en ligne https://www.terraburg.net/themes/defaut/img/logo-terra-v4.4-128.png

Est tu certain d'avoir bien vider ton cache ? Car il n'y a à priori aucune raison pour que tu ne la vois pas. Quel(s) navigateur(s) utilises tu pour tester ?

Peter · août 2023

Voici chez moi
Capture-d-cran-du-2023-08-09-12-06-37.png

gcyrillus-nomade · août 2023

bizarre , et l'appui simultanée sur les touches ctrl + f5 n'a aucun effet?

Peter · août 2023

Si, mais ça ne change rien ici. Et c'est Firefox comme visible sur l'image

gcyrillus-nomade · août 2023

Je navigue aussi avec Firefox, et mou je le vois. D'ailleurs il n'y a a priori pas d'erreurs de ta part sur la modif.

Peter · août 2023

Il doit bien y avoir une raison, wait and see

Toulibre · août 2023

Je vois bien le logo avec firefox, bonne continuation.
capture écran
https://i.postimg.cc/qNvnLBgj/terraburg.png
Amicalement

Peter · août 2023

Écran blanc pour moi

gcyrillus-nomade · août 2023

@Peter tu as visiblement un problème de ton coté si tu est le seul à ne pas voir ton logo.
As tu vérifier avec plusieurs navigateurs?

Pour le screen, le lien est cassé, c'est https://postimg.cc/qNvnLBgj

Peter · août 2023

Oui, je sais, j'ai regarder avec mon GSM, et là, ça fonctionne.
Là, je ne vois pas

Peter · août 2023

Avec Chromium non plus

kowalsky · août 2023

Bonjour @Peter
c'est lié à ta résolution d'affichage. Réduit ta fenêtre et tu verras bien ton logo

Il n’apparaît pas à cause des paramétrages de la ligne 509 de theme.css :

        .logo {
            background: url("../img/pluxml-logo-black.png") top left no-repeat;
            height: 12rem;
            background-size: 12rem;
            background-position: 6rem 0;
            padding-left: 18rem;
            margin-left: -12rem;
        }

Solution simple : tu supprimes tout ce bout de code

Bonjour @P3ter @bazooka07 ,
@peter nous a trouvé un beau bug dans le thème par défaut. La ligne 509 casse l'affichage du logo. Elle est à retirer intégralement.

Peter · août 2023

Humhum, je supprime la ligne 509, et rien d'autres ?

Quand j'augmente à 133 %, ça apparaît

kowalsky · août 2023

Salut @peter,
désolé l'habitude, comme ce qui te pose problème est lié avec l'intégralité du code associé à la balise .logo {...}, on n'indique en général que la première ligne concernée à retrouver dans le fichier

(si la modification n'avait portée que sur une partie de ce bout de code, tu aurais eu la consigne : remplace la ligne 000 "code A" par "code B" )

=> pour corriger l'absence d'affichage du logo sur ton site, il te faut supprimer tout le code allant de la ligne 509 à la ligne 516 inclue dans le fichier theme.css.

Peter · août 2023

C'est fait, mais ça ne change rien.
Comme c'est sur l'ordinateur et pas ailleurs, ce doit être là à corriger.
Peut-être la résolution de l'écran ?

J'ai trouvé
3 840 × 2 160 et 2560 x 1440 , ça ne vas pas.

Je crois qu'une mise à jour s'impose, les résolutions des écrans PC ne sont plus celle des années 2000.

Et ce qui est supprimé ? C'était vraiment inutile ?

Toulibre · août 2023

regardes éventuellement tes extensions de navigateurs si tu bloques quelque chose ou
dans ton fichier htaccess, c'est un fichier caché et/ou sauvegardes le quelque part et supprimes le de pluxml puis testes.
de chez moi tout va bien
capture écran ci-dessous
https://i.postimg.cc/rm4Rsv5z/terraburg.png

Peter · août 2023

Merci, c'est trouvé, voir réponse précédente.

Toulibre · août 2023

Ce qui est encore d'actualité c'est que j'ai un écran d'avant 2000

Changement du logo par défaut

Réponses