JenSocial: Social Web Directory and Ning Tips

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

How To Remove Right Column For Pages - Hide Right Column on Pages (Old Ning Editor)

Related Tip:

UPDATE - This tip only works for the Old Ning Editor: Thanks to Fantagiro43, this tip has been updated. It appears that in some cases, the right column is being moved to bottom, and not removed. One class has been altered within the Ning styles. If your page code is not removing the right column, but moving it to bottom - - re-copy/paste the code below. We needed to add one line of CSS.

Have you ever wanted to remove the right column for certain Pages, on your Ning Network?

Since the new Ning will include these services, I can't think of a reason to not share this awesome tip. Do be aware: This is a hack. As in all hacks, if Ning changes these variables/styles, it would no longer work.

There are two ways to do this: Add special code to your Custom Code Box for a specific page, or Add special CSS to remove from all pages.

Remove Right Column for Specific Page, via Custom Code Box (Analytics):
The code below uses the example page called "great-page". The URL to the page where you want to remove the right column would be: /page/yourpage_name.
1. Change the 'great-page' to your page name.
2. Add the code to your Custom Code Box, via (My Network/Tools/Custom Code)
3. Save.

<script type="text/javascript" language="javascript">
if (window.location.href.split('page/')[1] == 'great-page') {
x$('.xg_widget_page .xg_last').css('display','none');
x$('.xg_widget_page .xg_3col').css('width','955px');
x$('.xg_widget_page .xg_span-16').css('width','945px');

x$('.xg_widget_page .xg_span-4.xg_last').css('display','none');}
</script>

Remove Right Column for All Pages via Advanced CSS:
The code below will remove the right column from all pages, under /page. 
1. Add the code to your Advanced CSS, via (My Network/Settings/Appearance/Advanced)
2. Save.

.xg_widget_page .xg_last {display: none;}
.xg_widget_page .xg_3col {width:955px;}
.xg_widget_page .xg_span-16 {width:945px;}
.xg_widget_page .xg_span-4.xg_last{ display:none;}

Advice: Don't use both versions (Analytics and CSS). Use one or the other, depending on your needs.

NEW DESIGN STUDIO TIP - How to remove right column from all pages

Enjoy!

0 members favorited this

Replies to This Discussion

Permalink Reply by JenSocial on January 25, 2011 at 1:33pm

Very nice! Looks like a fun game, no joke!

Permalink Reply by Neuerotica on January 25, 2011 at 1:35pm

Thanks Jen. It is. Unlike Zynga games, objects move.

Permalink Reply by Les on April 15, 2011 at 2:13pm

Jen, I am reading all the post ... and using the code you provided. I would like to remove the right column and adjust the left to fill the page for a single page, but it is not working. I am using the custom codes area. The code for removing the right column for a single page works, but the left column remains the same, which does not work well with the iFrame, since web pages are larger than the iFrame.

Do you have a code combination for removing the right columns, expanding the left and only on one page ... I tried several arrangement of the code combination's above, but no luck yet ... anyone have any ideas?

Thanks,

Les

Permalink Reply by Bill Vasko on June 9, 2011 at 4:48pm

I just tried this using the old editor, and I can't get it to work. Do you know if this is still working Jen? Btw, I am using a two column hack that hides the left column, if that matters at all.

Permalink Reply by JenSocial on June 9, 2011 at 10:47pm

The removal of right column has gotten to be such a pain with the new themes, thinking I'm not going to continue supporting it. But in your case, being on old Editor, it shouldn't be a problem.

I tested both the CSS, and for certain page:

if (window.location.href.split('page/')[1] == 'partners-1') {
x$('.xg_widget_page .xg_last').css('display','none');
x$('.xg_widget_page .xg_3col').css('width','955px');
x$('.xg_widget_page .xg_span-16').css('width','945px');
x$('.xg_widget_page .xg_span-4.xg_last').css('display','none');}

And it worked great for me. What happens when you try?

Permalink Reply by Bill Vasko on June 10, 2011 at 10:19am

I got it to work now after you just posted that sample code. The problem was, in your original post, you have:

The URL to the page where you want to remove the right column would be: /page/yourpage_name.

So I included the /page/. Once I removed that, it worked fine. Thanks!!

Permalink Reply by JenSocial on June 10, 2011 at 11:38am

Oh yeah, the yourpage_name is to nail down a specific page.

Glad you got it!

Jen

Permalink Reply by GirlRiders on June 27, 2011 at 6:04pm