Mir hat das 2016 geteilte Theme von @jsthon sehr gut gefallen . Da sie seit dem ursprünglichen Post nicht mehr aktiv sind, habe ich es aktualisiert, erweitert und auf GitHub hochgeladen.
Deaktiviert das Hintergrundbild und die Kacheloptionen oben.
Dieses Theme verfügt über drei Einstellungen:
Ein Feld zum Hinzufügen eines eigenen Hintergrundbilds
Eine Option zum Kacheln des Bildes
Eine Option zum Entfernen beider oben genannten Optionen
Wenn Sie die Kacheloption deaktivieren, wird das Bild auf background-size: cover gesetzt, und Ihr Browser skaliert das Bild proportioniert, um den gesamten Hintergrund abzudecken. Zum Beispiel:
Bin ich der Einzige mit diesem Problem bei diesem Theme? Wenn ich es bei Google PageSpeed teste, erhalte ich 99 %, aber die Seite lädt nicht, sodass die Ergebnisse irreführend sind.
Woran liegt es, dass Google die Seite nicht sehen kann – sie wird nicht geladen?
Hmm, ja, ich sehe das gleiche Problem… Es scheint, als würde etwas im Theme die Version von Discourse, die wir Google ausliefern, stören. Ich werde das untersuchen. Es sieht so aus, als könnte es sich um dasselbe Problem handeln, das auch die oben gemeldete Druckansicht beeinträchtigt.
Ich versuche, Graceful auf dem Desktop deutlich breiter zu gestalten. Ich habe folgendes versucht:
#main-outlet {
width: auto;
max-width: 1210px; /* Dies macht den Container so breit wie die Logo-/Header-Steuerelemente */
}
Dieser CSS-Code hat den gesamten Container breiter gemacht; und die vorgeschlagenen Themen am Ende erstrecken sich schön über die Seite, aber die Gesamtbreite der Beiträge in den Themen ist für meine breite Version zu schmal.
Ich habe den Inspektor verwendet und verschiedene Elemente ausprobiert, aber da ich kein Experte bin, konnte ich die Breite der Themen/Beiträge nicht an die Breite von #main-outlet anpassen.
Hättest du nichts dagegen, mir zu helfen?
Vielen Dank
Außerdem habe ich folgendes versucht:
#main-outlet {
width: auto;
max-width: 80%;
}
Aber ich kann die Breite der Beiträge nicht an die Breite des Containers anpassen:
Ich liebe dieses Theme bisher sehr. Vielen Dank, dass du es mit uns geteilt hast!
Mir ist aufgefallen, dass die farbigen Balken für Kategorien in der mobilen Ansicht verschwinden. Ist das beabsichtigt und gibt es eine Möglichkeit, sie wiederherzustellen?
Außerdem: Gibt es eine Option, den Hintergrund auszuschalten, wenn eine Kategorie einen Hintergrund eingestellt hat? Es funktioniert zwar grundsätzlich gut, aber beim Scrollen in langen Beiträgen wird der Bildschirm ruckelig und man kann den vom Theme festgelegten Hintergrund kurz sehen.
Ich muss wohl etwas stur sein, aber ich kann das Logo nicht mit einer Theme-Komponente ändern, die zur Anpassung von CSS erstellt wurde. Ich kann die gesamte Kopfzeilenhöhe ändern, aber das Logo bleibt hartnäckig gleich. Dieser CSS-Code scheint alle Änderungen, die ich vorzunehmen versuche, zu blockieren:
.d-header #site-logo {
max-height: 35px !important;
}
Laut der Chrome-Entwicklerkonsole stammt dies aus: desktop-scss-graceful.scss
Die Logo-Größe lässt sich im Standard-Theme problemlos ändern, und wie gesagt, funktioniert die Änderung der Kopfzeilenhöhe auch bei Graceful – nur nicht beim Logo…
Ja, !important überschreibt jedes andere CSS ohne !important… Ich erinnere mich nicht mehr genau, warum es dort steht, aber ich sollte prüfen, ob ich es entfernen kann. Funktioniert es, wenn du !important in deinem eigenen CSS verwendest?
.d-header #site-logo {
max-height: 50px !important; // <--- hier deine benutzerdefinierte Höhe
}
Danke für die schnelle Antwort! Ich hatte das !important bereits bemerkt und versucht, es bei mir hinzuzufügen, leider ohne Erfolg. Das Seltsame ist: Wenn ich diese Änderung jetzt speichere und die Seite neu lädt, erscheint das Element für einen Moment in der richtigen Größe, verkleinert sich dann aber wieder. Und im Inspector scheint alles korrekt zu sein:
Zumindest insofern, als dass die 35px deaktiviert sind. Die Reihenfolge wirkt jedoch zumindest merkwürdig. Und auf jeden Fall funktioniert es immer noch nicht. Seltsam.
Ich füge das zur Information in das Common CSS ein…
Update: Ich habe es gefunden! Es ist:
.d-header #site-logo {
height: 2.667em;
}
in der header.scss!
Und wenn ich meine eigene height:-Eigenschaft mit !important hinzufüge, funktioniert es!
. Da sie seit dem ursprünglichen Post nicht mehr aktiv sind, habe ich es aktualisiert, erweitert und auf GitHub hochgeladen.
Von uns gehostet? Themes können auf unseren Standard-, Business- und Enterprise-Plänen verwendet werden.
