Navigation: 首页 > SNS > Social Networking

How to Create a Custom Header For Your Ning Network

Time:2010-03-11 19:04:57 Source:Ezinearticles Author:Sara Morgan

If you have just created or are about to create your own social network using Ning, let me start by congratulating you. You have begun a journey that may become life changing for you. No doubt you have heard of the importance of online social networking. Well, Ning is a platform that lets you build your own social network for free. That's right, free.

Not only is it free, but the tools and features Ning provides allow you to take it to any level you want. There are so many options available to network creators, it is almost insane. In this article, I will discuss three ways you can customize your networks header. Customizing the header can go a long way toward making your network stand out.

First off, only a few of the Ning themes allow you to make this kind of customization. You will have to make sure you are using one of the following themes: Stonewashed, Biomatic Tangerine, Fresh, Baby Blue, Icy, Royal, Marmalade, Biomatic Emerald, Lawn, Pure Dark and Pure Light.

Option 1: Use an existing background image as header This option is the simplest, but as you can imagine also produces the least impressive result. When you select an image for the header, your network name will still appear in the header; it will just be displayed on top of the header image you select. Additionally, the menu items will also be displayed on top of the header image.

If you have not already selected a background image, you can do a quick search online for "free background graphics" and locate an image that works for you. Once you have identified which image to use, you will need to perform the following steps (note that only the network creator or an administrator can perform these actions):

1.) Go to the Manage tab and click Appearances.

2.) Scroll past the themes and click the All Options tab.

3.) In the Colors section, you should see a setting for the Header Image.

4.) Click the camera icon and browse to the location of your selected background image.

5.) Once the image is selected, click Done. You will also need to select "Tile Image" from the drop down box next to the header image.

6.) To complete the customization, you will need to scroll down to the bottom of the page and click Save. Note that it may take a few seconds for your changes to be made.

While using an existing background image can improve the look of the web site, you can take it a step further to get a more polished look.

Option 2: Modify an existing Image to use as the header The second option involves modifying an existing image. This option is particularly useful when you want to use a header image from another web site. The only problem with doing this is typically the header image from the other web site will need to be modified to fit properly on your network web site. For example, I recently wanted to utilize an image header that was not wide enough for the network I was customizing.

To resolve this problem, I will need to make a copy of the image used on the other web site and then modify it using a graphics editor. Since I already have a graphics editor, this was not a problem for me. If you do not already have a graphics editor such as Adobe's Photoshop, I suggest you download a free version of Paint.NET to alter the copied image. Paint.NET's Windows-based software is comparable to popular and expensive graphics editors like Photoshop. The biggest differences are that Paint.NET is free and easier to use.

The image I use on the social network web site should be no wider than 955 pixels. Unfortunately, the image from the other web site was only 755 pixels wide. I know this by the way because when I right-click on the image from Internet Explorer and click Properties, I get a property box which shows me the dimensions.

I will need to resize the image to make it wider. This can be done by performing the following steps:

1.) Make a copy of the original image, so you can always go back to it if you make a mistake.

2.) Open the copied image in Paint.NET.

3.) Click Image and Resize.

4.) Change the width value to 955 and click OK (note that the height should be adjusted automatically).

Besides resizing the image, I also need to remove some of the text that currently appears in it. I can also do this in Paint.Net by performing the following steps:

1.) Select the Color Picker tool, which looks like an eye dropper from the Tools window.

2.) Click in the image area where the text appears. After doing this, the background color in this area should show up as the primary color in the Colors window.

3.) To remove the text start by clicking the Paintbrush tool in the Tools window. Hold down the left mouse key while carefully dragging the paintbrush tool across the image surface.

4.) Repeat this motion until the text no longer appears on the image. If you make a mistake, you can use the History window to go back to a prior change and start over.

5.) When you are satisfied with the result, click File and Save As.

6.) From the Save As dialog, click Save and when prompted to overwrite the file click, "Yes". Click Ok on the Save Configuration dialog.

Once the copied image has been saved, you can return to the Ning social web site and modify the appearance settings. Follow the steps detailed in Option 1: Use an existing background image as header, to indicate the image to use as the header.

In addition to specifying the header image, you can also change the text color used to display the network name and tagline. For example, if I wanted to use the exact color shade that was used in the original image, I could do this by performing the following steps:

1.) To determine what color code to use, open the image using Paint.NET and used the Color Picker tool. To view the hex code associated with this color, you will need to click the More button in the Colors window.

2.) Copy the hex code by selecting it with the cursor and clicking Ctrl+c.

3.) Return to the Appearance properties in Ning and click within the box for the Network Name. You can then paste the color code by clicking Ctrl-v.

4.) When I am done with my changes, I just need to scroll down to the bottom of the Appearance settings page and click Save. After a few seconds, the new header will appear at the top of my social web site.

Option 3: Create a new custom image as the header This is by far the most difficult option and unless you are very comfortable working with graphics-based programs, then I would hesitate before trying to take this task on by yourself. If you happen to be very lucky and your spouse or friend is a graphics person, then there might still be some hope. I have interviewed other Ning network creators and asked how they attained the beautiful looking headers they have. In all cases, the network creators had the custom images created by a knowledgeable friend or spouse who did not charge them to produce the graphic.

There is no doubt that a professional looking header will help your social network web site stand out more. However, if you are not a graphics person and you do not know someone who can design it for you for free, I would just opt for one of the first two options I listed, at least for the time being. Also, keep in mind that good content is often more important than good design. If your time is limited, it is better to focus most of your energy on the content.

Sara Morgan is the author of "No Limits: How I escaped the clutches or Corporate America to live the self-employed life of my dreams". As a professional web developer for the past 12 years, she knows a thing or two about web sites. She has just completed a do-it-yourself guide for beginners and small business owners that want to build their own professional looking websites for very little money. You can sign-up to download the FREE guide from her company's website at http://www.custsolutions.net. She is currently creating an EBook that steps someone through creating their own popular social networking website with Ning.

Article Source: http://EzineArticles.com/?expert=Sara_Morgan

Sara Morgan - EzineArticles Expert Author

Prev:Facebook Emoticons and Smileys
Next:Marketing With LinkedIn

Digg

Home

Partners

Related Posts

Recent Posts

Hot Posts