Rate this post

Since The Veloist’s inception more than year and a half ago, they’ve continually pushed what’s possible with the appearance of your own social network on Ning:

Design tip: Control your Main page's feature headers 1

One of the small details to highlight is Designer Cleatus Murdaugh’s subtle feature headers on the network’s Main page, like “Forums” and “Photo of the week.” In this case, his goal was to have the feature headers subtly support the content on the page by making the background of the feature module transparent, then adding a thin border just above the feature module header.

If you like this approach, here’s how you can do this on your own social network…

First, head to your Manage page and click “Appearance.” Scroll down, and in the “Body & Content Area” to “Subheader Background.” Subheaders is our terminology for the feature module and it’s the setting to control how your feature module headers appear. Select the checkerboard-like pattern at the top. This will make your subheader color transparent.

Design tip: Control your Main page's feature headers 2

Now, you have transparent feature modules and subheaders. Yup, it is that easy.

Now, you may want to stop here or also decide to add that little bit of separation between the subheaders and your feature modules. To do this, head back to your Appearance page, and click “Advanced.” Then drop the following line of CSS:

.xg_module_head {border-top:1px #999999 solid;}

This will add a thin — one-pixel — border just above your module header title. The #99999 means that the header will be gray, but feel free to use a Web color picker to find your favorite. Want to try putting the line below the title? Change “top” to “bottom.”

The “solid” means that the line will be a solid line, but there are plenty of other options to try — test out what “dotted” looks like on your network.

Let us know what you think or, better yet, send us links to your own handiwork with this tip in the comments below.