Jump to content

Bot Messages to Honor CSS Instead of Hard Coding

  • Babble 2.1.3 Closed Suggestion

I tried adding a class attribute to the bot messages but it didn't take.

Formatting changed only when I hardcoded it (below).

<span style="color:#000000;background:#fff000;">Message</span>

If possible, I'd like the messages to support ID or class attributes (below).

<span class="my_class">Message</span>


User Feedback

Recommended Comments

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 {}


Link to comment
Share on other sites


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.

Edited by GrooveOnBeat
Link to comment
Share on other sites

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>



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 {}


Edited by GrooveOnBeat
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

.countbot1 { 

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • Create New...