CSS zur Erhöhung der Höhe von Logo und Header in der Desktop-Ansicht Mobile Ansicht

Entwickler
1

Vom Desktop meines PCs aus, über den Inspektor in Firefox, ist das CSS-Tag, das die Logo-Höhe manipuliert:

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

Ich stelle jedoch fest, dass, wenn ich dieses CSS-Tag im Standardthema im CSS-Editor unter Desktop einfüge, es die Logo-Höhe weder auf meinem PC-Desktop noch auf meinem Mobiltelefon verändert. Wenn ich jedoch denselben CSS-Code unter Mobile einfüge, ändert er die Logo-Höhe nicht nur auf meinem PC-Desktop, sondern auch auf dem Mobiltelefon. Ist das ein Fehler in Discourse oder übersehe ich etwas?

1 „Gefällt mir“
2

Hallo,

nur für den Fall, wo hast du dieses CSS platziert?

2 „Gefällt mir“
3

Es ist immer eine gute Praxis, eine Hilfsanfrage etwas besser zu formulieren. Viele Leute hier sind super eifrig zu helfen, aber es gibt so viele Möglichkeiten, Dinge zu tun, dass eine gute Erklärung entscheidend ist, um so schnell wie möglich Hilfe zu erhalten :slight_smile:

Wenn Sie Dinge lokal testen, vergessen Sie nicht, ?mobile_view=1 an die URL anzuhängen.

3 „Gefällt mir“
5

Vom Desktop meines PCs aus, über den Inspektor in Firefox, ist das CSS-Tag, das die Logo-Höhe manipuliert:

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

Ich stelle jedoch fest, dass, wenn ich dieses CSS-Tag im Standardthema im CSS-Editor unter Desktop einfüge, es die Logo-Höhe auf meinem PC-Desktop und auf meinem Mobiltelefon nicht verändert.
Wenn ich jedoch denselben CSS-Code unter Mobile einfüge, ändert er die Logo-Höhe nicht nur auf meinem PC-Desktop, sondern auch auf dem Mobiltelefon. Ist das ein Fehler in Discourse oder übersehe ich etwas?

7

Ich habe versucht, das nachzubilden, was ich glaube, dass Sie tun, aber ich kann dies nicht reproduzieren:

Es ändert sich korrekt für Mobilgeräte und beeinträchtigt den Desktop nicht.

Wenn ich dieses CSS im Editor hinzufüge, funktioniert es wie erwartet für den Desktop:

image
image1630×1000 154 KB

Und für Mobilgeräte müssen Sie nur die Höhe für das Logo festlegen, nicht für den Header:

image
image782×852 78.2 KB

Ich hoffe, das hilft.

1 „Gefällt mir“
8

Danke, ich habe eine andere Maschine benutzt, eine, auf der Ubuntu 22.04 (Webserver) läuft. Der CSS-Code im Desktop-CSS-Bucket wurde korrekt gerendert, also vielleicht ein Browser-Problem auf meinem anderen PC-Desktop mit Windows 7.
Mir ist aufgefallen, dass ich im Mobile CSS-Bucket anscheinend auf Folgendes beschränkt bin:

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

Jeder Versuch, über 3em hinauszugehen, vergrößert die Logo-Höhe auf meinem Handy, GS23 - selbst nachdem ich den Cache geleert habe.

Gedanken?

9

Ja, versuchen Sie, die max-width des Logos zu entfernen. Das sollte es von allen Einschränkungen befreien.

1 „Gefällt mir“
10

Vielen Dank für die Eingabe. Ich konnte diese Option nicht unter Einstellungen finden. Wird dies über CSS oder eine Befehlszeileneingabe in Rails gemacht und wenn ja, wie sieht das aus?

11

Das wäre CSS, so:

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

Wenn das fehlschlägt, fügen Sie !important hinzu.

3 „Gefällt mir“
14

Vielen Dank für Ihre Hilfe:

Für diejenigen, die nach mir kommen und ihre Logo-Größe sowohl in der Desktop- als auch in der mobilen Ansicht erhöhen möchten.

  1. Anpassen → Themes → Standard → CSS/HTML bearbeiten

a) Im Desktop-Bereich einfügen:

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

b) Im Mobile-Bereich einfügen:

.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}
2 „Gefällt mir“
15

Das könnten eine Regel sein:

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

Ich denke, du könntest auch die erste Regel zusammenfassen, aber ich weiß gerade nicht, wie.

2 „Gefällt mir“
16

Eine weitere Sache, die hilfreich wäre, ist, wie man den Abstand reduziert, um das Logo in der mobilen Ansicht nach links zu verschieben – Gedanken dazu?

17 
.wrap {
  padding-left: 0;
}

An diesem Punkt könnte es eine gute Idee sein, einen Einführungskurs in CSS zu belegen, denn:

Mehr über die Entwicklung eigener Themes können Sie in der Entwickler-Kategorie lesen.

2 „Gefällt mir“
19

Danke Charlie, ich weiß das zu schätzen.
Ich bin mit der Verwendung von Inspector, z. B. Firefox, und der Ableitung einiger Lösungen vertraut.

Haben Sie eine Erklärung dafür, warum die Größenänderung von Logos kein Kernbestandteil von Discourse ist? Das Branding einer jeden Website ist entscheidend, und der Mangel an Granularität in dieser Hinsicht ist überraschend.

1 „Gefällt mir“
20

“Logo-Manipulation” ist perfekt möglich, genau wie alle anderen Arten von Styling, innerhalb von Themes und Theme-Komponenten.
Sie müssen entweder die Grundlagen von HTML/CSS/JS lernen und die Fülle an Dokumentation auf Meta durchgehen, um die Dinge selbst zu erledigen, oder Sie müssen jemanden suchen, den Sie einstellen können, um Ihre gewünschten Änderungen vorzunehmen.
Letzteres kann in der Marktplatz-Kategorie erfolgen.

Da Ihre ursprüngliche Frage beantwortet wurde, können wir dieses Thema meiner Meinung nach jetzt beenden.
Ich wünsche Ihnen viel Erfolg mit Ihrem Forum.

3 „Gefällt mir“
21

Ich persönlich würde nicht erwarten, dass die Größenanpassung eines Firmenlogos Teil der Kernfunktionalität einer Forenplattform ist. Darüber hinaus ist unsere Software Open Source und wir bieten solche Unterstützung, um Ihnen dabei zu helfen, wie wir oben gezeigt haben. Wir bieten auch viele Informationen zum Erlernen der Entwicklung eigener Anpassungen.

3 „Gefällt mir“
24

Hallo Charlie,

Mit „Logo-Manipulation“ meinte ich die Möglichkeit, die Größe des Logos innerhalb der Benutzeroberfläche zu ändern.

Danke für deine Hilfe.

25

Dieses Thema wurde 30 Tage nach der letzten Antwort automatisch geschlossen. Neue Antworten sind nicht mehr zulässig.