Customizing your Ning

I asked to do some customization of a ning for an outreach project to meet the "graphical identity" of the university. I was really inspired by how well the NECC Ning works works with the NECC main website. But upon investigation (I downloaded their CSS) I discovered they had done more customized things that I was capable of accomplishing. So I set out to customize an existing theme using some of the built in options availablt to Ning.

Step 1: Find a Theme to work with
I decided that HyperMelon gave me the overall look I was going for, just with the wrong colors.

Step 2: Define your color palette
Luckily the web colors for the university and this project had already been decided upon. I used

Red (NC State Red) Web cc0000
Gold Web f2991b
Burnt Orange Web cc6600
Dark Red Web a20000

If you don't have any colors already determined. I recommend using the Visibone Color Lab, not only does this help with matching colors and finding their "web number" it also helps you check readibility for boxes.

Step 3: Changing Colors
Most of your changes will occur in the "All Options" section under appearance. I highly recommend using the Preview function so you can see what these color changes impact. For instance the "Media Player" section actually impacts your badge colors.

Step 4: Changing Theme Colors
However, to change the actual theme options I had to click on the "Advanced Tab" and edit the CSS. The trick with this is to only change the colors, but it can be tough to determine what you are actually changing the colors on. I typically use colors as a guide. I search for the colors in the CSS and look up the number for the color. Then I look at my theme and see where that color is and if it is something I want to change. I'm not sure about all themes, but I imagine the CSS terms are univeral. So I changed the following in HyperMelon:

#xg_masthead p#xg_sitedesc - Changes the Site Description (or Sub head) color
#xg_navigation ul li.this a - Changes the Rollover/Click on the Navigation Bar at the top

Step 5: Adding a Header Image
Header Images need to have a width of 955 and can have a height of 150-200. I found that the theme I was working on actually required a header image height of 125. Since the Site Name and description take up the left side of the Header, you really need to focus your efforts on the right hand side of the header. Also, if you are using logos, I find that the readibility of them goes up if you use a PNG file rather than a GIF file. Once you have your header image you can uload it under the "All Options" under Appearnace.

Overall it took a lot of trial and error, but I think we actually have a Ning that reflects NC State. I hope to announce it soon!