Give Your Network a Single Column Layout

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!

No related posts.

17 thoughts on “Give Your Network a Single Column Layout

  1. chrislane0x

    I got this CSS trick to work with my “main page” is there a way to do a similar thing with my “groups” pages?

  2. opjjuly

    I have tried it out on my site, because i think its clean and does not carry too much text boxes. 🙂 Now my problems is… the thumbnails for photos, members and videos text boxes, are not wide enough to occupy the whole wide column, it looks untidy and filthy 🙁

    Is there a way to alter the size of the thumbnails of the videos, members and photo text boxes to occupy the whole wide column? withought leaving any spaces?

  3. Tiatom Group Worldwide

    I want to move my center column (Wide column) to the left of the page. How do I?

  4. Brian Fløe

    content added to the html text boxes are scaled down and cannot use the extra space now gained when removing the left column !

    1. Nick

      Hi Brian,

      Like Kyle says, this trick is experimental and results may vary. If you’re seeing some weirdness on your page, drop us a note in the Ning Help Center and we’ll see if we can work with you to get the right CSS.

      We’ll thoroughly test this out before introducing it as a built-in option. But we posted this a while ago to share with Network Creators who wanted to play around with their layout.

      Thanks,
      Nick

  5. Urban Beauty Collective

    this worked fab on our site. really perfect. gives a nice custom feel. thank you so much.

  6. Jeff Rothe

    Evan,

    Totally didn’t know you responded to my note about the albums.

    I know HTML enough to have tried this. The problem being, with three set to be the amount of albums displayed within each unordered list, when you remove the clear, how the albums wrap is completely up to the amount of text used to describe the album.

    Not a good solution. But…I understand Ning is going to allow us to change column amounts in the near future…which I am patiently waiting on….And hopefully the modules then will adjust….or the unordered lists for the albums module will only have one opening and one closing tag, and all list items inbetween, regardless of rows.

  7. Max Klausner

    Hi

    I tried this out and it worked great however when I tried to embed a flash widget in the textbox (that had the correct dimensions of the entire space) the widget was buffered on all sides by white space. In other words it was essentially shrunk down. I was surprised because this does not happen when embedding the same widget into new pages.

    Is there any way of getting rid of the buffer? I can temporarily get rid of it by “editing” the code but then just hitting cancel. (why this works I have no idea) however when you refresh the page it reverts back to its smaller state.

    Thanks,
    Max

  8. Mikaela

    Hi Evan!

    I saw this Сoinopspace network on the Ning blog after this post with published and I just wanted to know If that is an example of using your CSS code to get a single column.

    If so I noticed that the content of some modules will still remain the width of the original center column. Is there a way to get that content stretched across the new width? I already noticed that when you use modules with text, like the forum, blog etc. it stretches but then the pictures within the blog would still be resized to the middle column width.

    I am correct?

    Is there a way to stretch everything in the single column?

    Mikaela

  9. Danielle

    The Watchmen,

    you can use an HTML code to make them split in 2 rows here is the code

    Your Info Here

    Your Info Here

    make sure you take the space out of the beginning of the code (next to the < and the word table) for the code to work

    Hope this works for you!
    Danielle

  10. The Watchmen

    Is there any way to have a text box (or two) as one column, then everything below that text box be in two columns?

  11. Evan

    Hi Jeff!

    If you have albums showing in your photos module and would like the limit per row to not be capped at three, try adding this CSS (via Manage>Appearance>Advanced):

    .module_photo .clist {clear: none;}

    That should do the trick. But keep in mind it won’t change the overall number of albums showing. You’ll need to adjust that!

    Cheers,
    Evan

  12. Jeff Rothe

    This is ok, but for those of us who knew about setting the display to none already this doesn’t help the fact that the ul tags for the photo album display sets a fixed display of three albums per row…

    But glad to know in the future Ning will allow for two column layout on the homepage. Is this a three month out feature? Or beyond?

  13. Marvin A. Vasquez

    Hello Kyle,

    Thanks for the trick, it looks good, but I want to be able to keep the stuff I had on my left side of the page. Can we do this and how?

    Thank you,

    Marvin

Comments are closed.