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

⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
A Simple Way to Move Navigation Up Into Account Bar
"any ideas on how to get the logo up into the bar as well before the navigation?"
3 hours ago
Barney Lodge updated their profile
Barney Lodge updated their profile photo
ψψ ⚜ LuciStG ⚜ψψ updated their profile
ψψ ⚜ LuciStG ⚜ψψ replied to Annabel Gregory's discussion
Email address capture
"You could ask members a profile question. I do this as well just go into settings > members >…"
ψψ ⚜ LuciStG ⚜ψψ replied to Barney Lodge's discussion
Group Creation by Script
"As far as I Know you can not create groups on ning using a script. You have to create them one at a…"
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
A Simple Way to Move Navigation Up Into Account Bar
"yes it is now perfect and with the added bonus of a sticky navigation when fixing the account bar…"
⚡JFarrow⌁ and Amit Sinh are now friends
⚡JFarrow⌁ updated their profile photo
Mar 16
Annabel Gregory posted a discussion
Is there a simple way to achieve this? Thanks. 
Mar 15
Barney Lodge posted a discussion
My project is attemting to create a very large number of groups, each one asscated with a house…
Mar 13
Alex - Rosas † Negras replied to JAIME DIAZ SALAZAR's discussion
Site's title name is not aligned with the rest of my page's sections names
I checked you have a mess in the settings ,you set a group as main"
Mar 13

Meanwhile, you can check our social media channels