3.1.6.3 Change CSS Class and Add CSS Styles

An Add CSS Styles command allows you to inject new CSS code in a chat.

A Change CSS Class command toggles a custom CSS class attribute on the main container element allowing the switch between multiple customized styles.

Adding an Add CSS Styles command node

Step 1:

Add a New Command node by clicking on the last node to access the contextual menu and choose β€œNew Command” to open up the Edit form.

Step 2:

This is the β€œEdit” form where you can modify the content of this node.

(Q1): Command Type. Choose “Add CSS Styles” for this command node.

(Q2): Add Style.

(Q3): Add a Label. Labels are used to reference nodes in various functions of the chat builder.

(Q4): Save.

Example

Step 1:

After opening the new answer dialogue, fill the form as per the screenshot below and click save.

In the “Add style” field, there are two CSS styles that define different font-family. test1 and test2 are the class name.

Step 2:

(Q1) The Add CSS Styles command node in the Chat Builder.

(Q2) Click the β€œPreview” button to open the chat HTML client which shows you how your chat is presented to the viewers.

The new CSS code has been injected in the chat. The font in the Chat HTML client is the default font.

Adding a Change CSS Class command node

Step 1:

Add a New Command node by clicking on the last node to access the contextual menu and choose β€œNew Command” to open up the Edit form.

Step 2:

This is the β€œEdit” form where you can modify the content of this node.

(Q1): Command Type. Choose “Change CSS Class” for this command node.

(Q2): Class name.

(Q3): Add a Label. Labels are used to reference nodes in various functions of the chat builder.

(Q4): Save.

Example

Step 1:

Add the Add CSS Style command node by following the example above.

Step 2:

Click on the last node to access the contextual menu and choose β€œNew Command” to open up the Edit form.

Step 3:

After opening the new answer dialogue, fill the form as per the screenshot below and click save.

Step 4:

(Q1) The Add CSS Style command node in the Chat Builder.

(Q2) The Change CSS Class command node in the Chat Builder.

(Q3) Click the β€œPreview” button to open the chat HTML client which shows you how your chat is presented to the viewers.

In the Chat HTML client, the Change CSS Class command node has added the class name “test1” to the main container element. Therefore the font has been changed to courier as defined in the CSS snippet we injected previously.

Step 5:

Add one more Add CSS Style command node by clicking on the last node to access the contextual menu and choose β€œNew Command” to open up the Edit form.

After opening the new answer dialogue, fill the form as per the screenshot below and click save.

Step 6:

(Q1) The first Change CSS Class command node in the Chat Builder.

(Q2) The second Change CSS Class command node in the Chat Builder.

(Q3) Click the β€œPreview” button to open the chat HTML client which shows you how your chat is presented to the viewers.

In the Chat HTML client, the second Change CSS Class command node has added the class name “test2” to the main container element. Therefore the font has been changed to cursive as defined in the CSS snippet we injected previously.

Custom CSS Style

Change CSS Class and Add CSS Style are the advanced features that work better with custom CSS style.

Contact us

For more information regarding this feature, please contact the Querlo Team at info@Querlo.com