New Tutorial: Moving the Wide Column of the Main Page to the Left

[Ernie H.]

If you've seen your share of social networks on Ning, you know there's a certain familiarity to them:  there's a big wide column in the center and narrower columns on the left and right.  And while that's all well and good, what if you could make the wide column on the left?  If your social network is focused on blogs or forums, your main content column would draw more attention, not to mention it would look different from the other social networks out there.  Of course, why explain more when I could show you an illustration?



Awesome, right?  Our designer Huy was nice enough to write some CSS that will change the layout of your network's main page so that the column is on the left instead of in the center. You can take a look at the CSS that made this happen in this tutorial. And if you find yourself successfully using this layout, let us know!

Thanks, Ernie

[Gossipfreak]

what about moving the left colum to the right and the right colum to the left and keep the center colum alone ...is that possible

[Ken Carroll]

Is it possible to hide or turn off the "Hello, Ernie.H" box in the above picture. I've created a page and am importing showing external content using an Iframe...but the content is cut off on the right hand side....I'm guessing this is because the Hello box is still there (I've paid to turn off the ads on my site).

Any ideas?

[Ernie H.]

Hi Ken,

If you're looking to remove the right column completely from pages then you're looking to do something slightly different, but still possible. Try the following:

.xg_widget_page .xg_1col { display:none; }
.xg_widget_page .xg_3col { width:935px; }

Hope that helps,
- Ernie

[Ken Carroll]

Hi Ernie.

Thanks.

One thing I notice though is that my content (enclosed in an Iframe) looks to be shifted to the right on the page ie. there is a ''gap'' on the left hand edge of about 100px !!!

No matter what I try, there always seems to be a ''gap'' (100px ??) on the left hand side of the page before the Iframe left hand edge.

Is this a known issue with pages in NING?

Am sure others out there are having the same problems.

Ken

[The First Lady]

With the upcoming release on 9/16/08, how will this page structure be effected? Will we need to do anything fancy or are you making any modifications to this CSS structure so it will flow like the new release? Also is there a way for the "green welcome box" to be resized to fit this layout structure? Mine seems a bit off.

[AlwayzAnArchAngel (Wanda)]

Hi! I was wondering if there was a way to make the center column wider. I don't necessarily need the left hand column and could do away with it. I would just really like to have the center column wider. Any help with this is appreciated!

[Ivan Arturo Jauregui]

Hi

And how could I do to move to the Right?

Thanks for your help!

[John Nowinsky]

This is nice but I want to be able to swap my right column with my left column on the main page only. Does anyone have the code to make this happen.

Thanks and we'll see you in the pit,

John
armthepit.com

[vaqz]

The code is available @ Livewired

John Nowinsky said:

This is nice but I want to be able to swap my right column with my left column on the main page only. Does anyone have the code to make this happen.
Thanks and we'll see you in the pit, John armthepit.com

[Jackie]

alot of these links are missing i guess because they are old posts?

[Jackie]

http://developer.ning.com/tutorials/Moving_the_Wide_Column_of_the_M...
was going to check it out but its no longer there

[Ning Developer Admin]

The tutorial for this article has now moved to the Ning Help Center:
http://help.ning.com/cgi-bin/ning.cfg/php/enduser/std_adp.php?p_faq...