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');}

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



Views: 615

Replies to This Discussion

fantastic advice and works like a charm now I can actually use iframes :) thank you Jen :)
Thanks Jen. Fantastic. Can the CSS code be modified to remove the right column on all EXCEPT the Main Page?

David R
Hi David,
This code will only remove the right column for /pages - - new pages you create. Does that make sense?
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?
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.
Ok. Thanks Jen.
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?
ok nevermind lol I just saw your post Jen :) sorry about the brain fart lol

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;}

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



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.



© 2022   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips