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.
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.
CSS3 & HTML5
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). |
#xg |
| .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 > li.active > 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) |
n/a |
| 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: .profile-box-bio) |
.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 |
Span
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 http://indoormusicfestivals.ning.com/main/demo/grid.