Making Ning 2 Column

I know ning is going to release a 2 column design soon, but we just couldn’t wait. I work for an organization called YWAM Reef to Outback and we use ning for our main website. Our newest design moved to a 2 column design because we needed it to have a bit more focus and less clutter. Here’s a screen shot (the white section is a flash section that didn’t show up in this screen shot):

The Code

So how did we do it? A bit of CSS did the trick. Even the top module is just the standard members module with a bit of CSS added.

Make the site 2 column:

/* Get rid of the Left Column */
	.xg_widget_main_index_index #xg_layout_column_1{
		display:	none;
	}

/* Widen out our center column */
	.xg_widget_main_index_index #xg_layout_column_2{
		width:		742px;
		padding:	0px;
		margin:		0px;
	}

	.xg_widget_main_index_index .xg_3col{
		margin-right:	10px;
		padding:	0px;
		width:		742px;
	}

	.xg_widget_main_index_index .xg_3col .xg_module_body{
		padding:	0px;
		margin:		0px;
		width:		742px;
	}

The nice thing about this is that it will only make the left column disappear on the homepage. This way users who are using your sites default theme for their personal page will still have 3 column layouts. This is achieved by adding ‘.xg_widget_main_index_index’ to the beginning of our styles.

I bet your wondering how we made the dual columns in the first wide column near the bottom. This was achieved by simply placing the ‘events’ module under the ‘blog’ module in the features section, then adding the folowing css:

Splitting up the main column:

/* Blog Container */
    .xg_widget_main .module_blog .xg_module_head{
        width: 			346px;
    }

    .xg_widget_main .xg_module.module_blog{
        width: 			366px;
        float:			left !important;
        margin-right: 		10px;
    }

    .xg_widget_main .module_blog .xg_module_body{
        width: 			366px;
    }

/* Events Container */
    .xg_widget_main .module_events .xg_module_head{
        width: 			346px;
    }

    .xg_widget_main .xg_module.module_events{
        width: 			366px;
        float:			left;
        clear:			none;
    }

    .xg_widget_main .module_events .xg_module_body{
        width: 			346px;
        padding:		10px;
    }

And there you have it. A ning design with two columns that looks much cleaner.