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

TJ @ jQueryHelp replied to J.Ayvar's discussion Our Ning Account has been hacked.
"Hello! This is TJ, long time developer of custom code for Ning sites.  I have been working on J.Ayv…"
12 hours ago
Ambroise replied to The Ning Team's discussion Acquisition Update
yesterday
Ambroise replied to The Ning Team's discussion Network Accessibility Update II
"The Ning2's WYSIWYG Editor work on Mobile phones. One can actually format a comment. It is not very…"
yesterday
Rob Neufeld replied to Rob Neufeld's discussion In business for a decade, still down after 7 weeks
"Kyryl, if you stepped in and saved me, thanks very much!  Thanks for your help, too, Kos.  The insi…"
yesterday
Christopher M Florentino replied to Klaus's discussion Scroll to the top
"Hey George. Thanks again for creating such a wonderful 'Scroll  Up & Down' also adding a speedy add…"
yesterday
Anna Ning Support replied to mark gardner's discussion My network is in maintenance? Message error
"Mark, it takes some time for the request to be proceeded. We appreciate your patience in this matte…"
Thursday
George H. Compton IV replied to Klaus's discussion Scroll to the top
"You're welcome. :-)I'll send you a message probably tomorrow.I've added another button for a faster…"
Thursday
Kos replied to ⚡JFarrow⌁'s discussion 110+ Useful Ning Tips and Tricks for 2.0 and 3.0
"Just amazing.  What more can be said.  Thank you!"
Thursday
Kos replied to ⚡JFarrow⌁'s discussion You May Not Know This About Facebook
"How awesome is this.  Thank you JF!!!!"
Thursday
Kos replied to Rob Neufeld's discussion In business for a decade, still down after 7 weeks
"Rob Whew!  I'm soooo glad for you!  Thank you Kyryk for coming to the rescue.  It's tough running w…"
Wednesday
Christopher M Florentino replied to Klaus's discussion Scroll to the top
"Hey George. Your Code Worked Like A Champ! I am very fortunate to have found you. I would like to o…"
Wednesday
Rob Neufeld replied to Rob Neufeld's discussion In business for a decade, still down after 7 weeks
"Yes, I discovered, after checking every day, that my network went up Dec. 2. That's great news!  Af…"
Wednesday
George H. Compton IV replied to Klaus's discussion Scroll to the top
":-) Okay Christopher here's your up and down scroll controls. See image below :-)
Ning 3.0 the code…"
Wednesday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion You May Not Know This About Facebook
"great... glad you found it useful.."
Wednesday
Brian Antezana replied to ⚡JFarrow⌁'s discussion You May Not Know This About Facebook
"Great tip!"
Wednesday
George H. Compton IV replied to Klaus's discussion Scroll to the top
"You're welcome Christopher and Kos. :-)Christopher I'll see what I can do about the scroll down but…"
Wednesday
J.Ayvar replied to J.Ayvar's discussion Our Ning Account has been hacked.
"Thank You! It does a matter the time It will take. We want to thanks that at least Ning Support rep…"
Wednesday
Christopher M Florentino replied to Klaus's discussion Scroll to the top
"Awesome. It worked. You guys (girls) are good. I really appreciate your efforts and also making it…"
Tuesday
Kos replied to Klaus's discussion Scroll to the top
"Sorry I can't help you further.  I'm a novice myself.  Good luck"
Tuesday
Kos replied to Klaus's discussion Scroll to the top
"Where it says 'right: 75px;' just change that to
left: 50px;"
Tuesday
More…