CSS pour augmenter la hauteur du logo et de l'en-tête, vue bureau > mobile

Depuis le bureau de mon PC, via l’inspecteur dans Firefox, la balise CSS qui manipule la hauteur du logo est :

.d-header .title {
  --d-logo-height: 4em;
}

Cependant, je remarque que lorsque je branche cette balise CSS dans le thème par défaut dans l’éditeur CSS sous bureau, cela n’affecte en rien la hauteur du logo telle qu’elle est vue sur le bureau de mon PC ni sur mon téléphone portable.
Cependant, si je branche le même code CSS sous mobile, cela change la hauteur du logo non seulement sur le bureau de mon PC mais aussi sur mon téléphone portable. Est-ce un bug dans Discourse ou est-ce que je rate quelque chose.

1 « J'aime »

Salut,

Au cas où, où avez-vous mis ce CSS ?

2 « J'aime »

Il est toujours bon d’essayer de mieux formuler une demande d’aide. Beaucoup de gens ici sont très désireux d’aider, mais il y a tellement de façons de faire les choses qu’une bonne explication est cruciale pour obtenir de l’aide le plus rapidement possible :slight_smile:

De plus, si vous testez des choses localement, n’oubliez pas d’ajouter ?mobile_view=1 à l’URL.

3 « J'aime »

Depuis le bureau de mon PC, via l’inspecteur dans Firefox, la balise CSS qui manipule la hauteur du logo est :

.d-header .title {
  --d-logo-height: 4em;
}

Cependant, je remarque que lorsque je branche cette balise CSS dans le thème par défaut dans l’éditeur CSS sous bureau, cela n’affecte en rien la hauteur du logo telle qu’elle est vue sur le bureau de mon PC ni sur mon téléphone portable.
Cependant, si je branche le même code CSS sous mobile, cela change la hauteur du logo non seulement sur le bureau de mon PC mais aussi sur mon téléphone portable. Est-ce un bug dans Discourse ou est-ce que je rate quelque chose.

J’ai essayé de recréer ce que je pense que vous faites, mais je n’arrive pas à reproduire ceci :

Cela change correctement le mobile et n’affecte pas le bureau.

Si j’ajoute ce CSS dans l’éditeur, cela fonctionne comme prévu pour le bureau :

Et pour le mobile, il suffit de définir la hauteur du logo, pas de l’en-tête :

J’espère que cela vous aidera.

1 « J'aime »

Merci, j’ai utilisé une autre machine, une qui exécute Ubuntu 22.04 (serveur web) et le code CSS dans le compartiment CSS du bureau s’est affiché correctement, donc il s’agit peut-être d’un problème de navigateur sur mon autre PC de bureau sous Windows 7.
J’ai remarqué que je semble être limité dans le compartiment CSS mobile à :

.d-header #site-logo {
  height: 3em;
}

Toute tentative d’aller au-delà de 3em n’augmente pas la hauteur du logo sur mon téléphone portable, un GS23, même après avoir vidé le cache.

Des idées ?

Oui, essayez de désactiver le max-width sur le logo, cela devrait le libérer de toute contrainte.

1 « J'aime »

Merci pour votre contribution. Je n’ai pas trouvé cette option dans les paramètres. Est-ce que cela se fait via CSS ou une entrée en ligne de commande dans Rails, et si oui, à quoi cela ressemble-t-il ?

Ce serait du CSS, comme ceci :

.d-header #site-logo {
  max-width: unset;
}

Si cela échoue, ajoutez !important.

3 « J'aime »

Merci pour votre aide :

Pour ceux qui viennent après moi et qui souhaitent augmenter la taille de leur logo à la fois sur ordinateur et sur mobile.

  1. Personnaliser → Thèmes → Par défaut → Modifier CSS/HTML

a) Publier dans le compartiment Ordinateur :

.d-header {
  height: 5em;
}
.d-header #site-logo {
  height: 5em;
}

b) Publier dans le compartiment Mobile :

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}
2 « J'aime »

Cela pourrait être une règle :

.d-header #site-logo {
  max-width: unset;
  height: 4em;
}

Je pense que vous pourriez également compacter le premier ensemble de règles, mais je ne me souviens plus comment.

2 « J'aime »

Une autre chose qui serait utile d’ajouter est comment réduire le rembourrage, afin de déplacer le logo vers la gauche en vue mobile - des idées ?

.wrap {
  padding-left: 0;
}

À ce stade, il pourrait être judicieux de suivre un cours d’introduction au CSS car :

Vous pouvez en savoir plus sur le développement de vos propres thèmes dans la catégorie dev.

2 « J'aime »

Merci Charlie, j’apprécie.\nJe connais l’utilisation de l’inspecteur, par exemple Firefox, et j’en tire quelques solutions.\n\nAvez-vous des idées sur la raison pour laquelle le redimensionnement du logo ne fait pas partie des fonctionnalités de base de Discourse. L’image de marque de tout site Web est essentielle et le manque de granularité à cet égard est surprenant.

1 « J'aime »

La « manipulation du logo » est tout à fait possible, tout comme tous les autres types de style, dans les thèmes et les composants de thème.
Vous devrez soit apprendre les bases de HTML/CSS/JS et parcourir la pléthore de documentation sur meta pour faire les choses vous-même, soit chercher quelqu’un que vous pourrez engager pour apporter les modifications souhaitées.
Ce dernier peut être fait dans la catégorie marketplace.

Votre question initiale ayant reçu une réponse, je pense que nous pouvons clore ce sujet.
Je vous souhaite beaucoup de succès avec votre forum.

3 « J'aime »

Je ne m’attendrais pas personnellement à ce que la taille du logo d’une entreprise fasse partie des fonctionnalités de base d’une plateforme de forum. De plus, notre logiciel est open source et nous fournissons un tel support pour vous aider à y parvenir, comme nous l’avons fait ci-dessus. Nous proposons également de nombreuses informations pour apprendre à développer vos propres personnalisations.

3 « J'aime »

Salut Charlie,

Par « manipulation du logo », je faisais référence à la possibilité de changer la taille du logo dans l’interface utilisateur.

Merci pour votre aide.

Ce sujet a été automatiquement fermé 30 jours après la dernière réponse. Les nouvelles réponses ne sont plus autorisées.