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!

Tags: css to remove right column, hide left column, hide right column, how to hide right column, remove left column, remove right column, remove right column for specific page, remove right column on ning, remove right column on one page, remove right column on pages, More…remove right column page

Views: 301

Replies to This Discussion

Permalink Reply by JenSocial on December 6, 2010 at 3:05pm

I thought something was up, but wasn't sure. Glad I asked. This was not the case in the past. I will check this tonight. Thank you for letting me know.

Best,

Jen

Permalink Reply by JenSocial on December 8, 2010 at 11:05am

Thanks Fantagiro43!

I tested this on several sites. It only happened on some, that the right column was moved to bottom. To be safe for all, I have edited the tip and added your line of CSS. Thanks so much for bringing to my attention. I do know a while back Ning altered one class, and this was the class.

Best to you!

Jen

Permalink Reply by Fantagiro43 on December 17, 2010 at 8:21pm
I am pleased that I could be useful :D
Permalink Reply by JenSocial on December 17, 2010 at 8:40pm

Thanks again! Merry Christmas, Happy Hanukkah, and Happy Holidays!

Permalink Reply by Anita on January 23, 2011 at 4:18pm
Hi Jen and Happy New Year! this is a wonderful tip! I have been looking for this for a long time. I added an Amazon Affiliate store and I couldn't get the CSS to remove the right sidebar on Amazon. Now I can leave it and just remove the right column! Thanks again to everyone for being so helpful.
Permalink Reply by JenSocial on January 25, 2011 at 1:14pm
Anita, Great to hear! Thanks for the feedback!
Permalink Reply by Mr Schmooze™ on April 4, 2011 at 10:15am

hi, jen, great tip, the code actually works, but the iframes on my page still appear as if the right column is still present blocking it. i have increased the iframe width but there is no change.

 

here is the iframe code i used

<iframe src="http://www.bellanaija.com" allowtransparency="true"
width="945" frameborder="0" height="2000" scrolling="yes"></iframe>

 

here is a link to one of my pages to help you understand my problem better....

 

http://schmoozelounge.com/page/bella-naija

 

p.s. i'm experiencing this on all my pages. i used the code you provided above... i'll appreciate a response from you soon. thanks.

Permalink Reply by JenSocial on April 4, 2011 at 2:55pm

You are using a new layout that was created after this tip. See updated tip, or give this a try:

.xg_widget_page .xg_last {display: none;}
.xg_widget_page .xg_3col {width:955px;}
.xg_widget_page .xg_span-14 #xg_canvas {width:945px!important;}
.xg_widget_page .xg_span-4.xg_last{ display:none;}

FYI: Unless you are a member of the premium group, please don't expect answers this quickly. I offer assistance if time allows. 

Best Regards,
Jen
Permalink Reply by Mr Schmooze™ on April 5, 2011 at 2:09am

Thanks alot, jen. i fully appreciate your response. it worked.

 

Regarding the premium group, i'll be joining that soon, sstill trying to raise funds...

 

Once again thanks,

I appreciate this.

Permalink Reply by Kingdomz X Heavy Metal Ent. on January 25, 2011 at 1:01pm
Just used this for the first time today to install a video game. Thanks a million Jen and Fantagiro43!
Permalink Reply by JenSocial on January 25, 2011 at 1:14pm
Cool! Thanks for the feedback!
Permalink Reply by Kingdomz X Heavy Metal Ent. on January 25, 2011 at 1:30pm
You're welcome. You an have a look if you have a second.

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips