Ning Developer Network

Ernie H.

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

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

Share Twitter

Reply to This

Replies to This Discussion

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

Reply to This

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?

Reply to This

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

Reply to This

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

Reply to This

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.

Reply to This

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!

Reply to This

Hi

And how could I do to move to the Right?

Thanks for your help!

Reply to This

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

Reply to This

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

Reply to This

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

Reply to This

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

Reply to This

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

Reply to This

Reply to This

  • First
  • Previous
  • Next
  • Last
  • Page 1 of about 2

RSS

© 2010   Created by Ning Developer Admin

Badges  |  Report an Issue  |  Privacy  |  Terms of Service