The Design of Your Site

The Design Studio: customization made simple

The Design Studio is what you use to customize your site’s appearance. Select a theme, insert a header or background image, two columns or three — lots more details you can change and experiment with. Start with the Introduction to the Design Studio.

Customizing headers and backgrounds

Making a custom header can seem daunting, but it’s not that hard. You’ll need to start with the image of your choice, crop it or resize it to be the correct size, and then upload it to your Ning Network. The width of your Ning Network’s header area is 955 pixels (the height is up to you), and we can show you how to use free online programs to crop or resize your image width to the right size. Dig in and Create a Custom Header.

Removing your network’s name and tagline from the header

Instead of having your Ning Network name and tagline appear over your header, you might want to place the text in your image. If that’s the case, you won’t want the text-based name and tagline to appear on top of your image-only header. It’s easy to change. Just follow these steps to Remove Your Site’s Name and Tagline.

Setting up a custom background image

A background image that sits behind all of your content can be a distraction from the content — or it can be a nice complement to your design. It doesn’t always work, but it can look great when it does. If you’re up for the challenge of creating your own background image, check out this walk-through article. This one requires some knowledge of CSS!

Standalone pages: a blank canvas

Your site is set up around modules and features that you can place in tabs, and each feature/module also sits on its own page, but what if you want to create a standalone page composed of custom HTML you’ve created? Use the Pages feature as a blank canvas to place custom HTML content and link to it from a tab. Some Network Creators use this to add pages that hold content like community guidelines, “about us” content, “welcome center” pages, etc. Just about any type of HTML will work. Pages have a built-in rich text editor that can help with simple styling if you don’t know any HTML. Check out the Introduction to Pages.

Need some templates for standalone pages? We’ve put together some Handy HTML Templates for Pages and Notes. Simply copy and paste the documents you want to use and modify them to fit your network.

Tabs: primary navigation

The tabs on your network point to modules you’ve enabled in your Features Layout, but you can add more tabs, remove tabs, or even hide tabs from some people (without affecting the functionality of the modules). You can even link out to content outside of your network. Learn all about tabs in the Introduction to Tabs article.

CSS: A little knowledge goes a long way

You don’t need to know anything about the underlying design code to use your Ning Network, but if you ever want broaden out your skills a bit, CSS is the way to go. Many of the elements on the page you see are put in place using CSS. You can alter your CSS to nudge things around, hide elements you don’t want to show, or completely redesign your site. If you’re ready to learn a bit about CSS, start with the W3School’s CSS Tutorials. Once you’ve gotten the hang of it, you can start using the HTML and CSS Guidelines from our Developer’s network to make alterations. Obviously, this requires some extra skill, so please use your test network when trying out alterations to your CSS code.

Are you a designer? Use Developer Mode.

If you have some CSS skills already, you may want to read up on Developer Mode in our Design Studio, which lets you alter nearly anything in the design framework of a theme. If you have some serious design chops and want to make your own custom theme from scratch, we have some Ning Theme Documentation that will most certainly help.

Main Page advice from successful Network Creators

How much time do you have to persuade a visitor to join your Ning Network before they hit the back button or move on to another Web page? Five seconds? If your members can’t find a reason to be on your Ning Network right away, you’ll lose them, maybe forever. We have a bunch of examples from Network Creators that can help you really Make Your Main Page Work.