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: 612

Replies to This Discussion

Very nice! Looks like a fun game, no joke!
Thanks Jen. It is. Unlike Zynga games, objects move.

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?




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.

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?

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!!

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

Glad you got it!


WHAT?!?!?  How did this little awesome button get by us?  Jen, did you know about the check box for  "Display:  show sidebar" on the each page?  AWESOME!

It's a brand new feature, just announced the other day. I haven't announced here yet. I need to.

Best Regards,


Awww, I missed that one, so much going on at once.  At least this is happy news :)



© 2021   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

VIP Ning Tips