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.

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

Grace Shaki, Martin, Git Along and 16 more joined Ning Creators Social Network
5 hours ago
Kos replied to Suzie Nielsen's discussion
How to hold a Contest? Thumbs up- on 2.0
"It's been a year.  Has anyone come up with a thumbs up/down script?????"
20 hours ago
Fabricio Giugni posted a discussion
Hi there,  Can we integrate the Builderall with Ning? The only thing I want from Ning is the abilit…
Saturday
Fabricio Giugni replied to Fabricio Giugni's discussion
How can I add video from Youtube on landing page?
"Hi,
    Thanks, it did work. But I will create this page in some other place. I spend a Thousand do…"
Saturday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
TRICK: Host Your External CSS and JS Files using Dropbox
"I no longer use Dropbox for this...   I use Github....  ask me how if it is too complicated for you…"
Friday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Create a More Exciting "Featured" Email With Language Editor

still one of the most powerful tools and one of the first things I change when I start a new comm…"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How to Give Your Ning a Really Fake Voice
"These days I use Speakpage and it provides a great on the fly service, but it is limited to a singl…"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How to Create Search Feeds in Bing with a Simple Hack
"thank you brother"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How-to Control Number of Member Profiles on Member Page Using CSS
"Wow... just look how active Creators used to be!"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
You May Not Know This About Facebook
"this tip worked well for me today again"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Linkedin Tip: Export Your Contacts For Import Into Ning
"yes it most definitely does work on both"
Thursday
⚡JFarrow⌁ updated their profile
Thursday
More…

Meanwhile, you can check our social media channels