Add Logo to Ning Bar - (collaborative efforts of Jen and Kris)

[Jen]

Add Logo to Ning Bar - (collaborative efforts of Jen and Kris)

 

Kris of Bikerspost.com wrote tonight and asked how to add his logo to his NingBar. Kris is a Design Client, and a VIP Member of JenSocial. So, I was happy to share this code with him. Ironically I had already written the code for the new design for JenSocial - - coming soon! We discussed behind the scenes and decided we'd share with everyone.

 

Important Note: If you are using the tip for adding the SignIn Box links to your NingBar, this will not format correctly.

 

Instructions:

• You will need to size your logo to no more than 30-60 pixels in height. Kris has sized his logo to: 300px width by 52px height.
• Upload your image via a blog or File Manager.
• Copy/paste the image URL.
• Edit the code below, and add your image URL.
• Edit the #xn_bar height to a few pixels more than the height of your logo. See code below within the <style> tag.
• Add ALL of the code to your Custom Code Box via: My Network/Tools/Custom Code
• You will probably need to tweak the padding. Kris added some extra padding to top, like this: <img style="float:left!important;padding-left:10px;padding-top:5px;">

 

<style>
#xn_bar {
 height:60px!important;
}
</style>

<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("#xn_bar #xn_bar_menu").prepend('<img style="float:left!important;padding-left:10px;" src="yourimageurl">');
}
else {
}
</script>

 

Kris also needed the following CSS for his Ning Bar. This will vary per theme. If you use the CSS below, add to Advanced CSS.

#xn_bar {
margin: 0 auto;
width: 1002px !important;
}

 

Be sure to see the awesome tip Kris offered to add logo to your SignIn Box.

 

Have fun!

Jen and Kris

[Bernard Lama]

Fantastic Jen. Thanks for sharing it.

Best Wishes

Bernard

[Jen]

Glad you like it. I had to edit a few things, so the tip has changed a little.

Best Regards,

Jen

[Kris]

After moving our logo to the login box I happened to order a pizza (Domino's) when I opened the door the delivery driver pointed at my shirt (BikersPost.com) and said "I'm on that site".

Well that got me thinking how important our branding is and I needed to put the logo back up in the header but since we killed the 468x60 ad unit I didn't want to use an ad box and have all that dead (blank) space. Plus we would like to have an ad box available if we decide to run a 970x66 ad unit down the road. So I shot an email off to Jen @ JenSocial and asked her if it was possible to add an image (logo) to the ning bar. With a little help from Jen we added the logo to the ning bar too.

Here is a before & after:

[Patrick Chappelle]

Interesting. So instead of your logo being in the header area, it's in the Ning bar. Some thing to consider.

Thank you and Jen for this fantastic tip!

[Ambroise]

Hi Kris,
Are you leaving us ?
BikersPost is no more a Ning site, but a SocialEngine site.

[HELP SEEKER]

plus 1

[Ed]

Great stuff guys. Again.

[Glenn Lynch]

Amazing!!! Thanks Jen and Kris!

[FedMedic]

Awesome tip! Thanks BUNCHES Jen and Kris!

[Jen]

Hi Everyone!

Happy you all like the tip!

=)

[Elliott Verreault]

Great stuff! Quick question though, is there any way to make the logo clickable? So that it would always take the user back to the homepage (in same way it usually works with the header logo).

Thanks!

[Jen]

You should be able to add a hyperlink. Try this code:

<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("#xn_bar #xn_bar_menu").prepend('<a href="http://www.yoursite.com"><img style="float:left!important;padding-left:10px;" src="yourimageurl"></a>');
}
else {
}
</script>

Best,

Jen