Layout Changes with the New Grid

With the release of the social network version 3.0 we've changed the layout of many pages on your social network. As with any change there are some things that you may need to update, especially if you're merging in changes, but we're confident that these changes will be worth the one time effort.

This document describes these changes in a bit more detail. Here you'll find everything from the new widths of columns to new classes that you will need to know for your custom CSS advanced appearance settings.

What's New and What's the Same

Universal across all pages

• Themes - all Ning themes without Custom CSS will work
• Container (div#xg) - remains the same, 955px width, centered on most themes
• Header - remains the same, 955px width
• Footer - remains the same, 955px width
• Spacing between columns (gutter) - has been reduced from 15px to 5px, leaving more space for content and reducing the boxy/airy feel of the current layouts
• Container left and right margins - reduced from 15px to 10px
• Ning RSS, Text, Music, Photo, and Video Modules - We've recoded all our modules to scale appropriately with the new Grid system.
• Right column
  • The current system has a right column width of 220px. The new Grid has reduced this down to 183px so that ads are nicely framed in a container close to their native size (the default Google Adsense ad is 160px wide).
  • This also affects any features placed in the "All Pages" box on the "Features" page (includes text boxes with flash widgets/embeds).
  • Any images sized larger than 183px will automatically be scaled down to fit that box.
  • Flash widget and embeds need to be set to "width=100%" or a size smaller than 183px.

Main Network Page and Users Profile Pages

• Left column - width has grown from 220px to 230px. This will likely not cause any visual interruptions but do note the extra 10px of space.
  • Left column text boxes have a width of 220px with 5px padding.
• Center column - width has grown from 445px to 502px. This will give you more space to highlight your content and show off the features of your site.
  • Center column text boxes have a width of 492px with 5px padding.
• Right column - width has shrunk from 220px to 183px.
  • Right column will now fit the following ad units (based on IAB Ad Unit standards):
    • 88 x 31 IMU - (Micro Bar)
    • 120 x 90 IMU - (Button 1)
    • 120 x 60 IMU - (Button 2)
    • 120 x 240 IMU - (Vertical Banner)
    • 125 x 125 IMU - (Square Button)
    • 160 x 600 IMU - (Wide Skyscraper)
    • 120 x 600 IMU - (Skyscraper)
    • 180 x 150 IMU - (Rectangle) "requires negative margin mod"
    • Note: The number of supported IAB Ad Unit standards hasn't changed from the old grid to new grid transition. The new grid has tightened the white space around the ads.

CSS class changes

• .xg_module_user_summary is now .module_user_summary
• .xg_module_about_user is now .module_about_user
• .xg_module_friends is now .module_members
• .xg_module_forum is now .module_forum
• .xg_about is now .module_about
• .xg_badges is now .module_badge

Grid Specification

Grid Specs

• 955px static page width
• 20 columns @ 42px width
• 10px gutters
• 10px left and right margins
• Combined column widths (with gutters), ie span-x:

  Columns	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20
  Pixels	42	89	136	183	230	277	324	371	418	465	512	559	606	653	700	747	794	841	888	935

Examples

Here are some sample layouts from which you can begin your experimentation.

• Sample 3-column layout

  <div id="xg_body">
          <div class="xg_column xg_span-5">left column</div>
          <div class="xg_column xg_span-11">middle column</div>
  
          <div class="xg_column xg_span-4 xg_last">right column</div>
  </div>
  
  

• Sample 2-column layout with nested columns

  <div id="xg_body">
          <div class="xg_column xg_span-16">
  
                  <div class="xg_column xg_span-6">left column, nested left column</div>
                  <div class="xg_column xg_span-10 xg_last">left column, nested right column</div>
          </div>
          <div class="xg_column xg_span-4 xg_last">right column</div>
  
  </div>
  
  

• Sample centered column (12 grid columns)

  <div id="xg_body">
          <div class="xg_column xg_span-12 xg_prepend-4">centered column (12 grid columns)</div>
  </div>
  
  

Tools

• Download An Adobe Photoshop template for your graphic design needs
• Download An PDF showing just a few of the layouts that you can accomplish with the new grid.