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

Forum

NC for Hire

Hi folks,

You must have seen my previous tip "Youtube Like Pagination". In addition to that, I'm going to show you how to make search bar more attractive and matching with youtube like pagination.

Simply copy and paste the following code into advanced CSS box. That's it. 

If search image link is broken, please find the attached file and download it. 

Keep adding and keep enjoying. Subscribe to tips for NCs for more.

Also you can contact me for better network customization and other ning stuff @ bernardmax@gmail.com

The Code 

<!-- SEARCH BAR CUSTOMIZATION BEGIN -->

.module_searchbar .xg_module_body {
-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.25),0 1px 0 white;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.25),0 1px 0 white;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffc8c8c8,EndColorStr=#ffe6e6e6);
background-image: -moz-linear-gradient(top,#C8C8C8 0,#E6E6E6 100%);
background-image: -ms-linear-gradient(top,#C8C8C8 0,#E6E6E6 100%);
background-image: -o-linear-gradient(top,#C8C8C8 0,#E6E6E6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#C8C8C8),color-stop(100%,#E6E6E6));
background-image: -webkit-linear-gradient(top,#C8C8C8 0,#E6E6E6 100%);
background-image: linear-gradient(to bottom,#C8C8C8 0,#E6E6E6 100%);
}

.module_searchbar .xg_icon-search {
background: url(http://api.ning.com:80/files/BGFE84IJT1uV9RBHKKRGAVdQQLfuOBoefOT*aXST3Lzu6pGhGWy-j1ZcFpZeZ-JvTHt44l8DCAw8oDYtgVP5ME-dJq2cgXc2/search.png?xn_version=201210232201) no-repeat scroll 0 0 transparent;
height: 31px;
width: 90px;
}

<!--SEARCH BAR CUSTOMIZATION END -->

 

Live Example

Screenshot Example:

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

Join Ning Creators Network

Email me when people reply –

Replies

  • Nice and slick! I dig! :) Thanks!

  • Nice :)

  • sweet

  • NC for Hire

    Thanks guys...

  • NC for Hire

    Hi Hoao,

    There is another attachment. Please open that...copy and paste it directly. If it still doesn't work, let me know. 

  • NC for Hire

    Hi Joan,

    Where did you paste the code? Top of all codes inside Advanced CCS? Bottom of all codes inside Advanced CCS? Just change the place and see what happens. 

  • NC for Hire

    Thanks Joao. Glad it worked for you now. 

This reply was deleted.

Search the Creators Network

Latest Activity

George H. Compton IV replied to George H. Compton IV's discussion A tip all Ning3 networks can benefit from. "fluid YouTube, Slideshare & Vimeo Videos"
"Update 12-22-2014..  I reconfigured Ning's default max embed size for the activity feed."
8 minutes ago
Rob Nanya replied to Rob Nanya's discussion how to change style/color of single module?
"It worked.  Thanks!  I think I'll be able to target other sections.modules."
1 hour ago
John Bizley replied to John Bizley's discussion My New Media Centre Including Music
"Thanks JF, as I mentioned to George more ideas to come for it once tried them out, Also a little mo…"
3 hours ago
John Bizley replied to John Bizley's discussion My New Media Centre Including Music
"Thanks George, still a few more ideas for this so will share when I have tested them out. :-)"
3 hours ago
JFarrow replied to John Bizley's discussion My New Media Centre Including Music
"wow... nice idea for sure John!"
5 hours ago
Joshua replied to Joshua's discussion Is it possible?
"Thanks you so much Kos for your assistance.  As I said to George may your Christmas be special also."
5 hours ago
Kos replied to Joshua's discussion Is it possible?
"oops George is on it.  LOL  Way to go George!"
6 hours ago
Kos replied to Joshua's discussion Is it possible?
"I know JFarrow and TJ worked on this back in 2011.  Maybe try it on your 3.0 and if it doesn't fail…"
6 hours ago
soaringeagle replied to soaringeagle's discussion ning to jamroom just got eassier and more powerful
"u know burger kings old slogan "have it your way'
well i wanted my photo page my way  didnt really…"
6 hours ago
Joshua replied to Joshua's discussion Is it possible?
"Thank you so much George.  This is much appreciated.  May your Christmas be a special one."
6 hours ago
Bernard Lama replied to Rob Nanya's discussion how to change style/color of single module?
"Hi Rob, give this a try 
.grid-frame.sheet.section-blogBundle-6662037-Bundle-105.section-blogBundle…"
6 hours ago
Strumelia replied to Jeffrey Haskins's discussion FYI for those who use monthly billing
"Jeff, I saw that on Ning's FB page.  Did you call that billing support number?-  what was their res…"
8 hours ago
George H. Compton IV replied to Joshua's discussion Is it possible?
"This will help, the code will disable right clicking on your entire network. The code goes in your…"
8 hours ago
Kos replied to Jeffrey Haskins's discussion FYI for those who use monthly billing
"They have, on occasion, screwed up on billing and people have posted here when they did but they ha…"
10 hours ago
Thisisbully replied to Thisisbully's discussion Anyone have their 3.0 site on Play and I tunes yet?
"I meant to say photos"
10 hours ago
George H. Compton IV replied to John Bizley's discussion My New Media Centre Including Music
"Very cool idea. John. :-) Anybody with the media website (music, videos etc) might find this very i…"
11 hours ago
Anant Garg replied to Anant Garg's discussion CometChat Network Edition now available for NING
"Thank you George for your kind words :)"
20 hours ago
Zachary Moonshine replied to Thisisbully's discussion Anyone have their 3.0 site on Play and I tunes yet?
"ning 3 does not allow uploading videos only embeds might be why ? and yes we totally need a mobile…"
21 hours ago
John Bizley replied to John Bizley's discussion My New Media Centre Including Music
"Thanks Zachary
The main page is just a custom page using the wide top and two columns beneath, all…"
yesterday
John Bizley replied to John Bizley's discussion Added My 'Facebook Style' Layout To My Demo Site For Photos
"Thanks Zachary
I will add all the code etc into my demo site once I finish a few tweaks here and th…"
yesterday
More…