JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

RETIRED TIP - Ning Network Tip #3: Ning Chat Box - How To Add Background Image and Border

Fun Tip #3: How To Add Background Image and Border to Chat Box

Ning Chat Box Background Image:

First, select your image, and save to an Internet server folder - - like your Ning Network folder or photobucket. After you know what image you are using, add the following code to the top of your CSS code. Be sure to change the image location, to your server and image file. Access CSS Code from Manage/Appearance/Advanced. After you add code, click on SAVE.

/* Add black border to Ning Chat */.xg_module_body.body_right {border:1px solid #000000;}


/* Add Background Image to Ning Chat (narrow box in right column. omit the word narrow for

larger box from http://yournetwork.ning.com/chat  */



.narrow .viewer {

background-image:url(http://yoursite.ning.com/images/image_filename);

}

Note #1: If you want to change the background for the large chat box too (http://yournetwork.ning.com/chat)

Remove the style word: .narrow
This will make the background show up in both boxes. If you only want in narrow version, don't remove the word.
Note #2: There are NO EMPTY LINES IN CODE ABOVE. Due to the wrapping of the URL, it appears that there are empty lines - - NOT.
Note #3: If your image resides on a server outside of Ning, replace the url above, with your server path and image filename.
Note #4: If you add the CSS, and then change your image, it will likely take a few minutes to refresh, to new image (due to Ning Caching).

0 members favorited this

Replies to This Discussion

Permalink Reply by Carny Town on February 4, 2009 at 12:36pm

Good tip. I did not know this. Will give it a try...on www.carnytown.com

Permalink Reply by Carny Town on February 4, 2009 at 1:54pm

Well...good try. I followed the instructions, added the code to my "advanced" (css) at the top as instructed. Made sure there were no lines in between and directed the code to http://www.stageresources.com/bluewhitebackround.png which is the blue back, I wanted to use. Did not work. Now I have my chat on a separate page ... /chat ... would that have anything to do with it? I can see you making it work here....so am sure I must be doing something wrong.

Carny Town said:

Good tip. I did not know this. Will give it a try...on www.carnytown.com

Permalink Reply by JenSocial on February 4, 2009 at 2:22pm

I'm still waiting for the Ning Cache to clear (slow on chat box). But, it appears, all you need to do is: remove the style word .narrow

Permalink Reply by JenSocial on February 4, 2009 at 2:28pm

Thanks to Carnytown this came up. If you want to change the background for the large chat box too (http://yournetwork.ning.com/chat)

Remove the style word:
.narrow

Permalink Reply by the witches Den on February 4, 2009 at 11:09pm

ok your code causes a glitch on the site i added this code etc then when i didnt like the image i put there i tryed to erase that one and put another in its place and it wouldnt change the background so then i geleted the code off of the advanced section and the image etc is still their it didnt remove it to make that chat back to original what can i do to fix this

Permalink Reply by JenSocial on February 4, 2009 at 11:15pm

You are experiencing the Ning Cache. Sometimes, and especially on the chat box, it takes a few minutes to refresh. That's why you didn't see the new immediately, too. On glitch, that shouldn't be happening. If you are interested, email me direct. I will email CSS to you, instead of here.
Sorry you're having issues. Give it a few minutes. If you have removed the code, the chat box background will refresh and back to normal, soon. You can try a hard refresh with ctrl f5.
Thanks,
Jen

the witches lair said:

ok your code causes a glitch on the site i added this code etc then when i didnt like the image i put there i tryed to erase that one and put another in its place and it wouldnt change the background so then i geleted the code off of the advanced section and the image etc is still their it didnt remove it to make that chat back to original what can i do to fix this

Permalink Reply by the witches Den on February 5, 2009 at 12:28am

lol now how do i add an image to the sign in section like you did thats cool, would love to do the same, thanks for your respose back to me before, blessings to you, snow wolf

Permalink Reply by JenSocial on February 5, 2009 at 12:40am

I added that situation about the cache to the notes. Thanks! The caching thingy makes me crazy, sometimes. On the image to the sign in, give me a day or so, and that will be our next tip! ;-)

the witches lair said:

lol now how do i add an image to the sign in section like you did thats cool, would love to do the same, thanks for your respose back to me before, blessings to you, snow wolf

Permalink Reply by Pure Source on February 5, 2009 at 4:59pm

I did a bit of pimpin' on this code you provided Jen... thx again for your help :)

/* Add black border to Ning Chat */.xg_module_body.body_right {border:1px solid #999966;}
/* Add Background Image to Ning Chat (narrow box in right column. http://yournetwork.ning.com/chat */
.viewer {
background-image:url(http://yourimagelocation.png/gif/jpg);
background-position:left 0px;
background-attachment:fixed;
background-repeat: no-repeat;
border-width:0px;
border-style:Solid;
color:/* %moduleBodyTextColor% */ #ff3366;
font-weight:bold;
font-style:normal;
font-size:1.em;

Permalink Reply by JenSocial on February 5, 2009 at 5:08pm

Thanks. I did too, but didn't post my additional CSS, to keep it simple for now. But, I'm glad you posted yours! Here's an idea, if you want, why don't you create a new Discussion with the same title as mine, but add the word "Pimping", "Enhanced" or something like that? That would be great. Although I have asked that no one advertise here, DO include your site link, if you do this.
Jen
:-)

Pure Source said:

I did a bit of pimpin' on this code you provided Jen... thx again for your help :)
/* Add black border to Ning Chat */.xg_module_body.body_right {border:1px solid #999966;} /* Add Background Image to Ning Chat (narrow box in right column. http://yournetwork.ning.com/chat */
.viewer {
background-image:url(http://yourimagelocation.png/gif/jpg);
background-position:left 0px;
background-attachment:fixed;
background-repeat: no-repeat;
border-width:0px;
border-style:Solid;
color:/* %moduleBodyTextColor% */ #ff3366;
font-weight:bold;
font-style:normal;
font-size:1.em;