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

Tags: add logo to ningbar, logo, logo in ningbar, ning bar, ningbar

Views: 552

Replies to This Discussion

Hello, Jen!
Yesterday I tried your code to move the logo on ningbar.
But today I have an emergency, my site has turned upside down, everything was destroyed!

PLEASE HELP ME!!!

Kind Regards

Yerdos http://dosspace.com

BEFORE


AFTER

If everything is destroyed, please remove the code. It probably has to do with the signin box links in NingBar. The tip specifies that this will not work with that tip code.

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

Best Regards,

Jen

Also, if you do remove this code and your site is still messed up, I can guarantee that it hasn't anything to do with this code. Try to remember if you happened to change anything else, too.

Hope that helps,

Jen

Hello again Jen , 

I tried everything but nothing helps!

Yerdo,

If you used the code in this tip, and you completely removed it, and you are still having issues, it is another problem. Please make sure you have removed all of this code. To be honest, I can't see how this code could cause what you've shown in your screen shot. If anything, it would have just caused the Ning Bar formatting to be off.

Best,

Jen

Just looked, and it looked nice for me. Hang on and I will add screen shot.

Latest screen shot - - be sure to refresh your screen:

THANK YOU JEN!

YOU ANGEL, YOU ARE BEST!!!

THATS WORK!!!

THANK YOU VERY MUCH!!!)))))))

Hey Jen and Kris!

I'm loving the tip but im having problems:

I was just going through my pictures in Factface and then I encounter this when I click on slide show:

I have another code to add a shadow to the ning bar but when I remove it, it still happens! Plz help!

Also what if I want the logo to fit inside the measurement i want without the extra space below the logo like this: 

Hi Glenn!

I left this answer on Creators, too. =)

 

I'm finding this to be a challenge too, when you use a larger image with link. I have a possible solution. Just make sure, you can see logo signed out and signed in. Don't forget that signed out will need a hard refresh or wait a few minutes. You won't be able to test signed out from test site environment. Be sure to make your xn_bar height appropriate in height.

ALTERNATE CODE:

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

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

Let me know how this goes.

Best,

Jen

Hi Jen

I managed to implement this successfully into the ning bar - however now I've deleted the header, the network name/header displays underneath the ning bar now and the navigation bar is only displayed across half the page instead of the entire width of the site.

Any ideas of how I get rid of the network header name and also get the menu to display across width of the page?

http://midnightmadnessning.com

Thanks

Steve

Steve,

You'll need to send me a test account signin via private email. I need to signin to see this code.

If you could provide an exact list of what is wrong.

Thanks,

Jen

RSS

Members

© 2014   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips