Ning 3 Help

Commonly Used CSS Classes and HTML

Commonly Used CSS Classes and HTML
4 (80%) 5 votes

Ning 3.0 networks come with the ability to be customized in the Design Studio with pre-set customization options. Things you can do in there that weren’t possible in the past include things such as setting the opacity of a color or image, as well as hiding the network name or fixing a background image’s position on the page.

For people interested in even further fine-tuned designs, the Custom CSS panel in the Design Studio is the place to go to make these changes.

While your network is a hands-on, do-it-yourself affair, this article explains some common selectors (classes, for the most part) that live on Ning 3.0 networks.

Please note this page is meant to be complimentary and introductory to understanding the CSS anatomy of Ning 3.0 networks alongside counterparts in Ning 2.0 networks. This list is not exhaustive.

For folks coming from Ning 2.0 networks, this should also help associate some of the classes you see there with their corresponding partners (if those exist) in Ning 3.0. Complete documentation on Ning 2.0 networks can be found here.

The overall width of a Ning 3.0 network is narrower than the width of a Ning 2.0 network. On Ning 2.0 networks, the width is 982 pixels at its widest (the body class’ width). Ning 3.0 networks are no more than 960 pixels wide. We arrived at this number after creating a grid structure that Ning 3.0 networks are built on. This grid structure is what enables us to ensure that your network looks great on any device – be it a desktop computer, a laptop, a tablet, a notebook or a smartphone.


Please note that specifying a width for spans or other classes in your custom CSS is inadvisable, as this will likely break your network’s responsiveness on mobile devices.


In keeping with the times, Ning 3.0 networks use CSS3 and HTML5 coding. To learn more, click the links for a CSS3 Tutorial or HTML5 Introduction.

HTML Structure

Ning 3.0 CSS Selector Description Corresponding Ning 2.0 CSS Selector
.xg_theme Main container for a Ning site. This div wraps just about everything on a Ning site with the exception of the top bar. In Ning 3.0, this div wraps everything, including the top bar. .xg_theme
n/a This div is a child of the main container .xg_theme on Ning 2.0, and also wraps everything on a Ning site. .xg_themebody
header Header for a site. Contains the site title, description, and navigation. Useful for adding header/banner images. #xg_head
header .header-siteName

and / or

header .header-logoImage

Contains the site title and description. In Ning 2.0, this is a child element of #xg_head. In Ning 3.0, this is a child element of header. #xg_masthead
.navbar Navigation menu for a site. This is a child element of #xg_head. #xg_navigation
.xg_theme > .container

Selectors for specific feature pages can be found with the following bread crumbs (you don’t need to include this entire thing in the CSS, you should only need the class name or the feature–this is just the breadcrumbs for finding it):

.xg_theme > .container > .row > .container-inner.span-full > .[specific-feature-selector]

It might be good to target something like .xg_theme .[specific-feature-selector]

In Ning 2.0, this contains the different columns and contents for a page. Always has class attributes that lets you identify both the feature that a page is related to along with the exact page for that feature.

In Ning 3.0, this is the overall content container (excludes header and footer).

.sheet Modules used to organize and display the contents of different features on a Ning site. div.xg_module
.ningbar Persistent bar at the top of Ning sites. Contains search functionality and links to get to network management and the appearance panel. #xn_bar

CSS Anatomy of a Ning Network

Handles Ning 3.0 CSS Selector Ning 2.0 CSS Selector
Top Ning bar / network bar .ningbar #xn_bar
Sign In / Sign Out / Member Name links

(right side of network bar)

.ningbar .ningbar-userLinks > li a #xn_bar #xn_bar_menu_tabs a
Site Body body body
Content Background

(“Canvas Outer” from Ning 2.0 Design Studio)

.xg_theme > .container .xg_theme #xg
Inner Content Background

(“Canvas Inner” from Ning 2.0 Design Studio)

.container-inner #xg_body
Network Name header .header-siteName .xg_theme h1#xg_sitename
Header Area (full span) .header-container, .header-wrapper .xg_theme #xg_head
Header Background Image

(width is 960 pixels in Ning 3.0 Design Studio)

.container .xg_theme #xg_masthead
Network Logo

(width is 950 pixels in Ning 3.0 Design Studio)

(width is 982 pixels in Ning 2.0 Design Studio)

header .header-logoImage .xg_theme #application_name_header_link img
Navigation Menu Styling .navbar .xg_theme #xg_navigation
Navigation Link Styling .navbar ul .xg_theme #xg_navigation ul
Navigation Links .navbar > ul > li > a
.xg_theme #xg_navigation ul li a
Active Navigation Links .navbar > ul > > a .xg_theme #xg_navigation li.this a
Sub-tab Styling ul.xg_subtab div.xg_subtab
Sub-tab List Items ul.xg_subtab li #xg_navigation ul div.xg_subtab ul
Sub-tab Links ul.xg_subtab li a .xg_theme #xg_navigation li
Page Titles h2 h1
Page Title on Custom Ning 3.0 Pages h2.module-name
(previously this was:
.customPage > .row > .span-full > h3)
Submenu Items (i.e. Blog Categories, Member Categories) .subnav ul.navigation.easyclear
Photos Page sub title (“All Photos”)

(has same styling as Module Headers by default)

.photoListPage h3 n/a
Modules .sheet .xg_module or .xg_theme .xg_module
Module Headers

(for custom pages, member pages, blog pages, forum pages, detail pages)

.grid-frame.sheet > .row:first-of-type >.span-full .xg_module_head or .xg_theme .xg_module_head
Module Header Text  (= h3) .grid-frame.sheet > .row > .span-full > h3 .xg_module_head h2
Content Titles .headline h3 .xg_theme .xg_module_body h3
Photos and Social Channels: Frames

(some Ning 3.0 themes do not display frames)

.matrix .matrix-itemFrame .module_photo .body_list .clist img

(main pages only)

.xg_list_photo.xg_list_photo_main .bd

(listing pages)

Photo Background

(custom pages, listing pages)

.photoListPage .matrix-itemFrame .module_photo .body_list .clist

(main pages only)

.xg_list_photo.xg_list_photo_main .bd

(listing pages)

Social Channels Background

(custom pages, listing pages)

.feedListPage .matrix .matrix-itemFrame n/a
Photo Background

(detail pages)

.photoDetailPage .photoDetailPage-image #photo_page_body .photo
Social Channels Video Player Background .feedListPage .feedListPagePlayer n/a
Photo Size .image.image-contain #photo_page_body #xj_photo_img_tag
Profile Information Box .profileCoverArea-box .row div.profileCoverArea-bio
(previously this was:
.module_about_user dl
Profile Cover Photo .profileCoverArea .cover-photo n/a
Profile Box .profileCoverArea .profileCoverArea-box .xg_module.xg_module_with_dialog.module_user_summary
“Posted by” Text on Custom Pages .headline .headline-byline .dy-small, .xg_theme .xg_lightfont
Module HTML content area

(similar to text boxes)

.sheet .row .content:not(.content-comment) .xg_module.xg_reset
Social Comment Boxes

(custom pages, listing pages)

.grid-frame div.span-full .blogListPage-socialActions span.reactions
Member Category Badge Images .avatar > img.avatar-badgeImage .dy-avatar .dy-badge-image
Member Category Badge Text .avatar-badgeText .dy-avatar .dy-badge-text
Sign Up / Sign In Input Boxes .input, input[type=text], input[type=email], input[type=password], select, textarea .xg_theme input.dy-input-text
Sign Up / Sign In Pages .xg_theme .span12 .sheet .xg_module.xg_lightborder.signin-module


Additionally, padding and margins are largely handled with .span classes on Ning 3.0 networks. To see a visual breakdown of the .span classes that exist, please view the image below:

You can also go to

Similar Articles: