[Tutorial][phpBB2] Beitrag als Sprechblase

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tutorial][phpBB2] Beitrag als Sprechblase

Beitrag von Keks am 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:



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:
<!-- BEGIN switch_signature --><div class="signature_div">
 {postrow.displayed.SIGNATURE}
 </div>
 <!-- END switch_signature --> (HIER)



Wir hoffen, euch gefällt dieses Tutorial! Smile

Euer Team von Forumieren king


→ Am besten halten wir die Welt einmal an und lassen die ganzen Idioten aussteigen. ← 
  KEIN SUPPORT VIA PN │   Bitte keine unaufgeforderten Pns senden │ → "Lexi Help" bitte benutzen 
>>>Danke euer Keks<<<
avatar
Keks
Moderator
Moderator

Weiblich Beiträge : 1377
Hinweis : Wer Rechtschreibefehler findet darf sie behalten!
Anmeldedatum : 08.08.16
keine
Chrome phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten