Ning Developer Docs

Basic Social Network Layout

Basic Layout

Header
Contains the network's name, and tagline (if exists). Appears on all pages of network.
Body
The page content.
Sidebar
Contains account management functions when a user is signed in, or prompts to join if user is not signed in. This area also contains textual advertising, as well as any modules added by the network creator. Appears on all pages of network.
Footer
Additional links and copyright information. Appears on all pages of network.

Features within the context of the overall network

Features within the network lie exclusively within the body area of the network, and are linked from the main network navigation area. Features can also have corresponding modules on the main page and member profile pages.

Columns

Pages in a social network are based on a strict four-column grid. To ensure pages follow this layout, social network pages are laid out using defined column grouping (.xg_colgroup) and column (.xg_#col) element classes. These divide up the page, into which modules (.xg_module) or other content can be placed.

Example page layout and classes used
Example page layout and classes used.

HTML Overview

If you were to construct the layout depicted above, the following HTML structure would be used:

  1. <div class="xg_colgroup">
  2. <div class="xg_3col first-child">
  3. <div class="xg_colgroup">
  4. <div class="xg_1col first-child">
  5. <div class="xg_module"></div>
  6. </div><!--/.xg_col-->
  7. <div class="xg_2col last-child">
  8. <div class="xg_module"></div>
  9. <div class="xg_module"></div>
  10. </div><!--/.xg_col-->
  11. </div><!--/.xg_colgroup-->
  12. <div class="xg_colgroup">
  13. <div class="xg_2col first-child">
  14. <div class="xg_module"></div>
  15. </div><!--/.xg_col-->
  16. <div class="xg_1col last-child">
  17. <div class="xg_module"></div>
  18. <div class="xg_module"></div>
  19. </div><!--/.xg_col-->
  20. </div><!--/.xg_colgroup-->
  21. </div><!--/.xg_col-->
  22. <div class="xg_1col last-child">
  23. <div class="xg_module"></div>
  24. </div><!--/.xg_col-->
  25. </div><!--/.xg_colgroup-->

Element Definitions

.xg_colgroup
The containing element for a given number of columns (dependant on the width of these columns). A page can contain any number of column groupings, and can also be nested within columns (.xg_#col) to allow more complex page layouts.
.xg_1col, .xg_2col, .xg_3col
Three column elements that each have a corresponding width in pixels specified in the CSS. The width of each of these columns should add up to the width of the containing column grouping.
For example, if the column grouping is three columns wide, then you could have three .xg_1col, or one .xg_2col and one .xg_1col. The first xg_#col in each .xg_colgroup should be given first-child class, the last last-child.

Modules

Once we have defined the page layout using columns, we can use modules within these to contain page content. The containing module element (.xg_module) is typically divided into four distinct parts, although only .xg_module_body is required.

Module structure and corresponding visual appearance.
Module structure and corresponding visual appearance.

HTML Overview

The main components of .xg_module are structured and ordered as follows:

  1. <div class="xg_module">
  2. <div class="xg_module_head">
  3. <h2>Module Title</h2>
  4. <p class="edit">
  5. <a class="button" href="#">Edit</a>
  6. </p>
  7. </div><!--/.xn_module_head-->
  8. <form class="xg_module_options">
  9. <fieldset>
  10. <dl class="label-right">
  11. <dt></dt>
  12. <dd></dd>
  13. </dl>
  14. <p class="buttongroup">
  15. <input class="button submit" value="Save"/>
  16. <input class="button" value="Cancel"/>
  17. </p>
  18. </fieldset>
  19. </form><!--/.xn_module_options-->
  20. <div class="xg_module_body">
  21. <h3>Heading</h3>
  22. <h4>Sub-Heading</h4>
  23. </div><!--/.xn_module_body-->
  24. <div class="xg_module_foot">
  25. </div><!--/.xn_module_foot-->
  26. </div><!--/.xn_module-->

Element Definitions

.xg_module
The containing element for each module.
.xg_module_head (Optional)
The titlebar element. Should contain an edit link if this modules content can be edited/configured.
form.xg_module_options (Optional)
Module configuration options. Typically seen on the Main and Profile pages where the network creator/member can choose how to display content within this module.
.xg_module_body
Contains the modules content. Adding the pad class to this element will give the module more padding - useful for when a module takes up a whole page or is quite large.
.xg_module_foot (Optional)
Used to contain related links (RSS links, link to view more content etc.)

Icons

Throughout a social network, a number of icons are used to highlight specific links or features.

Icons can be styled in two ways. The .desc class applies an icon to a link (<a>) or text selection (<span>), whilst the .icon class applies an icon and hides the display of the associated text.

A second class (listed in the tables below), defines which icon is shown.

HTML Overview

  1. <!-- Text with friends icon -->
  2. <span class="desc friends">Friends</span>
  3. <!-- Text with friends icon applied (description hidden) -->
  4. <span class="icon friends">Friends</span>
  5. <!-- Link with share icon -->
  6. <a href="#" class="desc share">Share</a>
  7. <!-- Link with share icon applied (description hidden) -->
  8. <a href="#" class="icon share">Share</a>

Typical Actions

Class class="desc [Class]" class="icon [Class]"
.add Add Add
.edit Edit Edit
.delete Delete Delete
.approve Approve Approve
.download Download Download
.rotate Rotate Rotate
.play View as Slideshow View as Slideshow
.copy Copy Copy
.save Save Save
.view View View
.leave Leave Leave
.comment Comment Comment
.reply Reply Reply

Social Networking

Class class="desc [Class]" class="icon [Class]"
.addfriend Add Friend Add Friend
.friend-pending Pending Friend Pendind Friend
.blocked Blocked Blocked
.friends / share Friends / Friends
.sendmessage Send Message Send Message
.invitefriend Invite Friends Invite Friends

Toggles

Class class="desc [Class]" class="icon [Class]"
.feature-add Feature on Main Feature on Main
.feature-remove Remove from Main Remove from Main
.favorite-add Add to Favorites Add to Favorites
.favorite-remove Remove from Favorites Remove from Favorites
.follow-add
.follow-remove

Pictorial & Miscellaneous

Class class="desc [Class]" class="icon [Class]"
.page Page Page
.table Table Table
.clock Date Date
.settings Settings Settings
.rss RSS Feed RSS Feed

Validation & Error Handling

When validating forms, we provide the user with feedback as to where errors have occured by highlighting both the offending fields (adding .error classes to the offending <dl/> elements), and providing a message that descripes the problem in more detail (using the .errordesc class).

The .errordesc element must appear directly before the set of fields that have errors.

Example of a form requiring validation.
Example of a form requiring validation.

HTML Overview

  1. <fieldset class="nolegend">
  2. <div class="errordesc">
  3. <h4>There are problems with your profile</h4>
  4. <ul class="last-child">
  5. <li>Please provide your First Name</li>
  6. <li>Please provide your Country</li>
  7. <li>You must accept the User Agreement to continue</li>
  8. </ul>
  9. </div>
  10. <dl class="label-right error">
  11. <dt><label for="first-name">First Name</label></dt>
  12. <dd><input id="first-name" type="text" class="textfield" size="30" style="width:420px" /></dd>
  13. </dl>
  14. <dl class="label-right">
  15. <dt><label for="last-name">Last Name</label></dt>
  16. <dd><input id="last-name" type="text" class="textfield" size="30" style="width:420px" /></dd>
  17. </dl>
  18. <dl class="label-right">
  19. <dt><label for="about">About You</label></dt>
  20. <dd><textarea id="about" rows="3" cols="30" style="width:420px"></textarea></dd>
  21. </dl>
  22. <dl class="label-right error">
  23. <dt><label for="country">Country</label></dt>
  24. <dd>
  25. <select id="country" style="width:420px">
  26. <option selected="selected">United States of America</option>
  27. <option>Canada</option>
  28. <option>United Kingdom</option>
  29. </select>
  30. </dd>
  31. </dl>
  32. <dl class="label-right error">
  33. <dd><label><input type="checkbox" class="checkbox"/>I have read and accept theUser Agreement</label></dd>
  34. </dl>
  35. <p class="buttongroup">
  36. <strong class="left"><a href="#">Cancel</a></strong>
  37. <input type="submit" class="button" value="Submit">
  38. </p>
  39. </fieldset>

Last updated by Ning Developer Admin Jul 6, 2009.

© 2017   Created by Ning Developer Admin.   Powered by

Badges  |  Report an Issue  |  Terms of Service