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 Successful Women Network on June 6, 2010 at 6:04am

fantastic advice and works like a charm now I can actually use iframes :) thank you Jen :)

Permalink Reply by JenSocial on June 7, 2010 at 6:09pm

Great!

Permalink Reply by David R on June 7, 2010 at 6:00pm

Thanks Jen. Fantastic. Can the CSS code be modified to remove the right column on all EXCEPT the Main Page?

David R

Permalink Reply by JenSocial on June 7, 2010 at 6:08pm

Hi David,
This code will only remove the right column for /pages - - new pages you create. Does that make sense?
Best,
Jen

Permalink Reply by Fantagiro43 on July 24, 2010 at 9:13am

Hi Jane. This tip dont work it. Before were ok, but now when we change free site on payment, the right column appear.

What can I do?

Permalink Reply by JenSocial on July 24, 2010 at 9:41am

This tip has been updated since the new Ning. You will want to take the CSS and replace your current CSS, then it should work.
Best,
Jen

Permalink Reply by Fantagiro43 on July 28, 2010 at 4:11pm

Ok. Thanks Jen.

Permalink Reply by Successful Women Network on July 25, 2010 at 2:32pm

ok it did work like a charm up until the new ning launched I guess. Now I have all the right column content at the bottom of all those pages

what to do now?

Permalink Reply by Successful Women Network on July 25, 2010 at 2:35pm

ok nevermind lol I just saw your post Jen :) sorry about the brain fart lol

Permalink Reply by Fantagiro43 on December 6, 2010 at 2:25pm

Add in CSS:

.xg_widget_page .last-child {display: none;}
.xg_widget_page .xg_3col {width:940px;}
.xg_widget_page .xg_span-16 {width:930px;}
.xg_widget_page .xg_span-4.xg_last{ display:none;}

Permalink Reply by JenSocial on December 6, 2010 at 2:37pm

Thanks! You do see this option at top of tip, correct?

Best,

Jen

Permalink Reply by Fantagiro43 on December 6, 2010 at 3:02pm

No Jen.

You add in tip:

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

When I added this code I still have right column at the bottom of pages.

To code I add next part:

.xg_widget_page .xg_span-4.xg_last{ display:none;}

and the bottom right column removed.