In this article, we will be showing how to edit font colors, sizes etc. on Private Member Chat add-on.


Every element on Chat Messages section under member dashboard has a unique class name, which will help us to assign specific CSS rules to them.


We will be referring to these elements as Author, Message and Date:





Author


Class name: 


bd-chat-pmtme-m-auth


Its CSS structure when assigned specific font color and size: 


.bd-chat-pmtme-m-auth {

    font-size: 20px;

    color: #2b5987;

}


Front-end view:





Message


Class name: 


bd-chat-pmtme-message


Its CSS structure when assigned specific font color and size: 


.bd-chat-pmtme-message {

    font-size: 18px;

    color: #9d00ff;

}


Front-end view:





Date


Class name: 


bd-chat-pmtme-message-time


Its CSS structure when assigned specific font color and size: 


.bd-chat-pmtme-message-time {

    font-size: 15px !important;

    color: black !important;

}


Front-end view:





Where to add these CSS codes?


All these CSS codes can be added under Settings --> Design Settings --> Custom CSS / HEAD: