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).


Views: 308

Replies to This Discussion

Good tip. I did not know this. Will give it a try...on www.carnytown.com
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
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
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
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
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
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
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
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;
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;

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips