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. 

  • Look how I customized mine Bernard! great tip, now I would like my darn search box to go back to the normal rectangular shape LOL George has done a wonderful job hellping me to clean up my network so hopefully he sees this and acts! I also want the container the blogs are held in to be rectangular shaped opposed to that whats become "default CSS styling for ning networks" lol no offense guys, just trying to stand alone a bit :) but great tip, I implemented this with ease!

This reply was deleted.

Search the Creators Network

Latest Activity

NC for Hire Garfield Creator replied to Ning's discussion Update to Product Roadmap and Communication Changes
"Well stated."
1 hour ago
CocteauBoy replied to Ning's discussion Update to Product Roadmap and Communication Changes
"Your  profile icon is fitting, Diane. You just trolled a thread, then edited your post…"
1 hour ago
Jeff Bean replied to Jeff Bean's discussion News on Ning 3.0 Migration?
"Thanks, Strumelia. I'll follow them on FB in case that's where they decide to communicate…"
3 hours ago
Donna Mac replied to Ning's discussion Update to Product Roadmap and Communication Changes
"I totally cracked up at that word too!  LOL"
3 hours ago
Dominic Lehane replied to Dominic Lehane's discussion Confirmation Email
"Thank you for all your replies. It sadly seems to me that this is a major flaw for not just myself,…"
4 hours ago
TJ @ jQueryHelp replied to Ning's discussion Update to Product Roadmap and Communication Changes
"Hi Skye, Thanks for the love!  I can't speak for anyone else so I won't speculate on…"
4 hours ago
Jamie Baker replied to John Bizley's discussion Ver2 Video Page Using an Articles Page ( updated with the code I used )
"Thanks Diane, that makes three of us :)"
4 hours ago
Strumelia replied to Jeff Bean's discussion News on Ning 3.0 Migration?
"Jeff, this from Ning's FB page from July 17th:"
4 hours ago
Skye replied to Ning's discussion Update to Product Roadmap and Communication Changes
"OH NOOOO"
5 hours ago
Nor Cal Social Media replied to Ning's discussion Update to Product Roadmap and Communication Changes
"Right on. I have it on good advisement that's actually JFarrow."
5 hours ago
Skye replied to Ning's discussion Update to Product Roadmap and Communication Changes
"The Red Jump suit is priceless, just couldn't avert my eyes lol."
5 hours ago
Skye replied to Ning's discussion Update to Product Roadmap and Communication Changes
"The constancy of being negative certainly can get anyone down if applied to someones life yet this…"
6 hours ago
Tyler Durbin replied to Dominic Lehane's discussion Confirmation Email
"I am also having probs with this and Hotmail.  There should be a way for us to edit this info…"
6 hours ago
Nor Cal Social Media replied to Ning's discussion Update to Product Roadmap and Communication Changes
"On that note, "What's up with Ning 3.0?""
6 hours ago
NAOS replied to NAOS's discussion Ning Please help with Dishonest Ning site owner .
"Yes you are correct, and thanks for responding. This individual has been at it a very long time,…"
6 hours ago
Nor Cal Social Media replied to Dominic Lehane's discussion Confirmation Email
"It was on the main page, and I couldn't say "What's up with that"."
6 hours ago
Strumelia replied to Dominic Lehane's discussion Confirmation Email
"Maybe you just saw it in the activity feed.  Or in forums, under 'recent activity',…"
6 hours ago
Nor Cal Social Media replied to Ning's discussion Update to Product Roadmap and Communication Changes
"Glad you liked it. Hat tip to Gina Bianchini for coming up with that during a talk last year."
6 hours ago
Strumelia replied to Ning's discussion Update to Product Roadmap and Communication Changes
"looking like a company that's lost in all the huffery and…"
6 hours ago
Nor Cal Social Media replied to Dominic Lehane's discussion Confirmation Email
"Good question. I meant featured in the sense it came up on the main page forum display, but I see…"
6 hours ago