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

[Jackie]

this is what i did,i switched the columns around
http://missingskem.ning.com/profile/Jackie

[Jackie]

these are the codes that i used


.xg_widget_main_index_index .xg_3col .xg_1col {
float:right;
margin-left:0;
}
.xg_widget_main_index_index .xg_3col .xg_2col {
margin-left:0;
}
#homelayout div.column {
float:right;
}
#homelayout div.col2 {
float:left;
}
#homelayout div.col1 {
margin-right:115px;
margin-left:-230px;
}
* html #homelayout div.col1 {
margin-right:0;
}


.xg_3col, .xg_widget_forum .xg_column.xg_span-16 {
float:right;
padding-left:0px;
padding-right:10px;
}
.xg_3col .xg_1col {
float:right;
padding-left:0px;
padding-right:0px;
}
.xg_1col.last-child {
padding-right:3px;
margin-left:0px;
}
.xg_widget_profiles .xg_1col.first-child, .xg_widget_forum .xg_column.xg_span-4.xg_last {
float:left !important;
padding-left:0px;
margin-left:0px;
}

[sophie]

I prefer to get rid of one of the narrow columns and just have a wider main column.... looks much better