Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

NC for Hire

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

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • NC for Hire

    Fantastic Jen. Thanks for sharing it.

    Best Wishes

    Bernard

    • NC for Hire

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

      Best Regards,

      Jen

  • This reply was deleted.
  • plus 1

  • Great stuff guys. Again.

  • Awesome tip! Thanks BUNCHES Jen and Kris!

  • NC for Hire

    Hi Everyone!

    Happy you all like the tip!

    =)

  • 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!

    • NC for Hire

      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

This reply was deleted.

Featured Discussions

Announcements

 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Sheshdhar Tiwari posted a discussion
At the sign up we collect date of birth of users. Is it possible to send automated birthday greetin…
7 hours ago
Derek Jackson, Beatriz Eyeres, Elsa Dominguez and 21 more joined Ning Creators Social Network
15 hours ago
Anna_Ning_Support replied to Rich Page's discussion
Help migrating a custom ning 2.0 to 3.0
"Hello,
We offer the migration procedure on our platforms. It can be done by our Technical Team.
Ple…"
20 hours ago
Anna_Ning_Support replied to Annabel Gregory's discussion
Another issue with SSL certificate renewal - please, please sort it!
"Hello,
We do apologize for the delay. The SSL certificates from Let's Encrypt are automatically ren…"
20 hours ago
Captain Major RockettBobebuzz updated their profile photo
yesterday
Annabel Gregory replied to Annabel Gregory's discussion
Another issue with SSL certificate renewal - please, please sort it!
"Correction - Ning didn't reply for 2 days."
Sunday
Annabel Gregory posted a discussion
Hi,Just received an email with the subject line:Let's Encrypt certificate expiration notice for dom…
Sunday
Polly Galita posted a discussion
Hello,We recently created our social network using Ning www.tiomangrow.com and we have 100 members…
Saturday
Mayo Best replied to Anastasiia_NING support's discussion How to monetize your website: use sponsored content. in NING BUSINESS CLUB
"That's great advice thanks."
Saturday
Mayo Best liked Anastasiia_NING support's discussion How to monetize your website: use sponsored content. in NING BUSINESS CLUB
Saturday
Mayo Best and Dan Lee are now friends
Saturday
More…

Meanwhile, you can check our social media channels