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

Petter Næss, Daniella Breen, Jonathan Stegman and 4 more joined Ning Creators Network
8 hours ago
John Bizley replied to John Bizley's discussion Brand New Facebook Style Photo's page. CODE NOW AVAILABLE
"Thanks George, yes that was a copy error as in the original it only had the one function but the up…"
9 hours ago
George H. Compton IV replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"You're welcome and thank you for the compliment. It makes me happy knowing you like the end results…"
9 hours ago
Strumelia replied to Mary Jane Peterson's discussion getting 500: Unexpected Error site down
"I'm getting a lot of these errors on my Ning 2.0 site today.  Anyone else?
I've filed a new support…"
10 hours ago
Steve C replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"George,
Thank you for all your help with getting my responsive design set up. It was above and beyo…"
10 hours ago
Bernadette Arthur replied to Bernard Lama's discussion Killer Tip : How to add seach bar to your ning 3.0 network ?
"Www.Cfaolc.ning.com

Thanks for taking the time to look at it Bernard."
10 hours ago
George H. Compton IV replied to George H. Compton IV's discussion TIP Ning3 & Ning2 - Sub-tab down arrow for your navigation
"Updated 5-26-15 I added an extra snippet of Java so the star will not display."
11 hours ago
George H. Compton IV replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"You're welcome :-)"
11 hours ago
Bernard Lama replied to Bernard Lama's discussion Killer Tip : How to add seach bar to your ning 3.0 network ?
"Hi there, 
the code is ok. Can you show me your site so I can take a look and solve the problem?"
11 hours ago
George H. Compton IV replied to John Bizley's discussion Brand New Facebook Style Photo's page. CODE NOW AVAILABLE
"John, the Java in your "IMPORTANT :UPDATES TO THE PHOTOS PAGE CODE" is a little messed up. I'm sure…"
11 hours ago
JFarrow replied to Traddie's discussion Advise On The Best Way To Achieve This
"I would use Google Drive as you can then have direct access to everyone who can see it.  I'd create…"
yesterday
Lorenzo M. Oliver replied to Lorenzo M. Oliver's discussion Problemas con la visualización de las imágenes in Ning Networks en español
"Gracias a tí, por tu interés y gratitud al mencionarlo!"
yesterday
Lorenzo M. Oliver replied to Leyda Ramirez's discussion Directorio de redes ning? in Ning Networks en español
"Hola Leyda,
Hasta hace poco estaba funcionando un buscador de redes sociales Ning, Ningogle, con má…"
yesterday
Mary Jane Peterson replied to Mary Jane Peterson's discussion Fatal error: please help
"Hi John Bizley 

thank you so much :D"
Sunday
Luke Jones replied to Luke Jones's discussion Comet chat are genuinely awesome
"Yep :) , it is aha :) O don't forget comet chat are having the apps in 3 weeks time so you can have…"
Sunday
Kwan Yin replied to Luke Jones's discussion Comet chat are genuinely awesome
"Yes, I'm planning to get the highest package as well, video & audio chat in HD sounds fantastic!
My…"
Sunday
Leyda Ramirez replied to Lorenzo M. Oliver's discussion Problemas con la visualización de las imágenes in Ning Networks en español
"Gracias! Me funcionó perfecto"
Sunday
Luke Jones replied to Luke Jones's discussion Comet chat are genuinely awesome
":) awesome :) ah right :) Aha :) , Your absolutely right, comet chat are Fantastic :) I'm going be…"
Sunday
Kwan Yin replied to Luke Jones's discussion Comet chat are genuinely awesome
"Thanks for the tip! I'm currently doing a revamp of my Ning 3.0 site and I'm going to add CometChat…"
Sunday
John Bizley replied to John Bizley's discussion Brand New Facebook Style Photo's page. CODE NOW AVAILABLE
"Thanks George and your most welcome for the codes. I agree it probably could be compiled better, I…"
Sunday
More…