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

Adding A Background Image to Chats

This was asked from JAIME DIAZ SALAZAR who wanted to know if a background image could be added to the chat windows like this

8267517472?profile=RESIZE_710x8267520657?profile=RESIZE_710xSo here is how you can do it

First you need the images you want to use then add it to your file manager in your Social Site Builder

Next you will need to copy the link to the image ready to be added to css code

8267530500?profile=RESIZE_710xThat line you will need to add in the css where it says insert image link

So here is the css which you will need to add to your design studio custom css

 

.xg_chat.chatFooter .xg_chatWindow ul.xg_messageList, .xg_chatWindow ul.xg_messageList, .xg_chat.chatModule .xg_chatWindow {
background-image: url(" insert image link here ")!important;
background-position: top center;
background-size: initial;
background-repeat: repeat;
}
.xg_chat.chatModule .xg_userWindow, .xg_chat.chatModule .xg_chatWindow .xg_messageListFooter{
background-image:none!important; background-color:white!important
}
.icon-closeChat::before{
color: darkred!important
}
.xg_chat .xg_messageList > li .cht-state {
color: darkred!important
}

/** NEW LINE FOR THE SENDER WHO SENT IT TEST COLOUR CHANGE THE COLOUR TO WHAT YOU NEED FOR IT TO STAND OUT AGAINST YOUR BACKGROUND **/

.xg_chat .xg_messageList > li > ._sender { color: #1c0303 }

 

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

  • I've tested this on my themes as well so the backgrounds change depending on the theme used, so for instance if I visit my page or another members page who are using the thrones theme they get the stark banner image in the chats like this

    8267541873?profile=RESIZE_930x

    Go to a members who is using the Steampunk theme they get a steampunk image in the chat. The default image shows for anyone not using a theme.

  • NC for Hire

    Bizz 8270109494?profile=RESIZE_930x

    thank you so much
    • No worries, by the way here is another line to add so you can control the color of who sent the message as can get hidden in the background image. You just edit the colour for the text colour you want.

      .xg_chat .xg_messageList > li > ._sender { color: #1c0303 }

  • NC for Hire

    8321564092?profile=RESIZE_930x

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

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
Scott Bishop replied to Alex - Rosas † Negras's discussion
HTML Browser Popup Window Generator,possible with a click to have the window open for ning or other pages, this is my example
"Where at in a 3.0 website do you paste the code to? "
Feb 3
Scott Bishop replied to George H. Compton IV's discussion
(Ning 2 and 3) welcome / sign-in and sign-up pop-up module. Updated Aug 24, 2017
"Hi George, I'm not sure if this tip has been outdated or for some reason it's not working on my…"
Feb 3
Eva updated their profile
Jan 28
Scott Bishop replied to Scott Bishop's discussion
Please Help! Members Have No Way of Posting Anything
"https://community.surfoutlook.com/
However, it's been solved. Ning helped me out with it. "
Jan 27
Alex - Rosas † Negras replied to Scott Bishop's discussion
Please Help! Members Have No Way of Posting Anything
"I don't remember your site, I'll check for you, can I have the link?"
Jan 26
Scott Bishop replied to ⚡JFarrow⌁'s discussion
🖼️ Improve Accessibility & SEO on Your Ning Photo Pages by Automatically Adding ALT Text from Photo Titles
"On your step 3 where you say "Paste in the script below", I'm not finding that. Did you forget to…"
Jan 25
Scott Bishop replied to Scott Bishop's discussion
Please Help! Members Have No Way of Posting Anything
"I think that setting was switched over to Admin as a default when I converted from 2.0 to 3.0…"
Jan 25
Alex - Rosas † Negras replied to Scott Bishop's discussion
Please Help! Members Have No Way of Posting Anything
"settings members must post, if you put ADMIN it is FORBIDDEN TO PEOPLE"
Jan 25
Scott Bishop replied to Scott Bishop's discussion
Please Help! Members Have No Way of Posting Anything
"I got an answer back from Ning Support within an day. It was a setting that somehow slipped out of…"
Jan 22
Scott Bishop posted a discussion
I just realized that my members can no longer post pictures, videos, blogs, events, or anything…
Jan 21
More…

Meanwhile, you can check our social media channels