How to add a chat background?

by Swagbito January 10th 2015, 1:10 am

Title. Want to know the code for a chatbox background without changing the forum's bg.

by \isogriv.\ January 10th 2015, 1:41 am

Hello,

I believe I am capable of answering this question. Normally, the chatbox's colour will follow the colour of the forum's "body", as the chatbox is a "body class" div. To change the chatbox's colour alone, you may go into the CSS section of the site. By clicking "Display" in the admin panel, and subsequently 'Colors' under the "Pictures and Colors" section, there will be a tab that says "CSS Stylesheet" (just in case you weren't already aware of all of this). There, the following code should turn the colour into whatever you desire.

Code:: body.chatbox {background-color:#??????;}

This code should change the background of the section where messages are shown, as well as the section in which the users inside the chatbox are shown. It should not effect the chatbox header's colour, or any other surrounding elements. Replace the question marks with the HTML code of the colour of your choosing.http://html-color-codes.info is a site that has all of the possible HTML colours, so that you may be as specific as possible with your desired colours. There are other codes to change essentially each and every individual element in the chatbox, and I may provide them if you would like. Here is an example of the effects of changing the chatbox's colours with the provided code.

How to add a chat background? Screenshot2015-01-09at43305PM_zps56382759

In this image, the chatbox is following the current colours of the rest of the forum. By adding " body.chatbox {background-color:#00ff00;} " into the CSS Stylesheet, the colours have changed to the following image.

How to add a chat background? Screenshot2015-01-09at43254PM_zps9c0af3a7

Here you can see which colours are changed by the CSS code and which are kept the same. As aforementioned, it is possible to change essentially the colour of every part of the chatbox. If the current code is not sufficient, please reply and I will provide further codes for other aspects.

by Swagbito January 10th 2015, 1:43 am

I want an image...

by \isogriv.\ January 10th 2015, 1:46 am

If you desire an image as your background instead of a colour, it is easily changed.

Code:: body.chatbox {background-image:url(http://Place_URL_Here.com/loremipsum.png/);}

Here is another example of how it should look after placing the code into your CSS Stylesheet. I used "https://i.servimg.com/u/f39/19/01/34/63/alciem12.jpg" as the image for the background, and this is how it turned out:

How to add a chat background? Screenshot2015-01-09at44928PM_zps6efe0744

by Swagbito January 10th 2015, 2:35 am

Didn`t work.

by \isogriv.\ January 10th 2015, 2:42 am

According to the Inspect Element, nowhere in the homepage is there any mention of a "body.chatbox" tag. Could you possibly screenshot or copy/paste what you currently have in your CSS stylesheet?

by Swagbito January 10th 2015, 2:59 am

Nope I have it. But I'm on my Wii U. No screenshots.

U registered on my forum Very Happy

by \isogriv.\ January 10th 2015, 3:50 am

In that case, perhaps there is an error in the coding, such as a missed bracket or something along those lines? Or maybe the URL is mistyped? In the event that it is neither of those, here are some other codes that might work.

Code:: #chatbox {background-image:url(http://Place_URL_Here.com/loremipsum.png);} #chatbox_members {background-image:url(http://Place_URL_Here.com/loremipsum.png);}

These codes used together should achieve the same thing as the initial code I presented. If these don't work either, I will see if there is any other codes I can post to help you.

by Ange Tuteur January 10th 2015, 4:15 am

@\isogriv.\ that should work. If I recall correctly, the version of the forum he's using is Punbb. For some reason the <body> element doesn't have the "chatbox" classname for this version. However for the rest of the versions, body.chatbox can be used.