XF 1.3 Changing the TaigaChat background color


Well-known member
Grrr... I hate CSS, but I'm trying to suffer through making some more unique changes to some of my forums.

I want to take the Taiga chat shoutbox, and change the background color of it a bit, to set it apart.

Easy I thought, I'd just change the background-color of the id for taigachat_alt.

Well, I must be missing something pretty basic.

Here's what the start of Taigachat chat shoutbox HTML looks like.
<div class="section sectionMain nodeList taigachat_alt  taigachat_reverse" id="taigachat_full">
So I know I have to deal with the id, and sectionMain is the class of the background I want to change.

So I tried this in EXTRA.css
#taigachat_full  {    background-color: blue !important; }
#taigachat_full  .sectionMain {    background-color: blue !important; }
#taigachat_full  .div {    background-color: blue !important; }
None of those worked, so I'm pulling my hair out over what I'm missing out on. Is it bad form to refer to the ID in extra.css because it's already defined in the taigachat css?


Well-known member
This should work actually... looks like by default it takes the background of section main, which is a class, calling it via the ID (#) should overwrite the sectionmain background. This should turn the outsides of it red:

#taigachat_full {
background-color: #FF0000;


Well-known member
Yeah, that's what my first example demonstrates, with the !important tag.

I found out the problem. I had an enclosed comment in some previous EXTRA.css, which was commenting out all my changes, so that's why it didn't seem to be working. Glad I'm not that crazy.

Thanks for the tip Russ.