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

Scarlett replied to Luke Jones's discussion Just another quick question
"I am much the same Kos, gotta get that caffeine in the system! lol :-)"
2 hours ago
Kos replied to Luke Jones's discussion Just another quick question
"Augh!  Not awake yet. That's what I get for going straight to the computer b4 my caffeine has kicke…"
2 hours ago
Scarlett replied to Luke Jones's discussion Just another quick question
"No problem Kos, just one note though that the code you added would also affect the follow buttons e…"
2 hours ago
Kos replied to Luke Jones's discussion Just another quick question
"oops didn't realize Scarlett was already on it.  Great!"
3 hours ago
Luke Jones replied to Luke Jones's discussion Someone help please ? :)
"No aha, I don't know who created the code :s ahaThanks for replying :) "
3 hours ago
Kos replied to Luke Jones's discussion Someone help please ? :)
"Have you asked (messaged) the person who designed the smiley code?"
3 hours ago
Luke Jones replied to Luke Jones's discussion Just another quick question
"Aha don't worry :) What's your website called ? :) I'll sign up and have a look :)"
4 hours ago
Scarlett replied to Luke Jones's discussion Just another quick question
"oops sorry didn't realise the like button only shows for members."
4 hours ago
Luke Jones replied to Luke Jones's discussion Just another quick question
":) I've just done it now :) I've been trying to change the colour for ages aha, Alright awesome :)…"
4 hours ago
Scarlett replied to Luke Jones's discussion Just another quick question
"No Problem Luke, by the way I just made a photo page public so you can see how the like buttons loo…"
4 hours ago
Luke Jones replied to Luke Jones's discussion Just another quick question
"Ah that's Awesome :) Thanks very much Scarlett :) "
5 hours ago
Scarlett replied to Luke Jones's discussion Just another quick question
"Hi Luke
The likes button is linked to your links setting within the design studio so to get it to h…"
5 hours ago
soaringeagle replied to soaringeagle's discussion ning to jamroom ease of use meets power flexibility and unmatched support with instruction video
"your welcome
it was my pleasure
been wanting to do it for awhile now
but since its easier,..and mor…"
15 hours ago
Strumelia replied to soaringeagle's discussion ning to jamroom ease of use meets power flexibility and unmatched support with instruction video
"Thanks for taking the time and effort SE, it's appreciated."
15 hours ago
JFarrow replied to John "JC" Colyer's discussion Has anyone heard the rumour ning is going out of businesss?
"this is i believe the second place i have read this by you JC.... it would help if you pointed us t…"
15 hours ago
JFarrow replied to John "JC" Colyer's discussion Is ning going out of business in 2015?
"I have seen no direct indication of this, but of course this is how rumors get started"
16 hours ago
Strumelia replied to John "JC" Colyer's discussion Has anyone heard the rumour ning is going out of businesss?
"I suspect it's not so much that there are 'rumors'- more likely it's just that people have been pos…"
20 hours ago
soaringeagle replied to Ken Rich's discussion Ning to Jamroom - An Empowering Migration Path...
"just another way nings screwed us and jr cameto the rescue (too late for me as im live but jr fixed…"
20 hours ago
María José Flores, Michael Nguyen, Michelle Weber and 1 more joined Ning Creators Network
yesterday
Kos replied to John "JC" Colyer's discussion Has anyone heard the rumour ning is going out of businesss?
"No.  There are numerous site owners concerned that Ning has not issued any new releases or updates…"
yesterday
More…