JenSocial: Social Web Directory and Ning Tips

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

HIDE MODULE FOR SIGNED IN MEMBERS?

I'd like to completely remove the default ning signin/up box which ive done.

I'd like to replace that with a text box containing an image with an "image map" that will contain links to both the signup and sign in pages.

My question : Is there any way I can have this module visible to guests, then once they have signed in have it hidden?

0 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by JenSocial on November 27, 2012 at 2:16pm

This should work for new Design Studio. Add your content, and add all code to Custom Code Box via: My Network/Tools/Custom Code.

For Old Ning Editor, replace div#column2.xg_column.xg_span-7 with .xj_classic_sidebar

<!-- Content Top of SideBar Signed Out -->
<div id="tmp_topsidebar" style="display:none;">
Your Content goes here.
</div>
<script type="text/javascript" language="javascript">
if (typeof(x$) != 'undefined') {
if (ning.CurrentProfile == null ) {
    x$("div#column2.xg_column.xg_span-7").prepend('<div id="topsidebar"></div>');
    var t_topsidebarCode = document.getElementById('tmp_topsidebar');
    var topsidebarCode = document.getElementById('topsidebar');
    topsidebarCode.innerHTML = t_topsidebarCode.innerHTML;
}
}
</script>
<!-- End Content Top of SideBar -->

I can't test it right now. Let us know.

Best,

Jen

▶ Reply

Permalink Reply by LeafsZone on November 27, 2012 at 2:34pm

Thanks Jen!

It worked, and it didn't. The image does come up when not signed in however, it pushes the entire right column (using 2 column layout, large on left) underneath the left column. Could this be an image size issue? The image is 308px wide, so i wouldn't think that would be the case? :/

Heres the modified version of your code that I'm using:

<div id="tmp_topsidebar" style="display:none;">
<div style="text-align:center; width:308px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_2201211271520524" src="http://i47.tinypic.com/348spr6.png" usemap="#Image-Maps_2201211271520524" border="0" width="308" height="200" alt="" />
<map id="_Image-Maps_2201211271520524" name="Image-Maps_2201211271520524">
<area shape="rect" coords="23,67,156,121" href="http://torontomapleleafs.ning.com/main/authorization/signIn?target=http%3A%2F%2Ftorontomapleleafs.ning.com%2F" alt="" title="" />
<area shape="rect" coords="25,124,158,178" href="http://torontomapleleafs.ning.com/main/authorization/signUp?" alt="" title="" />
</map></div></div>
<script type="text/javascript" language="javascript">
if (typeof(x$) != 'undefined') {
if (ning.CurrentProfile == null ) {
x$("div#column2.xg_column.xg_span-7").before('<div id="topsidebar"></div>');
var t_topsidebarCode = document.getElementById('tmp_topsidebar');
var topsidebarCode = document.getElementById('topsidebar');
topsidebarCode.innerHTML = t_topsidebarCode.innerHTML;
}
}
</script>

▶ Reply

Permalink Reply by JenSocial on November 27, 2012 at 2:37pm

Yes, it's likely the image size. Link for live code?

▶ Reply

Permalink Reply by JenSocial on November 27, 2012 at 2:44pm

I tried your code on a test site, with signed in versus signed out. I see what you mean. It's not just the image. The code is good, I'm pretty sure it's the content, and not sure what. I'll try to play around with it more later tonight.

▶ Reply

Permalink Reply by LeafsZone on November 27, 2012 at 3:00pm

Ok Jen, appreciate it :) Ill keep workin away at it see if I can figure it out

▶ Reply

Permalink Reply by JenSocial on November 27, 2012 at 2:49pm

Suggestion: Before you try with image map, try just an image and text above or below it. This will tell us if the insertion code is good. Ning is pretty picky about image maps.