[phpBB2] Sprechblase, wo soll der code eingesetzt werden

Hallo, ich habe gestern ewigekeiten nach einer antwort gesucht, aber nichts gefunden. Denn ich möchte für mein Forum:
http://warrior-cats-forum.forumieren.net/
Die Beiträge in Form von sprechblasen bekommen, also mit einem dreieck am rand der box. Bei meiner Suche bin ich auf diesen Code gestoßen von dieser Seite

HTML Code:

Code:

<div id="left-triangle"></div>

CSS Code:

Code:

#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid #037CA9;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}


Dann habe ich aber noch einen anderen Code gefunden:
HTML Code:

Code:

<div id="speech-bubble "></div>

CSS Code

Code:

#speech-bubble {
   width: 120px;
   height: 80px;
   background: #037CA9;
   position: absolute;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
}
 
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid #037CA9;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}


Sollte ich den Code vom dreieck oder von der Sprechblase nehmen?
Wo ich das CSS einsetzte ist klar aber wo kommt das mit dem HTML hin

In welches Forum soll das denn eingesetzt werden

HTML gehört ohnehin grundsätzlich in ein Template.
Hier hätte ich aber auch noch einen Lesetipp für Dich, gefunden nach ca. 5 Sekunden.

LG inde

In das Forum das ich angegeben habe.

So den Code habe ich mit dem padding-left, im CSS eingefügt, jedoch ist die Form keine Sprechblase sondern ein Quadrat mit runden Ecken, wie und wo soll ich das Dreieck den einsetzten?


Edit: Hab was gefunden, das Dreieck ist im Text drin und wie kann ich es verschieben und wenngleich formen (also größer zu Beispiel)? Ich habe das Dreieck mal eingefärbt damit man es besser sieht.

Moonstar schrieb: Hab was gefunden, das Dreieck ist im Text drin und wie kann ich es verschieben und wenngleich formen (also größer zu Beispiel)? Ich habe das Dreieck mal eingefärbt damit man es besser sieht.

Ein wenig Kenntnisse in HTML, CSS sowie vom Umgang mit einem Debuger wie z.B. Firebug o.ä. würden auch Dir gut tun.

Code:

.postbody:before {
    border-bottom: 20px solid transparent; /*untere Länge des Dreiecks*/
    border-right: 40px solid #fff; /*rechte Länge des Dreiecks sowie Farbe*/
    border-top: 20px solid transparent; /*obere Länge des Dreiecks*/
    content: "";
    margin-left: -58px; /*Abstand nach Links*/
    margin-top: 10px; /*Abstand von oben*/
    position: absolute;
}

Schau Dir bitte einmal innerhalb des obigen Codes die Kommentare an. Um das Dreieck zu vergrößern, berechne bitte die Abmaße dafür im Dreisatz. Somit sollte das Maß "border-right" stets doppelt so groß sein.
Die Abstände kannst Du wie in den Kommentaren angezeigt selbst verändern in positive wie auch in negative Werte.

Einen Lesetipp habe ich noch für Dich... klick.

LG inde

Den letzten Lesetipp hab ich schon jedes Mal bei dieser Frage gelesen aber danke dass du dir Zeit genommen hast. Jedoch kann ich es noch nicht umsetzten den ich fahr in den Urlaub und habe dort keine Zeit womöglich, werde danach aber mich intensiver mit dem Code beschäftigen.

Nun wenn Du nicht einmal die 1 Minute Zeit findest den Code in Dein persönliches CSS einzusetzen, dann muss man sich auch nicht darüber wundern wenn man dann keine Unterstützung dazu bekommt.
Auch solltest Du einmal einen Blick auf die Uhr riskieren, nach 22.°°Uhr
Ich glaube auch kaum das dass Thema hier solange offen ist, bis Du aus Deinem Urlaub zurück bist.

LG inde

Darum hab ich mir den Code jetzt schon angeschaut? Das mit dem Dreieck vergrößern funktioniert doch das Dreieck kann ich nicht an dem Rand verschieben egal was ich einstelle

Edit: ich hab den Fehler und es ist mir total peinlich, da ich am Handy bin musste ich alles abtippen da kopieren im CSS Stylesheet nicht geht und dabei ist ein i bei margin zu viel gewesen die Frage hätte sich dan geklärt aber vielen Dank für deine Geduld.