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

Strumelia replied to Asil's discussion Photo Slideshows Fail in NING 2.0
"Asil, FWIW I am now seeing the embedded slideshow in your original post here."
50 minutes ago
Lea Scott replied to solo's discussion Chat room or chat rooms for your network....2.0 and 3.0 ning networks
"Hey solo, I have looked at this and it has created one automatically for me but I don't know how th…"
1 hour ago
Lea Scott replied to Rafael's discussion Multiple Chat rooms for Ning 3.0
"Agreed! That would be awesome and make a huge difference to traffic to the site!"
1 hour ago
Thisisbully replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
1 hour ago
Thisisbully replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"nope "
1 hour ago
Fire-Tech replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"Thanks Thiago :)"
2 hours ago
marshall blake replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"There is not any notification when people comment on status updates in the activity feed?"
3 hours ago
Edie2k2 replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"Tight! Very very nice!!! I can't get mine to show ThisIsBully. your link is misspelled but I found…"
3 hours ago
Fire-Tech replied to John Bizley's discussion A few tweaks I made to my activity feed
"Looks great John! Thanks for sharing :)"
3 hours ago
Fire-Tech replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"Looks great John! I threw mine together pretty quick before going to bed, but I'm glad you did the…"
3 hours ago
ceri shaw replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"I was told something similar when I called earlier on BUT it appears to be still live and still com…"
3 hours ago
Fire-Tech replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"Thanks J ;)"
3 hours ago
Fire-Tech replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"Looks good SE! I like the insets better on darker networks too. Have to do the same on my FTS site…"
3 hours ago
Fire-Tech replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"Glad you like it :)"
3 hours ago
John Bizley replied to John Bizley's discussion A few tweaks I made to my activity feed
"Thanks Chris :-)"
3 hours ago
Chris Richards replied to John Bizley's discussion A few tweaks I made to my activity feed
"excellent.. very nice John!"
4 hours ago
John Bizley replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"Here's mine FT
.status-container{ background-color: lightgray;background-image: linear-gradient(sl…"
4 hours ago
JFarrow replied to Fire-Tech's discussion 3.0 Tip: Status Update Box Tweaks
"nice one FT!"
4 hours ago
Asil replied to Asil's discussion Photo Slideshows Fail in NING 2.0
"[Here is the reply I received from NING Support.]
Joanna (Ning Help Center)
Jul 30 01:15 PM
After t…"
5 hours ago
Thisisbully replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"everything on my feeds work fine twitter feeds rss from other sites and its very resonsive it shows…"
5 hours ago
More…