[Tutorial][phpBB2] Beitrag als Sprechblase

von Keks Fr 6 Apr 2018 - 17:41



Beitrag als Sprechblase [phpBB2]

TUTORIAL

ACHTUNG - DIESES TUTORIAL IST FÜR FORTGESCHRITTENE

Bestimmt hat es der ein oder andere in einem Forum schon gesehen, das ein Beitrag wie eine "Sprechblase" aussieht?
Dabei wurde einfach nur ein Dreieck an eine bestimmte Stelle gesetzt um einen Beitrag optisch zu verändern. Ich habe oft gesehen, das manche Admins dies an falscher Stelle eingesetzt haben oder einfach nur direkt "postbody" ansprechen. Dies kann zu unsauberen Ergebnissen führen. Es empfiehlt sich daher eine neue Class zu setzen und "postpody" gar nicht erst anzusprechen, denn diese Class kommt in dem Template an verschiedenen Stelle vor. Und es sieht einfach unschön und nicht ordentlich aus, wenn ein Dreieck einfach irgendwo herum schwebt ohne Sinn und Zweck. (Wie gewollt und nicht gekonnt) Daher habe ich euch hier zwei Möglichkeiten vorgestellt wie Ihr das hinbekommen könnt.

VORSCHAU - Eine Sprechblase als Beitrag:
Tuto* Tutorial - [Tutorial][phpBB2] Beitrag als Sprechblase Beispi10

DAS CSS:
(angepasst auf eine Forenbreite von 980px, für alle breiteren Foren bitte manuell anpassen im CSS)

Code:: /* Sprechblase im Beitrag*/ .sprechblase01:before{ content:''; border:transparent 40px solid; border-right: 40px solid #000; /* Größe und Farbe des Dreiecks Hex austauschen*/ position:absolute; margin-left:-90px; color:#; margin-top:20px; } .sprechblase01{ background:#000;/* Hintergrund-Farbe des Feldes im Beitrag */ color:#fff;/* Schriftfarbe */ min-height:150px; padding-left:25px; padding-right:25px; padding-top:20px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; }

Die Farbe des Dreiecks kann natürlich angepasst werden - Hex: #D8E9F4 - einfach austauschen ^{(Das Dreieck sollte für die optische Täuschung die selbe Farbe wie der Hintergrund haben/ nicht vergessen auch auszutauschen)}.

Manchmal kann das Dreieck zu sehr rechts oder zu links angezeigt werden, auch zu hoch oder zu tief?!
Wer dies also etwas versetzen möchte kann gerne im Css folgendes verändern:
margin-left: hier einstellen ob es mehr nach links (dann ein - vor der Zahl) oder mehr nach rechts (dann die Zahl höher) stehen soll
margin-top: Der Abstand zu oben auch hier: (höher - vor der Zahl) und tiefer (Zahl erhöhen)

Das "DIV" bitte nutzen:

Code:: <div class="sprechblase01">

Schließen nicht vergessen:

Code:: </div>

Stelle im Template: viewtopic_body --> Suchen:

Code:: {postrow.displayed.MESSAGE}

Setze die Class an diesen Teil im Template:

Code:: (HIER)<div class="postbody"> <div>{postrow.displayed.MESSAGE}</div>

Schließe die Class nach dieser Stelle im Template wenn die Signatur in der Sprechblase sein soll (Möglichkeit 1.):

Code:: <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span> (hier)

Wenn ihr die Signatur unterhalt der Sprechblase haben möchtet, dann schließt das Div bitte hier (Möglichkeit 2.):
(Setze nicht dazu die Schließung des Div aus Möglichkeit 1.)

Code:: <div class="signature_div"> {postrow.displayed.SIGNATURE} </div>  (HIER)

Wir hoffen, euch gefällt dieses Tutorial! Smile

Euer Team von Forumieren king

	Neue Beiträge seit dem letzten Besuch.	
	Textbausteine des MODERATIONSTOOL	
	AB > PFAD > GENERATOR	
	FORUM > PFAD > GENERATOR	
	Unterstützung Lösungs-Probleme	
	Auffällige User	
	Der Runde Tisch	
	HÄUFIG GESTELLTE FRAGEN	