JenSocial: Social Web Directory and Ning Tips

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

Floating Images and Links, on All Pages

SEE CRITICAL UPDATE AT BOTTOM OF THIS TIP, BEFORE YOU USE THIS ON NING.

You need to know how to upload an image, and copy/paste the image path (URL) to the example code provided below.

Have you ever wanted to add an image in a location (maybe upper right, bottom right, or lower left) on your Ning Network, that can't be added via Text Boxes - - or within the designated column space?

If you look on JenSocial in the bottom right corner - - you will see an image that appears to be floating outside of the main part of the Ning site. This is what I call a floating image. Although technically it's not floating. It is positioned on the page using the CSS element for a fixed position, with the top and right values for the element: position. The element values: top, right, bottom, left, enable you to instruct the CSS how far from each value you want to place your image. The image on JenSocial usually has a link. You can add a link to your image (clickable image), or not. That's up to you.

Example #1 - Code with Link - Location Bottom Right:

<a target='_blank' href='http://yourlink.com' text='About your link'><img src='yourimagepath.jpg' alt='About your image' style='position: fixed; bottom: 25px; right: 10px;'></a>

Example #2 - Code without Link - Location Top Right:

<img src='yourimagepath.jpg' alt='About your image' style='position: fixed; top: 10px; right: 10px;'>

Look at the code above (example with a link). Find the parameter for position. This is where you want to focus.
The position: fixed means:
An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled.

The parameter for bottom: 25px; -- instructs your CSS to place this image 25 pixels from the bottom of your active window.

The parameter for right: 10px; -- instructs your CSS to place this image 10 pixels from the right of your active window.

Instructions:

Edit the code above. Be sure to add your link, or remove the <a></a> tag. See 2nd example "Code without Link".
Add your image path. You can upload your image via a Ning blog, or use the File Manager. Either way, copy/paste the image code where you see <img src='yourimagepath.jpg'...
Edit the position. If you want your image to float in top right portion of screen, change bottom to top, and adjust your pixels appropriately.
When you have finished editing the code, add it to your Custom Code Box, via: My Network/Tools/Custom Code and SAVE.

Notice: Position will be different, for each screen resolution. If you make the browser window smaller (not minimized), just drag the bottom right corner to make it smaller - - you will see how the floating image will be repositioned to the right. With the standard resolution being around 1024 by 768 - - this shouldn't be an issue. And, the higher the resolution, it won't matter at all. Just be aware of this. You do not want to cover up important content on smaller screen resolutions. However, with the fixed position, the image can always be scrolled past, up or down.

Hi Everyone! CRITICAL UPDATE!

It was graciously brought to my attention this morning, here (thank you Ayla!) that the floating images on JenSocial were covering up important platform buttons under: Settings/Profile/Change Password

I had no clue this was happening. I have tried to figure out why, and how to fix this. It appears that Ning is using a frame within the change password page, probably calling a secure server location. By using the frame, it is positioning floating or "fixed position" images within the frame, as if the frame is the entire window. This is NOT a GOOD user experience to say the least. PLEASE MAKE SURE you are not doing this on your site. I have tried to assign classes to my floating images, and remove the images from that page only, with CSS. For some reason, it will not work. It could be because the CSS can't be invoked on that special page. :(

I will continue to try and find a solution, probably with javascript. But please make sure this isn't happening on your Network.

On JenSocial, I removed the bottom right floating cloud (image below). I did not remove the VIP button because it's not preventing an action. But, it's unattractive on this special password page, and unnecessary.

Please let me know if you see this happening anywhere else on JenSocial. And, I apologize for the inconvenience.

Thank you Ayla for your gracious way of reporting this serious issue "a little storm", LOL

Best Regards,

Jen

3 members favorited this

Replies to This Discussion

Permalink Reply by Queen Jackie's Creations on November 4, 2009 at 12:15am

this is so cool,thank you for sharing

Permalink Reply by esvareeDOTcom on November 4, 2009 at 2:22am

cool!! thank u Jen

Permalink Reply by JenSocial on November 4, 2009 at 9:51am

Hi iDive Sharks,
You can find all the details here:
http://theningdirectory.ning.com/group/ningnetworktips/forum/topics...

Here's the CSS we're using for the Hello Box/SignUp Box - - with example image path:

/* Hello Box */.account-links, .xg_signup.xg_lightborder {
background:#FFFFFF url(http://yourning.ning.com/yourimage.png) no-repeat scroll 0 0;

border:0 none !important;

}



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

.account-links {

height:150px;

}

.xg_sprite, .xg_sprite a { font-size:11px!important;}

/* font size of links at top of hello box, friends and member page */



/* End Hello Box */

All you do:
1. If you don't have an image server, upload your image via a blog post.
2. Grab the image path "http://filename.jpg" or .gif. or .png
3. Paste the path where the example path is, above.
4. Adjust your box height above (currently height:150px)
5. Add this code to your CSS (Manage/Appearance/Advanced)

iDive Sharks said:

Permalink Reply by Mujer a los pies de Jesùs on July 3, 2011 at 6:56pm

thanks Jen

Permalink Reply by Daisy Lois on July 4, 2011 at 1:29am

lol,-thanks Jen

Permalink Reply by Magic Happens on November 4, 2009 at 12:20pm

Where do l put the code? In the advance setting? And can l add any image or a tweet.?

Permalink Reply by JenSocial on November 4, 2009 at 2:45pm

Add the code to your Analytics Box. And yes, it will work with all images. Be mindful of the size of image. You don't want it to be too large.
Best,
Jen

Fantasyland said:

Where do l put the code? In the advance setting? And can l add any image or a tweet.?

Permalink Reply by esvareeDOTcom on November 5, 2009 at 1:26am

lol, at first i added the code in a text box on the home page....and it worked also, gues it will be an alternative if your analytics box is full. unless there are some constraints to adding the code to a text box?

Ning Directory - Jen said:

Add the code to your Analytics Box. And yes, it will work with all images. Be mindful of the size of image. You don't want it to be too large.
Best,
Jen

Fantasyland said:
Where do l put the code? In the advance setting? And can l add any image or a tweet.?

Permalink Reply by JenSocial on November 5, 2009 at 1:29am

Yes, that is a good alternative. But, it will probably only show on the home page.
Best,
Jen

esvareeDOTcom said:

lol, at first i added the code in a text box on the home page....and it worked also, gues it will be an alternative if your analytics box is full. unless there are some constraints to adding the code to a text box?

Ning Directory - Jen said:
Add the code to your Analytics Box. And yes, it will work with all images. Be mindful of the size of image. You don't want it to be too large.
Best,
Jen

Fantasyland said:
Where do l put the code? In the advance setting? And can l add any image or a tweet.?