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.

  • 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 }

      • 8270913294?profile=RESIZE_930x

      • in the old ning they had the possibility of the chat in the facade of the main site, I hope one day it will be possible also for 3.0

        • Not sure what you mean ?

  • 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

Steve C and Vander NG are now friends
5 hours ago
AnGella replied to AnGella's discussion
Slow and Painful 2.0 Death
"When did that happen?"
Monday
Kathleen (SunKat) updated their profile
Monday
Rosas † Negras replied to AnGella's discussion
Slow and Painful 2.0 Death
"with error 500 everything was destroyed, the forms disappeared even in the member page, I laugh,…"
Saturday
Rosas † Negras replied to AnGella's discussion
Slow and Painful 2.0 Death
"AnGella 
can you pass me email and password in my page in private please don't remember the…"
Friday
TJ @ jQueryHelp liked ⚡JFarrow⌁'s discussion Show Us your Ning Landing Pages
Feb 18
AnGella replied to AnGella's discussion
Slow and Painful 2.0 Death
"Check out Barbara's profile on my Wordpress Site.
She used full CSS to design it.…"
Feb 18
AnGella replied to AnGella's discussion
Slow and Painful 2.0 Death
"That was the first thing I did and even on there it was gone."
Feb 18
⚡JFarrow⌁ replied to AnGella's discussion
Slow and Painful 2.0 Death
"Have you tried to go back in the Wayback Machine and strip out the old CSS and replace it with the…"
Feb 18
AnGella replied to AnGella's discussion
Slow and Painful 2.0 Death
"I am not sure that Ning is a very stable platform at all.  My wordpress site has never deleted any…"
Feb 18
Rosas † Negras replied to AnGella's discussion
Slow and Painful 2.0 Death
"with 3.0 all our passions end for us who have been working on css for years, the only consolation…"
Feb 18
AnGella replied to AnGella's discussion
Slow and Painful 2.0 Death
"Looks like Ning will not resolve this and has told me the problem is on my end.  Knowing that I…"
Feb 18
More…

Meanwhile, you can check our social media channels