Kyle Ford
Kyle Ford
How to Make Your Social Network Look Amazing in 5 Steps
5 (100%) 1 vote

We offer the ability for Network Creators – and Members – to customize (almost) everything on your social network on Ning.

To make your network look the way you want it to, we offer an Appearance page that makes it easy to customize how your network looks. You can also add your own custom CSS, but we know that’s not for everyone.

We’d encourage you to experiment with all of your Appearance page options on your social network, but 5 simple steps will go a long way to making your network look great with a minimal amount of effort:

1. Start with a theme

Click the “Manage” tab and choose the “Appearance” option, then select a theme that has a color theme/style that’s fairly close to what you’re looking for.


2. Customize your chosen theme

Once you’ve selected your theme, scroll down the page a bit to the “Theme Settings” section. If you’ve picked a theme that contains images (for example the “Dance Club” theme), you’ll see small thumbnail previews of the images in a few of the sections (usually the “Header & Navigation Background” and “Page Sides” sections). If you click these thumbnails and select “No image” in the popup box, you can remove the images while still retaining the colors/style of the network theme.


3. Choose your fonts and colors

You’ll get a big impact from this, especially by changing the “Link Color” option. You can see the results of your changes on the right hand preview window of your network’s homepage. It won’t show everything you’ve chosen, but it’s really good for coordinating colors.

4. Add a logo

A custom logo goes a long way, though it’s not required. If you want to add one, you can make one in a graphics application such as Photoshop, or use an online logo generator. You’ll want to ensure that the image is no wider than 925 pixels (height can vary), and is in .jpg, .gif or .png format.

One little known feature of our network headers is that transparent .png images (which are the cleanest and best option to use) will magically work in older browsers, such as Internet Explorer 6, which are notorious for not handling transparency very well. A little bit of Ning magic 🙂

5. Add your own header background image

The final touch is to create a header background image that bleeds into the body section of your network. A great example of this is the beach photo background used on the Offshore network:


To achieve this effect, simply create a background image in a graphics application or photo editor, and set the size to be 955 pixels wide (height can vary).

If you want to be really tricky, you can add a gradient to the bottom of the image (in the graphics application) that fades to a solid color, then set that color for the “Header & Navigation Background” and “Page Middle” color options. Your custom image can then be uploaded to the “Header & Navigation Background” image option. Choose not to tile it on the popup option screen.


All set? The final step is to insert a small snippet of CSS code that will tell the network to make the “body” section (where your main content appears) transparent. We’ll have this as a selectable option in an upcoming release, but for now you can just click the “Advanced” tab and paste the following snippet in:

#xg_body {

Once that’s in, just click “Save” at the bottom of the screen and you should be set.

You can do a lot with the Appearance options that come standard for free with your new network on Ning. The end result is hopefully something that’s uniquely yours. Happy customizing!