Hallo Mike,

schau nochmal in die shoutbox.php. Dort findest du dann eine Tabelle als table-Tag, bei der du die drei TR-Tags (Rows/Zeilen) und zwei TD-Tags umschreibst zu zwei TRs mit drei TDs. Dann hast du rechts eine dritte Spalte für die Smilies. Wenn das also geklappt hat, kannst du noch mit Rowspan die letzte Spalte über beide Zeilen strecken lassen, damit sie die gesamte Höhe von Name und Nachricht einnehmen kann.

Wenn dich bei deiner breiten Shoutbox die Zentrierung der Textfelder und Labels stört, dann setze in der shoutbox.css im Selektor "#shoutbox .sbx_bottom" das text-align auf left oder entferne es einfach ganz.

Um die Nachrichten direkt hinter den Namen anzeigen zu können, musst du ebenfalls wieder eine Tabellen-Struktur abändern. Diese befindet sich diesmal in der get_messages.php. Dort siehst du dann einige Zeilen, welche mit der Variablen $return_code arbeiten, genauer gesagt sind die Zeilen 19 und 26 relevant. Dort wird der Aufbau der Zeilen und Spalten durchgeführt. Dort musst du beide TDs in einer einzigen TR zusammenfassen, um eine Zeile mit zwei Spalten zu erhalten.

Hi Mike,

vielleicht macht das DIV zwischen TR und TD Probleme, das ist dort nicht erlaubt. Ich dachte eher an zwei TDs (Spalten) nebeneinander in einer Zeile.

$return_code = '<tr class="row_name"><td class="name">'.replaceBBCode(replaceChars($msg_user['name'])).':</td><td class="nachricht">'.replaceBBCode(replaceChars($msg_user['nachricht'])).'</td></tr>'."\r\n".$return_code;
 

Dementsprechend müssen sich die Zeilen auch bei den leeren Einträgen über zwei Spalten erstrecken, statt einem zusätzlichen leeren TD besser nur mit colspan.

$return_code = '<tr class="row_name"><td colspan="2" style="border-top:0px;">'.$msg_empty.'</td></tr>'."\r\n";
 

Was sonst noch nicht im Style greift und warum weiß ich so jetzt natürlich auch nicht. Am besten spielst du da mal im Inspektor rechts mit den CSS-Styles herum, bis du ein passendes Ergebnis erhälst. Danach kannst du das dann immer noch fest in die CSS-Datei reinschreiben.


Die schwarze Box oben ist vermutlich nur einzusätzliches HTML-Element, welches du vor die Shoutbox geschrieben hast. Du könntest das in der "shoutbox.php" im DIV mit der ID shoutbox direkt am Anfang reinnehmen, also direkt vor dem DIV mit der Klasse sbx_messages (welches die Einträge enthält). Dann wird es auch vom allgemeinen Rahmen um die Shoutbox umfasst und die Breiten stimmen dann auch wieder. Evtl. musst du hier und da noch an der ein oder anderen Kante etwas Margin oder Padding draufgeben, so wie es dann eben am besten aussieht.

Die CSS-Selektoren passen nach der Änderung der Zeilen natürlich nicht mehr ganz, da die zweite Zeile für die angezeigte Nachricht rausgeflogen ist. Stattdessen gibt es nach meinem Ersetzungsbeispiel nur noch die Spalten mit den Klassen name und nachricht.
Du könntest nun bspw. mit folgenden Selektoren den Style des Namens bzw. der Nachricht ändern:

.row_name .name {
	[…]
}
.row_name .nachricht {
	[…]
}
 

Noch schöner wird es, wenn du noch die Klasse row_name im class-Attribut und dann natürlich auch den Selektoren noch passender benennen würdest, ist nach den Änderungen nicht mehr unbedingt die beste Bezeichnung, aber so sollte das zumindest erstmal funktionieren.


Bei der Box darüber und dem IFrame könntest du evtl. die Abstände mit margin auf 0 reduzieren und auch die Box auf die gleiche Breite wie der IFrame setzen, damit es optisch etwas zusammenrückt. Wenn du es direkt in der Shoutbox selbst integrieren möchtest, dann sollte das auch im dortigen Code gemacht werden, da ein IFrame nur eine Art Fenster zu einer anderen kompletten Seite und der direkte Zugriff per Skript und Style von außen stark eingeschränkt ist.


Zumindest fett, unterstrichen und kursiv werden bereits im Textfeld unterstützt und sind die ersten, welche in der bbcodes.inc angelegt wurden. Sie bestimmen, wie ein BBCode durch HTML-Code ersetzt wird. Wenn du die BBCodes über die Symbolbar zugänglich machen möchtest, dann kannst du dafür ein Bild (Button etc. …) in der Symbols.inc anlegen. Verpass deinem neuen Bild dann einfach auch ein onclick-Attribut, wie bspw.:

onclick="insert('[b]', '[/b]');"
 

Für Farben im Wechsel könntest du vielleicht mal etwas mit dem CSS-Selektor :nth-child herumprobieren. Du setzst erst eine allgemeine Farbe für alle .name-Zellen und dann eine alternative für die Zellen in allen 2n Reihen. Oder 2n+1 für die ungeraden bzw. even und odd gehen auch, wenn es nur zwischen zwei Farben wechseln soll.

.row_name .name {
	/* Standard-Farbe */
}
.row_name:nth-child(2n) .name {
	/* Wechsel-Farbe */
}