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 Fantagiro43 on May 31, 2010 at 12:07pm

I have question: Is possibility add some text too???

Permalink Reply by JenSocial on May 31, 2010 at 1:32pm

Adding the text to your image is the best way. There's a CSS pseudo class that allows adding text before or after elements. But it's not good in a case like this. And some browsers don't support it.

If you would like to learn about it, here's a good source:
http://www.w3schools.com/css/pr_pseudo_after.asp

Best Regards,
Jen

Permalink Reply by Fantagiro43 on May 31, 2010 at 3:33pm

Thank you JenSocial ;)

Permalink Reply by JenSocial on May 31, 2010 at 3:38pm

My pleasure. BTW, if you do not have an Image Editor where you can add text, we have one in the bottom Wibiya Toolbar, under Editors/Image Editor. It enables you to add text to any image, and save to your hard drive, to use wherever you need it.
Best Regards,
Jen