Teammitglieder online
Support-Box
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
Regeln und nützliche Hinweise
Neueste Themen
» [Invision] Profil Drop Down verschoben
von Skouliki Sa 20 Jul 2024 - 17:01

» [Invision] Erklärung PWA Aktivierung + Mobile Version Problem
von Skouliki Do 18 Jul 2024 - 23:47

» [Invision] Beschreibung der Kategore einfügen
von Joost Mi 17 Jul 2024 - 8:52

» [Invision] Gefällt mir Button erscheint nicht
von Joost Mo 15 Jul 2024 - 18:14

» Goldhauch´s Plauderforum
von Joost Fr 12 Jul 2024 - 19:34

» [Invision] User Style Änderung - Code geht nicht
von Skouliki Do 11 Jul 2024 - 23:03

» [PunBB] Forum aufsplitten/teilen - ist das möglich?
von Joost Mi 10 Jul 2024 - 17:46

» Technische Wartung in der Zentrale: Montag 1 Juli, und Montag 8 Juli
von Joost Mo 24 Jun 2024 - 17:20

» [phpBB2] Mystic - new beginning RPG
von Raine Kamiya Fr 21 Jun 2024 - 20:52

» Neue Mitarbeiter gesucht
von Joost Fr 21 Jun 2024 - 20:26

» Lange Ladezeiten
von Skouliki Mi 19 Jun 2024 - 19:35

» Gründer E-Mailadresse ändern
von Skouliki Fr 7 Jun 2024 - 12:49

» Nach Wartung Datenbankfehler
von Joost Mo 3 Jun 2024 - 12:34

» Wartung geplant Montag, 3. Juni 2024
von Joost So 2 Jun 2024 - 8:04

» Anti-Spam-Prüfung bei Mitgliedern
von Skouliki So 12 Mai 2024 - 18:10

» Die Heidekriger (WaCa) mit Punktesystem
von Rama So 21 Apr 2024 - 20:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Di 9 Apr 2024 - 14:03

» [AwsomeBB] LogIn Farbe Weiß auf weiß
von Skouliki Sa 30 März 2024 - 21:14

[Tutorial][phpBB2] Beitrag als Sprechblase

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tutorial][phpBB2] Beitrag als Sprechblase  Empty [Tutorial][phpBB2] Beitrag als Sprechblase

Beitrag 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:
[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:
<!-- 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
Keks
Keks
Mod a.D.
Mod a.D.

Weiblich Beiträge : 1394
Anmeldedatum : 08.08.16
keine
Google Chrome phpBB2

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

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