[3.2] Post Buttons unter dem Beitrag anzeigen

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Stellanebula
Mitglied
Beiträge: 62
Registriert: 06.09.2022 22:21
Kontaktdaten:

Re: [3.2] Post Buttons unter dem Beitrag anzeigen

Beitrag von Stellanebula »

Uh ... ok, ... also die "gleiche" Datei nur dann eben mit "top"? Und wo rufe ich dann diese zweite .css Datei auf?
Viele Grüße,
Markus
hackepeter13
Valued Contributor
Beiträge: 3545
Registriert: 21.04.2004 12:22
Wohnort: Berlin
Kontaktdaten:

Re: [3.2] Post Buttons unter dem Beitrag anzeigen

Beitrag von hackepeter13 »

Stellanebula hat geschrieben: 22.10.2022 17:40 Da wir aber teilweise sehr ... also seeeehr lange Beiträge im Forum haben wäre es geschickt, wenn die Buttons sowohl oben und unten erscheinen würden.
Ich habe es bei mir so gelöst, das die Buttons (+ der Beitragsbetreffzeile mit Datum, sowie die Userinfos) immer für den jeweiligen Beitrag beim scrollen am oberen Bildrand fixiert bleibt.
Das ist für längere Beiträge echt lohnenswert, da optisch nur der Beitragstext weiterscrollt und alle Informationen zum Beitrag "stillstehen".
Besonders wenn man solch längere Beiträge moderieren will, ist es praktisch.
Hier ein Beispiel aus meinem Forum.

Das ganze lässt sich einfach per css mittels position: sticky; lösen. Hat man noch zusätzlich (wie bei mir) eine fixe Menüleiste, dann muss man der Position noch mit Hilfe von top: #px; (# = Zahl) die Höhe der Menüleiste mitteilen, damit es darunter festhängen bleibt.
Benutzeravatar
SeewolfPK
Mitglied
Beiträge: 408
Registriert: 11.05.2010 21:45
Kontaktdaten:

Re: [3.2] Post Buttons unter dem Beitrag anzeigen

Beitrag von SeewolfPK »

hackepeter13 hat geschrieben: 23.10.2022 14:23 ...

Das ganze lässt sich einfach per css mittels position: sticky; lösen. Hat man noch zusätzlich (wie bei mir) eine fixe Menüleiste, dann muss man der Position noch mit Hilfe von top: #px; (# = Zahl) die Höhe der Menüleiste mitteilen, damit es darunter festhängen bleibt.
Wäre schön, wenn auch verraten wird, in welcher Datei die Änderung notwendig wäre.
Gruß Paul (Freunde nennen mich auch Paulchen Panther) https://www.reisemobiltreff.de https://www.seewolfpk.de
Benutzeravatar
IMC
Mitglied
Beiträge: 538
Registriert: 25.11.2018 20:32
Wohnort: Lüneburg
Kontaktdaten:

Re: [3.2] Post Buttons unter dem Beitrag anzeigen

Beitrag von IMC »

hackepeter13 hat geschrieben: 23.10.2022 14:23...
Das ganze lässt sich einfach per css mittels position: sticky; lösen. Hat man noch zusätzlich (wie bei mir) eine fixe Menüleiste, dann muss man der Position noch mit Hilfe von top: #px; (# = Zahl) die Höhe der Menüleiste mitteilen, damit es darunter festhängen bleibt.
Die Idee gefällt mir. So wie ich das im Moment sehe müsste bei dem Prosiver Style noch etwas im Template geändert werden um den gesamten Header eines Beitrages "sticky" zu machen. Für das Profilfeld geht es mit den Ergänzungen problemlos.
Gruß, Thorsten
hackepeter13
Valued Contributor
Beiträge: 3545
Registriert: 21.04.2004 12:22
Wohnort: Berlin
Kontaktdaten:

Re: [3.2] Post Buttons unter dem Beitrag anzeigen

Beitrag von hackepeter13 »

IMC hat geschrieben: 23.10.2022 15:31Die Idee gefällt mir. So wie ich das im Moment sehe müsste bei dem Prosiver Style noch etwas im Template geändert werden um den gesamten Header eines Beitrages "sticky" zu machen.
Richtig, wenn Beitragstitel und die Buttons sticky sein sollen.

Das ist aber einfach erledigt:
Im Template viewtopic_body.html muss <h3>...</h3> und das gesamte <ul class="post-buttons">...</ul> in einen <div></div> gepackt werden.
Der DIV-Container bekommt die class="postheader", also sieht das dann so aus:

Code: Alles auswählen

<div class="postheader">
	<h3>...</h3>
	<ul class="post-buttons">...</ul>
</div>
(<p class="author">...</p> kann natürlich auch noch da rein.)

In einer css, wie bspw. content.css wird dann die Klasse definiert:

Code: Alles auswählen

.postheader {
    position: sticky;
    top: 0;
    background-color: #xxxxxx;
}
PS: background-color: muss natürlich der Farbcode vom Posthintergrund sein.
Jetzt kann es dort etwas tricky werden, je nach verwendetem Style, denn in der Regel sind die Hintergründe der Beiträge oft abwechselt mittels bg1 und bg2 mit unterschiedlichen Farben definiert.

Abhilfe: wenn man in der css-Datei das background-color: weg lässt und <div class="postheader"></div> in <div class="postheader<!-- IF postrow.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->"></div> ändert.
Antworten

Zurück zu „Styles, Templates und Grafiken“