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

Alexander is now a member of Ning Creators Network
3 hours ago
Luke Jones replied to Aubrey Williams's discussion Ning vs. SocialGo - Please Comment
"Same here to be honest, I've asked them for a notification icon and things like that for months and…"
3 hours ago
JFarrow replied to Gerry Regan's discussion My Page Tab Has Vanished from Nav Bar
"showing fine for me on my end and when you hover over My Page invite is under... not for you?  whic…"
8 hours ago
George H. Compton IV replied to George H. Compton IV's discussion ( TIP N3 & N2 ) Chatwing chatbox, private and fixed on all pages v4.5
"Thank you, and yes it is :)  I just updated it to version 4.5. The update was for the icons and cel…"
9 hours ago
Peter Dreyer, russ, Lance Jackson and 3 more joined Ning Creators Network
12 hours ago
Ceddy J replied to John Bizley's discussion My New Splash Screen Utilizing the Ning bar links
"I created a splash page with Dreamweaver. My only question is how do you best link it with the site…"
20 hours ago
Kerrie replied to Kerrie's discussion Help I can’t access my network or blogs
"Now I can’t use the inbox and I can’t comment or add to my text boxes,I haven’t had any members joi…"
yesterday
Zachary Moonshine replied to George H. Compton IV's discussion ( TIP N3 & N2 ) Chatwing chatbox, private and fixed on all pages v4.5
"thats awesome man NING 3.0 is pretty bad ass once you add some customization like this!"
yesterday
Zachary Moonshine replied to Jason Divozzo's discussion Tagging members
"It would also be realy really cool to have a button everywhere we go on the net that would enable u…"
yesterday
Kos replied to Thisisbully's discussion This Is 50 Words To Ning
"smh"
yesterday
Fire-Tech replied to Thisisbully's discussion This Is 50 Words To Ning
"Wow! Mine are up, but I am getting friend requests from myself. And after all these years, I though…"
yesterday
Fire-Tech replied to Jason Divozzo's discussion Tagging members
"+1"
yesterday
Thiago Santos de Moraes replied to Andrzej Góralczyk's discussion 500 Unexpected Error for some hours
"All is well now in my community. Thanks Ning for the efficient assistance!"
yesterday
Violeta replied to Ángeles Saura's discussion ¿Es obligatorio evolucionar al formato ning 3.0? in Ning Networks en español
"Hola! Nosotras tampoco teniamos previsto migrar por las mismas cuestiones que comentas aqui Ángeles…"
yesterday
Strumelia replied to Jeffrey Haskins's discussion Jamroom?
"Well I'm not going to keep debating with you about it forever Jeffrey, but I think you are characte…"
yesterday
lorianne replied to Andrzej Góralczyk's discussion 500 Unexpected Error for some hours
"Oursalon.ning.com has the same issue."
yesterday
Jeffrey Haskins replied to Jeffrey Haskins's discussion Jamroom?
"Actually have had no help at all...only pointing me away to other sources for help.  Yes, this is o…"
yesterday
Gina Garcia replied to Andrzej Góralczyk's discussion 500 Unexpected Error for some hours
"My Ning network LaMesaToday.com is still down."
yesterday
George H. Compton IV replied to George H. Compton IV's discussion ( TIP N3 & N2 ) Chatwing chatbox, private and fixed on all pages v4.5
"Zachary if it wasn't for you asking me to do this. The members here on creators would not have a pr…"
yesterday
Jords replied to Thisisbully's discussion This Is 50 Words To Ning
"Same here, this is downright irritating."
yesterday
More…