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

[Glenn Lynch]

OMG!!! What is this witchcraft?!!! Thanks so much Jen!!!! :D

[Glenn Lynch]

Hey Jen sorry to bother you so much with this but how can I make the code above a hyperlink?

[Jana Arnold]

I had the same problem after I added a link to the logo in the top bar.

[Sylvia Hysen]

love it...thx all

[bILLY]

Can someone help when i add the link to my code my logo is cut in half.

[Patrick Chappelle]

See Jen's response here.

[Patrick Chappelle]

This didn't work for me. Ugh! :(

[Erik Woods]

May I suggest these changes?

<style>
#xn_bar {
  height: auto !important;
}
#xn_bar #ningbar_logo {
 float: left; /* although I don't think you will always need this - can probably use left: 0 with position relative or something */
 padding: 0 0 0 10px;
}

</style>

<script>
if (typeof(x$) != 'undefined') {
  x$("#xn_bar #xn_bar_menu").prepend('<img id="ningbar_logo" src="yourimageurl">');
}
</script>

If you say height: auto, it will stretch as big as you need it for the image, without having to edit it anytime you feel like updating the image. If you want more spacing, use something like padding: 0 0 10px 0; to put 10px at the bottom of it, no matter the height.

I also moved the styles for the logo outside of the javascript, because it is good practice to keep those things separate.

And then you could also probably .prepend() the whole dang bar to #xg_head, eliminating the need to override styles for #xn_bar's width and margin.

Also, you can leave type="text/javascript" off of <script> tags in the HTML5 specification. Same goes for <style> tags (but I see you've already done that here).

I haven't really tested this code much at all, but it should all work in theory.

[Patrick Chappelle]

Oh wow! Thanks David. I should have mentioned that I prefer the logo in the sign in box.

[Jen]

Hi Erik,

It looks very good to me, especially like the height:auto on xn_bar - - and adding the style for ningbar_logo in proper place. Sometimes I type so fast while thinking, may not come out with the cleanest final solution. I haven't tested it.

Thanks!

Jen

[Paul Mambwe]

Jen, Thank you very much for this code, Now I have one more problem, How did you add the navigation menu to your Ning bar? I want to get rid of my navigation bar, the name of my website and the tagline words. Please help!