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 –

Replies

  • 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{
    min-height:400px!important
    }
    .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

Paul Corona posted a discussion
Been fighting migration issues since we moved to 3 months ago....we literally have hundred of links…
1 hour ago
Paul Corona commented on Karen Hardy's blog post Terrified about 3.0 upgrade
"My personal thought.....had Ning 2 site (NavyDads) for quite a few years....the transition has NOT…"
yesterday
Nextholidays updated their profile
Saturday
Online Koranlehrer Deutschland updated their profile
Apr 27
Peter Bliss and ⚡JFarrow⌁ are now friends
NC for Hire
Apr 20
⚡JFarrow⌁ replied to Peter Bliss's discussion
Looking for Ning 3 Site Develop / Asst.
"I'll send you my contact info."
Apr 18
Graduslive updated their profile
Apr 13
Peter Bliss posted a discussion
Hello Ning Creators.  I have been on Ning for the last 12 years migrating from Ning 2 > 3 a few…
Apr 10
Peter Bliss updated their profile photo
Apr 10
Peter Bliss updated their profile
Apr 10
Kathleen (SunKat) updated their profile
Feb 20
Scott Bishop posted a discussion
OMG! AI does it all. Anything you want to light up your Ning site, just ask Google AI. That's what…
Feb 5
More…

Meanwhile, you can check our social media channels