Current status of the Ning Platform is always available on the Ning Status Blog.

Chat Page CSS

Good day to Everyone,

I would like to know if somebody can help me out with my site's chat page CSS:

1) To change the black color of one of the chat's menu bar to #1a6c9c.8224482083?profile=RESIZE_710x

2) To make chat's icons bigger like the gallery icon, attach files icon, emoji icon and the send icon both on pc and mobile version.8224482660?profile=RESIZE_710x

3) To adjust height and width of my chat's box, both for users lists and for personal and groups chats only for pc version.8224483058?profile=RESIZE_710x8224482885?profile=RESIZE_710x

I've attached a screenshot for everyone of these queries.

Thank you very much, I would really appreciate if you could help me out with the CSS of one of these queries.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –


  • The chat columns can be adjusted by dragging them up or down

    8226323067?profile=RESIZE_584xWith regards to the icons adjusting those can get messy as some are icons and some svgs, so you could adjust the icons but not the svgs so I would leave thosas they are.

    Here is some css which adjust the columns height and widths and also the header colour change you wanted

    @media only screen and (min-width:979px){

    /* Chat room width */
    .xg_chat.chatFooter .xg_userWidth {
    width: 326px;
    /* Main chat right hand list */
    .xg_chat.chatFooter .xg_chatWidth {
    width: 426px;
    /* Main chat right hand height */
    .xg_chat.chatFooter #conversationViewContainer .xg_chatWindow {
    min-height: 600px!important
    /*Chat rooms height*/
    .xg_chat.chatFooter .xg_chatWindow ul.xg_messageList{
    .xg_chat.chatFooter .xg_verticalPane .xg_chatWindow {
    min-height: 470px!important
    /* Chat page header colour change */
    .xg_chat.chatModule .xg_chatWindow .xg_messageListHeading{
    background-color: #1a6c9c

    • Thank you very much Bizz , it did work. Thanks for your help.

      I wonder if there is a way to change my chat's menu bar color on the mobile version also?


      • Yes it can be done, i didn't add the code for mobile as you mentioned you wanted it for pc only, will write up some code for you.

        • Thank you Bizz!

          • This should change the colours for you

            .xg_chat .xg_theme-ningbar-bc{ background-color: #1a6c9c }

            • Thank you very much Bizz, I appreciate your help. I've send you inbox if you could please look it up.

              • No worries glad could help. Yes I have seen it and replied.

This reply was deleted.

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

CJ Coster and ⚡JFarrow⌁ are now friends
NC for Hire
6 hours ago
⚡JFarrow⌁ posted a discussion
Way back in 2018, I shared this with you.  Tip: How to Add an Easy to Manage News TickerToday, I'm…
13 hours ago
⚡JFarrow⌁ replied to CJ Coster's discussion
Looking to Hire an Experienced Ning Developer
"Ill send you my contact info.. happy to help.."
15 hours ago
Rosas † Negras posted a discussion
/*cursor*/body, a, a:hover {cursor:url(HTML,BODY{cursor: url(HTML,BODY{cursor:…
16 hours ago
Debbie Goode-Jones, Ted Harge, Donation Ngobeni and 17 more joined Ning Creators Social Network
20 hours ago
CJ Coster posted a discussion
Hello, Believe it or not, we started when Ning, was just formed. We are back now and want to hack…
Rosas † Negras replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"possible to fix it this way? is an example of a 2.0 site"
Bizz replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"There is an error in the code, sorry about that it should be like this
.xg_list_video_main .tb…"
Rosas † Negras replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"the groups are now perfect, the videos to the usual situation"
shared their discussion on Facebook
Bizz posted a discussion
Here is an updated tip as seems some things have changed since last time I posted that last tip.You…
Bizz replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"/** VIDEOS LIST **/
.xg_list_video_main ul li { width: 100%;}
.xg_list_video_main .tb…"

Meanwhile, you can check our social media channels