One thing we hear occasionally is, “I love Ning, but the design is a bit boxy. How do I make my network look different?”

I bring you The Veloist. The Veloist is a social network for cyclists. It is also a great example of the visual design freedom you have with your social network on Ning.

A few other things to highlight about The Veloist:

• They’ve watermarked their video player and photo slideshows for The Veloist.
• It’s domain mapped for www.veloist.com
• The search engine optimization that comes automatically with every network on Ning, even domain mapped ones, pops The Veolist to the top of Google search results.
• They’ve used sponsors and logos on the left column to visually differentiate their social network. A simple way to do this would be to add a Text Box to the left hand column of your Main page and upload a number of images to get a similar look.

For you web designers out there, the specific directions for customizing the CSS code on your network to move away from “boxy” are after the jump.

To remove boxes around your network’s content, just click the “Manage” tab, then choose the “Appearance” option. From the “Appearance” page, click the “Advanced” tab and paste in the following custom CSS (it can go below any other custom CSS you might have already added):

/* Feature Box Titlebars */
.xg_module_head {
padding-left:0;
background-color:transparent;
border-bottom:1px solid #000000;
}
.notitle { display:none!important; }

/* Feature Box Body */
.xg_module_body, .pad {
padding-left:0;
background-color:transparent;
}
.notification { padding-left:7px; }
.ningmsg { padding-left:15px; }

/* Feature Box Footers */
.xg_module_foot {
padding-left:0;
background-color:transparent;
}

Be sure to tweak the hex code color #000000 shown above to work with your network’s color palette. This site is useful if you need hex code color help. Happy un-boxing!