Ning Network Tips - Archived Tips

462 members

Description

This Group contains archived Ning Tips. To add a new tip, please go here: Add Ning Tips & Tricks

To view new Ning Tips go here: Ning Tips & Tricks Forum.

Comments Entries Members

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

by JenSocial

May 24, 2012

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

  • up

    Dautov Yerdos

    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

    7

    May 26, 2012

    Load Previous Replies
    • up

      Glenn Lynch

      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: 

      3

      Jun 5, 2012