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

JFarrow replied to Strumelia's discussion Screenshots comparing my OLD and my NEW Network
"impressive work Strumella"
9 minutes ago
Scott Bishop replied to Anas Ghanim's discussion Need A Mobile App For My Network
"I don't understand why anyone would ever want an app when you can have a responsive website. 
No on…"
1 hour ago
Scott Bishop replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Worked like magic! "
2 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 ;)
"Scott, to remove Nings mobile app go to your dashboard and under settings go to the mobile tab then…"
3 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 ;)
"Hello Scott. :-) I've added a code to the stylesheet in this discussion to fix that issue.  Replace…"
3 hours ago
Scott Bishop replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"After cache & cookies are cleared my mobile browser wants to open the Ning mobile version "surfer-s…"
3 hours ago
Scott Bishop replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Hey George, Everything seems to be working great with this. I have one small issue going on with th…"
4 hours ago
George H. Compton IV replied to George H. Compton IV's discussion (tip for 3.0) floating navigation menu & ningbar -- two code formats to choose from HTML or CSS
"Alessandro I really like what you did with your navigation.   "Image tabs" sweet!!!You're welcome I…"
4 hours ago
Dreaming Minds replied to Dreaming Minds's discussion Need tips on selling our Ning network
"Thanks for replying, Kos.
We need admin(s)/moderator(s) who can actively moderate, maintain the mem…"
5 hours ago
Alessandro replied to George H. Compton IV's discussion (tip for 3.0) floating navigation menu & ningbar -- two code formats to choose from HTML or CSS
"Many thanks George! It worked perfectly!
Here's the preview in my network, I'll adjust some positio…"
7 hours ago
George H. Compton IV replied to Strumelia's discussion Screenshots comparing my OLD and my NEW Network
"Blessings to you as well Strumelia..
 Love the video you two sound great playing together. :-)"
7 hours ago
George H. Compton IV replied to George H. Compton IV's discussion (tip for 3.0) floating navigation menu & ningbar -- two code formats to choose from HTML or CSS
"Alessandro, I did write two versions of this for ning 2.0.  This version goes in your design studio…"
9 hours ago
Luke Jones replied to Joe's discussion What Happened to NING?
"Someone needs to buy ning like ASAP!!"
12 hours ago
Joe replied to Joe's discussion What Happened to NING?
"i sent a ticket some weeks ago about my concerns and I remained with no reply
it is not nice that w…"
20 hours ago
Strumelia replied to Strumelia's discussion Screenshots comparing my OLD and my NEW Network
"Thanks... and throwing some sunshine at some of the folks here who have been kind and supportive to…"
23 hours ago
Alessandro replied to George H. Compton IV's discussion (tip for 3.0) floating navigation menu & ningbar -- two code formats to choose from HTML or CSS
"Thanks George, but you don't need to take your time on writing a new code for me. I asked just in c…"
yesterday
Strumelia replied to PeruCool's discussion Alternatives to Ning social network
"Some screenshots of my old and new sites, of interest to those in this thread:
http://creators.ning&hellip;"
yesterday
Strumelia replied to FedMedic's discussion Jamroom Question
"Some screenshots of my old and new sites, of interest to those in this thread:
http://creators.ning&hellip;"
yesterday
Strumelia replied to soaringeagle's discussion ning vs jamroom
"Some screenshots of my old and new sites, of interest to those in this thread:
http://creators.ning&hellip;"
yesterday
Strumelia replied to Paul Asher's discussion Ning3 Member CSV File
"Some screenshots of my old and new sites, of interest to those in this thread:
http://creators.ning&hellip;"
yesterday
More…