PLEASE SEE UPDATE & BETTER SOLUTION (September 14, 2010) Below horizontal rule, at bottom of this discussion.

Hi Everyone,
As a lot of you probably know, I spend many hours of everyday tweaking and designing Ning Networks. Well, wow, did I just think of a nice trick to fix an issue I've been experiencing for a while. It's so darn simple, someone else probably already does this. I had not thought of it until today. I thought I would share.

Here's the Issue: Network Header / Network Logo Not Clickable
This topic is not for the faint at heart. But, it could really solve a big issue for a lot of Network Creators, if you can patiently read through the issue and the resolution.

How To Make Your Network Logo (Top Header on your Network) Clickable?
In order to make your Network Logo clickable (goes to your home page when clicked), it must be uploaded via Manage/Appearance/Advanced CSS/All Options/Network Logo. Okay, no big deal, right? There are ways to upload the header via CSS and make it clickable via script, but not worth the trouble. And, when it comes to something like your Network Logo, it's always easier to have the option of uploading, versus custom CSS.

Here's The Problem:
Most of the built-in Ning Templates (themes) only accommodate an image that is 925 pixels in width for the Network Logo, instead of the default site width which is 955 pixels.  If you upload an image that is 955 via "Network Logo" - - SO IT IS CLICKABLE, two things will happen. (1) Your image is resized down to 925, which causes your image to be less crisp than it should be. And, (2) your header is less in width than your Navigation bar. Why does the Ning platform do this? Honestly, I don't know. There must be some reason.

What If You Need Both? (Logo width of 955 pixels, and clickable)
Summary of why I need both: I'm working on a project where I really want the header to be clickable. But, I want the header to be 955 pixels in width. I want the Client to be able to change the site header in the future, by simply uploading a different image - - if they so choose to do this. I want it to be easy for them. For his original theme, the Network Logo is 925 pixels in width. This means, I cannot upload the Logo via the Network Logo option. I will have to upload via Header Image. This means the header will not be clickable.

Here's my Easy Solution:
This solution sounds hard. It's not. I'm just thorough.

1. Upload the Header via Manage/Appearance/All Options/Header Image. This upload method accommodates 955 pixels in width.
2. Make sure the masthead visibility is on. In other words, look for this code in your Advanced CSS:
   • /* #xg_masthead {visibility:hidden;} */
   • Comment it out as I have, above. Or, delete it.
3. Create a transparent png image that is exactly the same size/dimensions as your header image. If you don't know how to create a transparent png or don't have the software to do it, follow these steps:
   • Go to http://pixlr.com, click on Create New Image.
   • Enter your logo image dimensions.
   • Click on transparent.
   • Click on File Save and select Format PNG.
4. Upload the transparent png image via Manage/Appearance/All Options/Network Logo.
5. This invokes the application_name_header_link style and adds the home page link to your transparent image.
6. Click SAVE.
   
7. Important STEP: Right-click in the area where you added your transparent image. Make sure the boundary box of image doesn't cover your Navigation bar. Due to z-index, it doesn't seem to matter. But, to be safe, you don't want the transparent image preventing your Navigation menu tabs from being clickable.
8. In my special case, I changed the top padding from 35 to 0, in the advanced CSS code:
   • #xg_masthead p#xg_sitename {padding-top:0px!important;}
   • It was: #xg_masthead p#xg_sitename {padding-top:35px!important;}
   • Done!

I hope this helps someone. ;-)
Jen

---

UPDATE (September 14, 2010):
I think I have a better answer:

Basically, instead of uploading transparent image via Appearance/Options/Network Logo - - float a transparent image with a link, over header area of network. Since it's easy to position this incorrectly, I consider this an advanced hack - - although simple to do.

Instructions for fellow NCs:
1. Create a transparent image the height of your network logo area. If you don't know how to create a transparent image, the instructions are included in the original tip, above.

2. Make the width very wide, like 2500 pixels. This way, no worry about left positioning.

3. If you do not have an image server, upload your transparent image via a blog. Copy URL of image for use below.

4. Using the example code below, change the transparent image path to your image path.

5. Add code to Custom Code Box.

6. Be sure to test this thoroughly. Make sure your transparent image/hotlink is not covering up your menu tabs, or any other header links you may have.

7. Also, if you have links in your header like my Tutorial on moving members to header, or Google Ads etc... - - this probably won't work for you.

8. If I used it on JenSocial for example, I would try, by making my width around 400px, and testing on several screen resolutions to make sure it wasn't covering up the member links in the header.

Code to adjust and add to Custom Code Box (basically we are floating an image/link over the network logo area of site):

My image example is 2500 by 110 - - which means a hyperlink will cloak that entire area at top of site.

<a title="JenSocial Free Directory for All Social Networks" href="http://jensocial.com" target="_blank"><img style="p osition: absolute; top: 0px; left: 0px;" title="JenSocial Directory" alt="JenSocial Free Directory for All Social Networks" src="http://your_image_path/transparent_hdr.png?&width=2500&height=110&xn_auth=no&type=png"></a>

CRITICAL NOTE! REMOVE THE SPACE AFTER THE P IN THE WORD POSITION

Sorry, this is due to Ning changing the word position for security measures.

Let me know what you think,
Jen