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

Rowald replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"It really looks like it. But for me it looks like this for over 2 years. When other members here sa…"
22 minutes ago
Rowald replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"Took a look at http://www.t20.com/ and it looks dead to me. No visitors anymore.."
23 minutes ago
Denis replied to George H. Compton IV's discussion (TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"The whole big deal with Ning 3 was responsive responsive responsive responsive responsive when it c…"
1 hour ago
Tim Atkinson replied to Tim Atkinson's discussion My letter to Jason Rosenthal
"Hi, Jen,

Well spotted. how annoying. I think I've now found our man, though - Bernard Desarnauts,…"
1 hour ago
SweetPotato replied to Allison Leahy's discussion What are you most excited about?
"Making a website responsive is not difficult, that part of the offering was always oversold to my m…"
2 hours ago
Jen replied to Tim Atkinson's discussion My letter to Jason Rosenthal
"Hi Tim,
Thank you for sharing your letter with us. Hopefully it will be routed to the appropriate a…"
4 hours ago
Strumelia replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"Is Glam/Mode/Ning letting Ning just fall off a cliff?
http://www.alexa.com/siteinfo/creators.ning.c&hellip;"
9 hours ago
Donna Mac replied to Tim Atkinson's discussion My letter to Jason Rosenthal
"NICE JOB"
9 hours ago
Strumelia replied to Tim Atkinson's discussion My letter to Jason Rosenthal
"Well done Tim."
9 hours ago
Tim Atkinson replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"I've written to the boss - I suggest you do too....

http://creators.ning.com/forum/topics/my-lette&hellip;"
9 hours ago
Strumelia replied to Allison Leahy's discussion What are you most excited about?
"'Very shortly'...?     2.0 was supposedly going to be discontinued in Summer 2013 when 3.0 was fini…"
9 hours ago
steve replied to Allison Leahy's discussion What are you most excited about?
"its brilliant work, but whats the point when N2 is going to be discontinued very shortly and you wi…"
9 hours ago
steve replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"I think its becoming very obvious that they dont want our kind here anymore.. They want people like…"
9 hours ago
Tim Atkinson replied to Tim Atkinson's discussion My letter to Jason Rosenthal
"Sorry if you saw an early version of this - I forgot how lousy an iPad is for a long rant....."
11 hours ago
Chazz replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"That is a question that I think we are all asking."
17 hours ago
Pat Howlett replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"Does anyone know where the light switch is?"
18 hours ago
JFarrow replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"ironic or moronic?  probably a dash of both"
18 hours ago
Jens replied to John McDonald's discussion INTRODUCING NING 3.0: THE RE-IMAGINING OF OUR PRODUCT
"Really ironically!"
18 hours ago
Strumelia replied to Allison Leahy's discussion Changes to Ning 3.0 Based on Your Feedback
"Steve, this is also an enlightening discussion, from a year ago as well:
http://creators.ning.com/a&hellip;"
yesterday
Strumelia replied to Allison Leahy's discussion Changes to Ning 3.0 Based on Your Feedback
"Steve, if you read this discussion from start to finish:
http://creators.ning.com/announcements-fro&hellip;"
yesterday
More…