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


Views: 718

Attachments:

Replies to This Discussion

I have question: Is possibility add some text too???
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
Thank you JenSocial ;)
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

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips