Message customization

The messages appearing in the chat have a specific structure. You can affect their presentation by placing CSS rules on the site accordingly.

Visitor message example:

<div class="nsc_msgouter nsc_vwr">
    <div class="nsc_msginner nsc_vwr">
        <div class="nsc_ttl nsc_vwr">
            You                  <!-- Message title -->
        </div>
        <div class="nsc_msg">
            <div class="nsc_txt">
                Greetings    <!-- Message text -->
            </div>
            <div class="nsc_time">
                17:22           <!-- Message time -->
            </div>
        </div>
    </div>
</div>

                

Message titles

All message titles are div elements with a class attribute containing the nsc_ttl value. Titles also have a second class value, varying depending on which messages the title belongs to:
nsc_vwr -- visitor message titles
nsc_owr -- operator (agent) message titles
nsc_swr -- system message titles

For instance, in order to assign the red color to all titles of operator message, the following CSS rule will be required:

div.nsc_owr {
    color: red;
}        

Messages

Each message is enclosed in a container that is a div element and has the class attribute with the nsc_msg value. Within the container there are two more div elements. One of them has the nsc_txt class and contains the message text itself. The second one has the nsc_time class and contains the message sending time.

For instance, to add a green frame to all messages and turn the message sending time digits gray, the following CSS rule will be needed:

div.nsc_msg {
    border: solid 1px green;
}
div.nsc_time {
    color: grey;
}        

Example

Below is an example of the chat stylesheet:

#nsc_history div.nsc_ttl, 
#nsc_history div.nsc_msg { 
    position: relative;
    padding: 5px;
}

#nsc_history div.nsc_ttl { font-weight: bold; }

#nsc_history div.nsc_msg { padding-right: 50px; }

#nsc_history div.nsc_time {
    position: absolute;
    top:0; right: 0;
    padding: 5px;
    color: #777;
}

#nsc_history div.nsc_vwr { color: #D11919; }

#nsc_history div.nsc_owr { color: #2626D1; }

#nsc_history div.nsc_swr { color: #777; }

All rights reserved. Copyright © 2017 Netrox SC
Host CMS