This ningbar took me about two hours to put together.  I've seen a lot of different versions of these but I took The best ideas out of all of them and made the ultimate NINGBAR.

What the Ningbar does, it's fixed so it will scroll down the page with you, it's highlighted, rounded search query, and it's transparent.

You can use it on a single Profile just put the code in your design studio or Put the code in your NC custom code box or stylesheet for your entire network..

 

click here to see it live

 

 

Light Hover effect  for dark Themed networks

<style>

#cse-search-box input,#xn_bar_menu_search_query{border:0 none!important;
   border-radius:12px 12px 12px 12px;
   -moz-border-radius:12px;
   -webkit-border-radius:12px 12px 12px 12px;
   -moz-box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   -webkit-box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   outline:0 none;padding:5px 9px!important;width:135px!important;}
   #xn_bar{ height: 20px!important;position: fixed !important;position:align:center!important;
     z-index: 9999;background-color:#4a4a4a!important;top: 0;
   border-bottom:3px solid #ccc;border-top:0 solid #ccc;bottom:0;
   -moz-box-shadow:0 3px 18px #ccc;-webkit-box-shadow:0 3px 18px #ccc;
   box-shadow:0 3px 18px #ccc;height:20px;opacity:0.84;padding-bottom:8px;}
   #xn_bar #xn_bar_menu a{color:#fff!important;}
   DIV#xg_themebody{margin-top:30px;}
</style>

Dark Hover effect for Brite Themed networks

<style>

#cse-search-box input,#xn_bar_menu_search_query{border:0 none!important;
   border-radius:12px 12px 12px 12px;
   -moz-border-radius:12px;
   -webkit-border-radius:12px 12px 12px 12px;
   -moz-box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   -webkit-box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   box-shadow:0 4px 3px rgba(0,0,0,0.5) inset;
   outline:0 none;padding:5px 9px!important;width:135px!important;}
   #xn_bar{ height: 20px!important;position: fixed !important;position:align:center!important;
     z-index: 9999;background-color:#4a4a4a!important;top: 0;
   border-bottom:3px solid #ccc;border-top:0 solid #4d4d4d;
   -moz-box-shadow:0 3px 18px #4d4d4d;-webkit-box-shadow:0 3px 18px #4d4d4d;
   box-shadow:0 3px 18px #4d4d4d;height:20px;opacity:0.84;padding-bottom:8px;}
   #xn_bar #xn_bar_menu a{color:#fff!important;}
   DIV#xg_themebody{margin-top:30px;}

</style>

you can also add some beautiful animation using my discussions

animated ning bar!! HTML-CSS

Six colors to choose from all with the same animation pick your color then add the corresponding code to your NC custom code box or an ad b…

Started by George H. Compton IV in Add a Tip for Other Network Creators

And to finish it all off add these two awesome scripts

Add Member Account Box Links/Notifications to NingBar
Posted by Jen on March 30, 2012 at 3:33pm click here

Add Home and Back to Top button on Ning Bar
Posted by Glenn Lynch on April 24, 2012 at 7:08pm click here

Views: 1099

Reply to This

Replies to This Discussion

you're welcome Badan :)

I added a second choice for The Ning bar..  the second one is a dark hover effect which I think will look better on your Network

Hello George! Very cool site, Ive visited friendly faces ;) this bar does what exactly because Ive visited your site and the gentlemans site below and didnt see anything regarding the navigation bar, I also already have the code for the notifications to show up in the top bar with the home button as well as the go to top button lol what I did see that was super awesome on your site is the latest activity module! how did you place rounded boaxes around them and you have it where the statuses are in a comic book like bubble! thats awesome and I would love the code for that to implement it on my site, but I want to use you ultimate bar as well I just dont see what the code does if I add this to my custom css, can you help me out bro?

ok, i added it just to see what it would do and it looks as though it created like a border around the notification links I already had at the top making the background of my page stand out a bit more, so its pretty cool, I'd like to overall decrease the amount of tabs I have on my site and make all of them cool notification links and icons my members could just click on, check out my site wellkunnected.com I want to minimize all the tabs in the current navigation and make the most used tabs little icons to add to the top of the bar I have now...and the code for the latest activity to go into comic book like bubbles would be awesome lol

 you ask what the Ningbar does, it's fixed so it will scroll down the page with you, it's highlighted, rounded search query, and it's transparent. I've also shortened it so it doesn't reach across the whole page.  Does that answer your question lol :-) and you also wanted the code for the latest activity here you go

.feed-story {
    border: 1px solid #E4E4E4!important;
    border-radius: 5px!important;
-webkit-border-radius: 5px!important;
-moz-border-radius: 5px!important;
    clear: both;
    min-height: 48px;
    padding:10px;
    position: relative;
    word-wrap: break-word;
margin:10px 0 20px 60px!important;
}
.xg_module_activity .feed-story-status .status-update{vertical-align:middle;color:#fff;border:1px solid #ccc;background-color:#14135e;border-radius:35px 75px 30px 67px;-moz-border-radius:35px 75px 30px 67px;-webkit-border-radius:35px 75px 30px 67px;-webkit-box-shadow:6px 6px 10px #ccc;-moz-box-shadow:6px 6px 10px #ccc;box-shadow:6px 6px 10px #ccc;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');margin:0 0 5px 15px;padding:1em 2em;}
.xg_module_activity .feed-story-status .rich-detail{background:#333 url(http://api.ning.com:80/files/V89jqQsqrRMQ*dIR5LsCYRfRrymqkSXewrL70FSdB4i0YWnaXw*2A43JzOvLHW8cSP0TDD*246aw2tivWS9ls09t4udO0WPO/bubbles.png) no-repeat 0 8%;padding:0 1em 0 .8em;}

_

And if you'd like the comments in a bubble that match here's the code for that

/*Comments in bubble with arrow*/
dl.comment{
border:none!important;
max-width: 450px!important;
}

#comments dl.comment dd, #discussionReplies .discussion dd div.description, .xg_module_comment_wall dl.comment dd{
    background: #14135e;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-right: 35px !important;
    padding: 2px 5px 27px 10px;
margin-left:20px!important;
}

#comments dl.comment dd:before, #discussionReplies .discussion dd div.description:before, .xg_module_comment_wall dl.comment dd:before{
    background: url(http://api.ning.com:80/files/HFqCj2J1p5dDEhLE1YWO29om9ILqESN44Bg6dD...*ZHP9Un645KjUnEM37g4p/cornerright.png?c=290&v=201204022039) no-repeat scroll 5px 15px transparent;
    content: " ";
    display: block;
    height: 36px;
    margin-left: -33px;
    position: absolute;
    width: 37px;
}

.xg_widget_video_video_show .description, .xg_widget_photo_photo_show .description{
border:none!important;
}

You have a great day Armani :)

thanks 

George youre the man bro! Thanks my members love the comic book like look! Im a vintage kinda guy myself so when I saw this on your site and being a 25 yr old young man with a HUGE Marvel and DC obsession I knew the comic book like comments and status post was necessary (lol) thansk so much my good man! You've truely made my day (dancing in circles) ...maybe that will be like a new "lol" instead DIC for dancing in circles! :)

that's awesome I'm glad they liked it Armani :-)

Jen send a message and let me know what it was if it's something I should know.

how to change this color?????????

just change the background color in this line of code. Change the #333 to any color you want :-)

.xg_module_activity .feed-story-status .rich-detail{background:#333

you have a great day Nisanth

sorry friend not working 

RSS

Latest Activity

Dustin Craig replied to Dustin Craig's discussion 'My Notes [Updated 5/21]' in the group The Sandbox
"Updated with a couple comments and scratched off some things from today's release."
34 minutes ago
Writer Chick {Diane} replied to John Bizley's discussion 'Show Your Ning 3.0 Sites'
"Goodness, that's harsh.  Beauty is in the eye of the beholder (and the members.) "
1 hour ago
Profile IconMarisa, Cigdem Kobu, Justin Tisbury and 3 more joined Creators
1 hour ago
Chazz replied to John Bizley's discussion 'I have a Question about the Social Channels ( youtube, vimeo )' in the group The Sandbox
"I understand that completely my friend. I admittedly do pay for my external site. Luckily it…"
1 hour ago
Melanie Cooley replied to Phil McCluskey's discussion 'Site Manager Updates for Ning 3.0 Networks'
"Awesome!!!!! Thrilled about the ability to set security by member category. Thank you!  Any…"
1 hour ago
Riccardo Rossini replied to Phil McCluskey's discussion 'Site Manager Updates for Ning 3.0 Networks'
"Phil it's a great news, but for my heath.. () nex time you add new classes pleas advice us…"
1 hour ago
John Bizley replied to John Bizley's discussion 'I have a Question about the Social Channels ( youtube, vimeo )' in the group The Sandbox
"Thanks Chazz I appreciate that and your thoughts. I do already have video lists and players on my…"
1 hour ago
soaringeagle replied to John Bizley's discussion 'Show Your Ning 3.0 Sites'
"oh u havent seen it all check out the text editor and html mode i put so much attention into the…"
1 hour ago

© 2013   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service