Kennst du schon...? - Ein Hintergrundbild für den Chat
22.10.2013 10:56

Unter "Kennst du schon...?" stelle ich euch regelmäßig kleinere oder größere Features und Einstellmöglichkeiten vor, die in den Tiefen der Xobor Forensoftware versteckt sind. Warum wir sie ans Licht holen? Weil sie alle euren Forenalltag ein kleines bisschen leichter machen.

Heute: Ein Hintergrundbild für den Chat

Wo zu finden?

Admin → Layout → Farben&Einstellungen → CSS

Was ist es?

Ein CSS Befehl um dem Chat ein Hintergrundbild zu geben.

Wofür ist es gut?

Gestern habe ich euch verraten, wie ihr die Schriftfarbe in eurem Chat anpassen könnt.

In den Kommentaren unter dem Artikel findet ihr viele weitere Ideen und CSS-Schnipsel, mit denen ihr euren Chat weiter anpassen könnt. Eine Frage die dort gestellt wurde, möchte ich im heutigen Artikel beantworten:
Wie ihr ein Hintergrundbild in euren Chat bekommt.

Es funktioniert wie im letzten Artikel auch, indem ihr folgenden Code wie oben angegeben in eure CSS eingebt:

.xChatMain{background: url("https://files.homepagemodules.de/b2001010/a_857_95ce281c.gif");}
.xChatMessage,.users_cont{background: url("https://files.homepagemodules.de/b2001010/a_866_1f19b0bd.png") !important;}

Der blaue Link ist die Hintergrundgrafik die ihr im Bild seht. Diese könnt ihr mit eurer Wunschgrafik austauschen.
Der rote Link ist eine halbtransparente Grafik, die dafür sorgt, das der Hintergrund durch die Schreibzeilen durchschimmert.
Wenn ihr diesen Teil des Codes entfernt, werden die Schreibzeilen und die Leiste rechts normal weiß (deckend) ausgegeben.
Ich empfehle also, nur den blauen Link bei Bedarf auszutauschen.




PS: Habt ihr Ideen oder Wünsche für ein "Kennst du schon...?", etwas das eurer Meinung nach für alle beleuchtet und als kurzes Tutorial dargestellt werden sollte?
Dann schreibt mir einfach eine PN (Alice) und umreißt euren Vorschlag kurz.
Und keine Angst - "blöde" Vorschläge gibt es nicht.

Informationen zu diesem Artikel
  • Erstellt von: Alice
    Kategorie: Community
    22.10.2013 10:56:00 Uhr

    zuletzt bearbeitet: 22.10.2013 10:56
  • 6 Kommentare
Kommentare
avatar
TripleM
Diesen Kommentar wirklich löschen?
08.11.2013 19:32

Mir ist nun noch aufgefallen das die Schrift für die Einstellungen relativ schwer zu sehen ist wenn man ein Chatbild hat und die Schrift Schwarz



das kann man mit einen CSS Eintrag gut Umgehen. Hier im Business getestet Andere Templates keine Gewähr.

1
2
3
4
 
.chat_settings {
    background-image: url("https://files.homepagemodules.de/b541474/a_528_4bf5de80.jpg");
    border: 1px solid #030003;
    }
 



Danach schaut es so aus



Das Bild kann man natürlich entsprechend anpassen.
Der Borderwert ist die Linie um das Bild die man natürlich Breiter und anders Farbig gestalten kann.

avatar
Sandbarsch
Diesen Kommentar wirklich löschen?
23.10.2013 12:20

Ich habe es nach vielen probieren endlich hin bekommen Herzlichen Dank für die kl. Denkanstöße von euch

avatar
Romulus
Diesen Kommentar wirklich löschen?
22.10.2013 14:47

Ich würde sagen, das ist eines der besten Kennst du schon...? Gerade das Chatfenster hat schon so einige von uns immer wieder vor richtige Herausforderungen gestellt, wenn wir da irgendwo Anpassungen vornehmen wollten. Und nicht selten konnte dann nur noch Olaf helfen (welcher ganz offenbar einen "Lotto-Sechser" im angeborenen CSS- und HTML-Verständnis gemacht zu haben scheint).

Mit Deinem heutigen Tipp, der auf den ersten Blick so unschuldig daherkommt, tun sich jedenfalls ein paar ganz tolle Möglichkeiten auf! Vielen herzlichen Dank!!

Gast
( Gast )
Diesen Kommentar wirklich löschen?
22.10.2013 14:38

In diesem Fall musst du wirklich experimentieren. Unser Beispiel ist ein kleines Bild, das sich immer wiederholt, sodass die Größe egal ist. Wenn du ein festes Hintergrundbild nutzen willst, musst du mit der Größe herum probieren.

Ansonsten kannst du dir den Hintergrund auch weiter über CSS gestalten. Ideen und Hinweise dazu gibts im Internet, zum Beispiel in der w3school.

avatar
TripleM
Diesen Kommentar wirklich löschen?
22.10.2013 14:20

Also ich habe es mal in 2 meiner Foren eingebaut und habe die Bildgröße 1250 x 335 genommen. Musste ziemlich Lange Testen um die Richtige Größe hin zu bekommen.



Ich würde mal ein wenig Experimentieren. Bin jedenfalls begeistert. Danke Alice für den Schönen Tip.

avatar
Sandbarsch
Diesen Kommentar wirklich löschen?
22.10.2013 12:58

Hi
Sehr nice mit dem Bildchen, habe mich gleich dran gemacht und es bei eingebaut, was auch klappt aber ich ich sehe das Bild nach Einbau immer leicht nach links verschoben und das ist ein bisschen störend? wie kann ich das ändern und wie groß sollte denn das Bild sein was ich als Hintergrund benutzt möchten für den Chat?

Danke schön für hilfreiche Tipps

Viele Grüße Carsten

Sie haben nicht die nötigen Berechtigungen, um neue Kommentare zu verfassen

Blog empfehlen
Andere Artikel dieser Kategorie, die für Sie interessant sein könnten
Neueste Artikel der Kategorie Community