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..
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
Replies
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(https://api.ning.com/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(https://api.ning.com/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
that's awesome I'm glad they liked it Armani :-)
you're welcome Badan :)
cool thanks
bojaper.com
you're welcome
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
-
1
-
2
-
3
of 3 Next