Kyle Ford
Rate this post

A common request from Network Creators is the ability to use alternate layouts on the Main page. We’re planning to officially offer this functionality in the near future, but meanwhile we’d love to share a quick experimental CSS-based layout adjustment trick.

To combine the left and center columns on your network’s Main page into a large single column (as seen above), just follow these steps…

1. Visit your network’s “Manage” tab.

2. Click the “Appearance” option.

3. Click the “Advanced” tab in the middle of the page.

4. Cut and paste the following snippet underneath anything that already exists in the “Advanced” box:

.xg_widget_main_index_index .xg_3col .xg_1col {
display:none;
}
.xg_widget_main_index_index .xg_3col .xg_2col {
width:747px;
margin-left:0;
padding:0;
}
.xg_widget_main_index_index .xg_3col .xg_2col img {
max-width:737px;
_width:expression(this.width > 737 ? 737: true);
}
.xg_widget_main_index_index .xg_3col .xg_2col .xg_reset img {
max-width:721px;
_width:expression(this.width > 721 ? 721: true);
}
.xg_widget_main_index_index .xg_2col .feed-timestamp {
left:645px;
}

5. Click “Save” at the bottom of the page, then click the “Main” tab to view your new layout!

Remember that this technique is experimental, so results may vary and you should test things out first on a test network. You’ll also want to move any left column modules into the center column (via the “Features” section located under the “Manage” tab) to ensure that they appear properly. If you want to insert a wide promotion box as seen in the example above, just add a new Text Box from the “Features” page. If you’re making a custom image or Flash piece, the target width is around 720 pixels, and the height can vary.

Good luck!