JenSocial: Social Web Directory and Ning Tips

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

Ning Hello Box - How To Add Background Image (code updated May 15, 2009)

Ning Welcome/Hello Box - How To Add Background Image

Ning Hello 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.

If you don't have access to your Ning Server folders, or no image folder location like PhotoBucket, just do the following:

Go to your Blog
Insert image by clicking on camera icon.
Grab the code for file path of the inserted image. Only grab from <img src=...>
Now you have uploaded your image, and have a file path you can add to the CSS below.

Note: Due to the recent Ning Platform changes with our Hello Box, I had issues with this code on my test network. I had to reselect my Network Theme, and then add this code. Hopefully, you will not experience this issue.

Please use attached file for code.

/* Hello Box */
.account-links {

background:#FFFFFF URL(http://yourning.ning.com/imagefolder/imagename.jpg) no-repeat

scroll 0 0;

border:0 none !important;

}



/* Hello Box: Adjust the height to see more of the background image) */

.account-links {

height:130px;

}



/* End Hello Box */

Note #1: Due to the wrapping within this Discussion, there are unnecessary empty lines, that could be problematic. Please use the attached text file.
Note #2: If your image resides on a server outside of Ning, replace the url with your server path and image filename.
Note #3: 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

Attachments:

HelloBoxBackgroundImageCSS_new.txt, 1 KB

Replies to This Discussion

Permalink Reply by JenSocial on February 10, 2009 at 10:00pm

Hi Everyone!
I'm looking forward to seeing what you all do with this! Let me know when I can take a peek at your networks. I'd love to see them.
Best,
Jen

Permalink Reply by JenSocial on February 10, 2009 at 11:07pm

No bother at all. You won't be able to change it on pages where your members have their own custom themes - - at least, I don't think you can. And really, that's a good thing. When I have time, I'll take a look and see if there is deeper code, that will encompass all pages. But, honestly, I would advise not to do that. Cause, you want your members to be able to customize their own pages, right? And, I feel the impact is on the home page.
;-)

~*~Medicine Man~*~ said:

Hello Jen:
I Just Put HelloBoxBackgroundImageCSS.txt On My Site,

Permalink Reply by JenSocial on February 10, 2009 at 11:12pm

Bear, love your full name, BTW!

Permalink Reply by Magic Happens on February 11, 2009 at 5:33am

l put a image on my hello box, and it worked. But l wanted a better one ,so l try that and it would not work. So l go to add the first one back on and it would not work. l do not know what happened. l wished l let it alone when l had one there.

Permalink Reply by Magic Happens on February 11, 2009 at 5:46am

Great, l just did it again. Where the URL goes, l had to put this ( " url" ) Those little things- " -had to be on mine

Permalink Reply by JenSocial on February 11, 2009 at 8:20am

Wow Fantasyland! It looks great! Thanks for the tip on the quotes. Honestly, even as much CSS as I write, I'm not sure when the quotes are necessary. Typically I don't use them in this case. Thanks!!!

Fantasyland said:

Great, l just did it again. Where the URL goes, l had to put this ( " url" ) Those little things- " -had to be on mine

Permalink Reply by Adam Lambert Network on February 27, 2009 at 12:09am

I just put one on mine, but for some reason it's a lot lighter then the original picture. Any idea WHY??? I can't see anything in the code that would cause that.

BTW... the chat box looks GREAT. Thanks for the great tips. :-)

Permalink Reply by JenSocial on February 27, 2009 at 12:18am

No, I can't imagine why the image is lighter. Off the top of my mind (dangerous, LOL), only 2 things can cause any type of transparency in an image. Either the original image has an opacity less than 100, or a CSS class is set by using the param: opacity. Where is this? I will take a look.

Glad you like the tips! :-)
Best,
Jen

Lynn Carey Saylor Network said:

I just put one on mine, but for some reason it's a lot lighter then the original picture. Any idea WHY??? I can't see anything in the code that would cause that.

BTW... the chat box looks GREAT. Thanks for the great tips. :-)

Permalink Reply by Adam Lambert Network on February 27, 2009 at 12:21am

http://lynncareysaylor.ning.com/

Same graphic works fine in the chat box. I'm going to redesign the hello box pic to FIT BETTER, but was just wanting to see how it works with the graphic I used in the chat box. And then it came out like it has transparency on it or something. :-(

Hmmm I'll see if I have opacity set in my layout code anywhere too. Don't think so, but I'll check.

Just checked and theres NO opacity in the layout code anywhere. So I'm STUMPED!

OK I found the problem, but I don't know HOW to fix it YET. LOL I used a theme form another site, and just designed my own background, and banner. Because I know how to do graphics, BUT I don't know how to do coding. Seems it has another background in there. I just have to figure out how to get it OUT of there now. UGh...

Permalink Reply by JenSocial on February 27, 2009 at 12:33am

Just add the line of code I put in chat box:

.xg_signup {background:transparent none repeat scroll 0 0 !important;
}

Lynn Carey Saylor Network said:...

Permalink Reply by Adam Lambert Network on February 27, 2009 at 12:51am

It didn't work. Been about 15 minutes now. It should have changed by now, don't ya think?

Directory of Ning Networks said:

Just add the line of code I put in chat box:
.xg_signup {background:transparent none repeat scroll 0 0 !important;}
Lynn Carey Saylor Network said:...

Permalink Reply by JenSocial on February 27, 2009 at 1:53am

Could be the cache and new platform. Yes, that code should work. I'll look again tomorrow. Putting out fires with new platform - - widgets not working on my largest network, 1000 installed all over net. :(

Lynn Carey Saylor Network said:

It didn't work. Been about 15 minutes now. It should have changed by now, don't ya think?

Directory of Ning Networks said:
Just add the line of code I put in chat box:
.xg_signup {background:transparent none repeat scroll 0 0 !important;}
Lynn Carey Saylor Network said:...