Bot Messages to Honor CSS Instead of Hard Coding

the chat message rows, have css classes as follow:

cBabbleMessageRow - this is the container

cBabbleUserMain - this is the user area

cBabbleDateUser - this is the timestamp when the row is collapsed like on a table or a phone or when in the sidebar

cBabbleContent - this is where the text for the message is.

cBabbleDateMain - this is the timestamp when its not collapse.

for bots a class is added tot he <li> called .cBabbleBot, so if you wanted to effect only bot messages, in your css you could scope it like:

.cBabbleBot cBabbleUserMain {}

Hi,

Thanks for replying!

Yes, when I did this it worked

.cBabbleBot .cBabbleContent p {}

However, that affects all bot messages.

I'd like to style the messages individually if possible.

Please see below post.

I came to the same results, the text does not honor the class attribute in the individual messages. The source code output is this

<div class="cBabbleContent ipsColumn ipsColumn_fluid"><p><span>testing</span></p>  </div>

when it's supposed to be this

<div class="cBabbleContent ipsColumn ipsColumn_fluid"><p><span class="countbot_test">testing</span></p>  </div>

however, when I do this it works

<span style="color:#ff0000;font-weight:bold;">testing</span>

the source code correctly outputs this

<div class="cBabbleContent ipsColumn ipsColumn_fluid"><p><span style="color:#ff0000;font-weight:bold;">testing</span></p>  </div>

Update:

If I do this it works (the span without the class)

.cBabbleBot .cBabbleContent p span {}

But once I do this it no longer works

.cBabbleBot .cBabbleContent p span.countbot_test {}

i'm not really sure what you mean by "individually" styling the messages, you mean from each bot? or each message the bot makes? 

i can't provide help on your second situation if you are altering the templates to achieve it.

Hi Michael,

The individual messages.

The templates aren't altered, as I'm making the changes in the ACP settings.

i'll test it out, as i don't see why this wouldn't work:

.countbot1 { 
color:green;
font-size:20px;
}

no need to scope it. where are you adding in your css changes? to customs.css?

Hi Michael,

Yes, in the custom.css, in the correct theme too.

okay this is the IPS Text parsing removing the css class as its not "allowed". To make it "allowed" go to ACP->Customizations->Editor->Settings, click on the advanced tab and follow the directions for adding in allowed classes.

Its not too clear in the description for the field, I'll update it in 2.2.0.

Simply outstanding! That did the trick!

Thanks, Michael!