Pyx's Modernes Theme

:information_source: Zusammenfassung Pyx’s Modern Theme ist der Nachfolger von darkpixlz’s Modern Theme.
:eyeglasses: Vorschau Theme Creator
:hammer_and_wrench: Repository GitHub - pyxfluff/moderntheme: Modern theme for Discourse. · GitHub
:question: Installationsanleitung Wie man ein Theme oder Theme-Komponente installiert
:open_book: Neu bei Discourse-Themes? Einsteiger-Leitfaden für die Nutzung von Discourse-Themes
:heart: Liebst du dieses Theme? Unterstütze meine Arbeit und das Theme mit Github Sponsors!

Dieses Theme installieren

Pyx’s Modern Theme ist der Nachfolger meines alten Themes, darkpixlz’s Modern Theme, das ein Fork des Air-Themes war. Es war etwa 2500 Zeilen lang und hatte viele Probleme, also habe ich es neu geschrieben!

Screenshots

Kein Hintergrundbild-Stil

Funktionen

  • Modernes Unibody-Design, mit oder ohne Hintergrundbild
  • Unterstützt den vollständigen Discourse-Core und viele Plugins
  • Unterstützt jede moderne Kernfunktion
  • Anpassbares Hintergrundbild
  • Fügt eine --user-bg-url-Eigenschaft hinzu, damit deine Plugins das Hintergrundbild eines Nutzers auf Profilen lesen können
  • Viele Einstellungen und Optionen

Plugins

Ich plane, die meisten Kern-Plugins zu unterstützen. Sieh dir unten eine nicht erschöpfende Auswahl an Plugin-Screenshots an.

Alle Beiträge im Repository sind mehr als willkommen und werden (wahrscheinlich) am selben Tag überprüft. Kommentare oder Ideen? Hinterlasse hier eine Antwort. Probleme? Erstelle bitte ein GitHub-Issue, das ist einfacher zu verfolgen.

Bitte beachte, dass ich alle meine Styles nur für Firefox teste; wenn Chromium Probleme macht, zögere bitte nicht, einen Bericht zu erstellen. Mobile wird alle paar Updates überprüft und sollte im Allgemeinen unterstützt werden.

Das war’s für jetzt – genieße das Theme!

14 „Gefällt mir“


Nun, es scheint ein Problem damit zu geben, dass keine Komponenten installiert sind, und dann scheint es die CSS der Bilder zu ändern, wodurch viele davon zu Rechtecken werden.

Ja, das war ein Versehen. Ich habe vergessen, dass Komponenten Bilder wie diese hinzufügen können. Ein Fix wurde veröffentlicht :+1:

Das ist beabsichtigt, ich schätze, es sieht nur etwas falsch aus, wenn das Banner geschlossen ist. Ich werde sehen, was ich tun kann.


Ich habe ein anderes Bild ausprobiert und es schien ein kleines Problem zu geben, aber das Problem, das Bild zu einem Oval zu machen, ist verschwunden.

Ich frage mich, ob es möglich ist, eine adaptive Skalierung hinzuzufügen? Ich hätte gerne eine Seitenleistenkomponente auf der rechten Seite.

CSS
/* Ermittelt die Breite des Benutzeravatars und legt die maximale Breite des Anzeigencontainers fest */

/* Stile des Anzeigencontainers */
#list-area {
    display: flex; /* Anzeigen mit Flexbox anordnen */
    flex-direction: column; /* Anzeigen vertikal anzeigen */
    gap: 0; /* Abstand zwischen den Anzeigenbildern entfernen */
    padding: 0; /* Container-Padding entfernen */
    margin: 0; /* Sicherstellen, dass kein zusätzlicher Rand um den Anzeigencontainer vorhanden ist */
    max-width: 812px; /* Begrenzt die Breite des Anzeigencontainers auf maximal 812 Pixel (Avatarbreite: 48 Pixel) */
}

/* Stile des Anzeigenlinks */
.banner-ad {
    display: block; /* Macht den Anzeigencontainer zu einem Blockelement */
    width: 100%; /* Stellt sicher, dass der Anzeigencontainer 100 % der Breite einnimmt */
    max-width: 100%; /* Verhindert, dass die maximale Breite überschritten wird */
    margin: 0; /* Entfernt Abstände zwischen den Anzeigencontainern */
}

/* Stile responsiver Anzeigenbilder */
.ad-image {
    width: 100%; /* Stellt sicher, dass das Bild die volle Breite seines übergeordneten Elements einnimmt */
    height: auto; /* Behält das ursprüngliche Seitenverhältnis des Bildes bei */
    max-width: 100%; /* Verhindert, dass das Bild die maximale Breite seines Containers überschreitet */
    display: block; /* Behebt das Problem mit leerem Platz unter den Bildern */
    margin: 0; /* Entfernt zusätzlichen Platz um das Bild */
}

/* Responsives Design: Passt die Anzeigenanzeige für große und kleine Bildschirme an */

/* Passt die Anzeigenanzeige auf Geräten mit einer Breite von weniger als 768 Pixel an */
@media (max-width: 768px) {
    #list-area {
        padding: 0; /* Stellt sicher, dass auf Mobilgeräten kein zusätzliches Padding vorhanden ist */
    }

    .banner-ad {
        width: 100%; /* Stellt sicher, dass die Anzeige auf kleinen Bildschirmen die volle Breite einnimmt */
    }

    .ad-image {
        width: 100%; /* Stellt sicher, dass sich das Bild an die Containerbreite anpasst */
        height: auto; /* Behält das Seitenverhältnis des Bildes bei */
    }
}

/* Passt Anzeigenbilder auf sehr kleinen Geräten weiter an (z. B. Telefone im Hochformat) */
@media (max-width: 480px) {
    .ad-image {
        width: 100%; /* Stellt sicher, dass sich Bilder an die Bildschirmbreite des Telefons anpassen */
        max-width: 100%; /* Setzt die maximale Breite auf 100 %, um eine Übergröße zu vermeiden */
        height: auto; /* Behält das Seitenverhältnis des Bildes bei */
    }
}

1 „Gefällt mir“

Ich werde morgen die Seitenkomponenten-Sache überprüfen. Keine Versprechen bezüglich Werbung, weil ich das nicht testen kann, aber für die generelle Skalierung sollte ich das beheben können.

1 „Gefällt mir“

Gut gemacht! :clap: :star_struck: :discourse:

3 „Gefällt mir“

Update mit vielen Fehlerbehebungen und Unterstützung für die Kategoriebearbeitungsseite und andere Admin-Bereiche veröffentlicht!


@Monikas Ihr Problem mit den Seitentasten sollte jetzt auch behoben sein.

2 „Gefällt mir“

Entschuldigung, ich war diese Woche viel krank und hatte auch noch andere Dinge zu erledigen. Ich habe gerade den Post-Stream poliert, viele Fehler behoben und den Composer schwebend gemacht!

1 „Gefällt mir“

Außerdem ist mir aufgefallen, dass die Theme-Seite auf die alte Version zurückgesetzt wurde, was viele Probleme verursacht hat. Ich werde keine Anstrengungen unternehmen, dort etwas zu reparieren, da ich das Gefühl habe, dass es wieder hinzugefügt wird und so aussieht, wie es beabsichtigt war.

Gibt es eine Möglichkeit, ein Layout wie das unten zu haben:

Mit dem schönen Rendering und allem von diesem Thema? Wie kann ich auch die Bestenlisten-Seitenleiste und so haben (siehe unten):

Leider liegt das etwas außerhalb des Rahmens dieses Themas, da es absichtlich Unibody ist und ich daher kein Layout übernehmen würde, bei dem die Seitenleiste abgetrennt ist. Wenn Sie nach einem solchen Design suchen, empfehle ich Ihnen diese beiden erstaunlichen Themen:

Wenn Sie jedoch möchten, dass das Header-Banner unterstützt wird, können Sie mir gerne eine Website-URL geben und ich werde die Möglichkeit prüfen, es zu unterstützen.

Sehr cool

1 „Gefällt mir“

Hallo zusammen, entschuldigt die mangelnden Updates in letzter Zeit! Ich habe gerade die Unterstützung für die Review Queue und den Docker Manager hinzugefügt.



1 „Gefällt mir“

Hallo Leute,

Entschuldigt das langsame Update, ich habe letzte Woche die Änderung des Titels beantragt und nie wirklich nachgehakt. Ich habe versucht, das Theme auf meiner lokalen Seite zu synchronisieren, aber ich habe von einigen Portkonflikten erfahren, 8 Stunden später habe ich mein gesamtes Homelab nach Proxmox migriert. Kombiniert das mit der Woche, die ich mit persönlichen Projekten hatte (die Dokumentation von 4000 LOC Frontend + Backend ist nicht einfach) und man hat nicht viel Freizeit :melting_face:

tl;dr: Das Theme ist jetzt aus der „Vorschau“-Phase! :tada: Ich bin zuversichtlich, dass es für die meisten Websites funktionieren und gut gestylt sein wird. Mit dieser neuen Phase suche ich hier nicht mehr nach Fehlerberichten, bitte reicht stattdessen GitHub Issues ein.

Bitte gebt weiterhin Feedback – alles ist willkommen. Danke für eure anhaltende Unterstützung, auch wenn ich vielleicht langsam bin :3

1 „Gefällt mir“

Brillante trabajo como siempre, ¡gracias!

1 „Gefällt mir“

Hallo Leute,

Entschuldigt die Deprecation-Warnung, die ein paar Tage lang oben auf euren Websites angezeigt wurde :sweat_smile:, sie wurde jetzt behoben. Alles sollte wieder normal sein.

Mehr gute Nachrichten! Ich habe das Theme gerade noch einmal umgeschrieben, sodass es keine riesige gemeinsame SCSS-Datei mehr ist. Es sollte bis auf einige kleinere Korrekturen, die ich vorgenommen habe, nicht anders aussehen. Viel Spaß :3


3 „Gefällt mir“

Das Thema hat mir wirklich gut gefallen, aber es gibt einige „Artefakte“, die mich davon abhalten, es zu verwenden :frowning:

  • Auf der Seite „Profil“ befindet sich hinter dem Header ein kleiner Button mit der Aufschrift „Zum Inhalt springen“.
  • Wenn ich versuche, eine andere Farbpalette auszuwählen (als Benutzer, in meinem Profil), wird die Dropdown-Auswahl neben dem oben erwähnten Button „Zum Inhalt springen“ angezeigt (so habe ich bemerkt, dass er da ist).
1 „Gefällt mir“

@darkpixlz Ich habe ein Video aufgenommen, weil mir klar ist, dass mein Feedback schwer zu verstehen sein könnte :smiley: