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

Omid Sadeghpour, Sue Valdeck, LCBSocial and 2 more joined Ning Creators Network
3 hours ago
Lora replied to Lora's discussion 3.0 Photo Galleries
"I have four galleries and use the 50 category set up, wish there was more.
Big issue for us is when…"
3 hours ago
Lora replied to Lora's discussion 3.0 Photo Galleries
"YES........... this is my issue!!!! We use our site to sell. When members have to delete multiple p…"
3 hours ago
Lora replied to Lora's discussion 3.0 Photo Galleries
"huh???? lol .... say that in english............... lmao."
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, dumb question probably: What and where is the "ad-box above the header"?"
3 hours ago
JFarrow replied to Lora's discussion 3.0 Photo Galleries
"that could be profitable.."
4 hours ago
Jen replied to Jeffrey Haskins's discussion Geez....
"Jeffrey, If you are referring to "Posted By", not sure, unless somehow you have some CSS that is hi…"
4 hours ago
Alyce Keegan replied to Lora's discussion 3.0 Photo Galleries
"LOL! atleast I didn't say ghost busters or then you'd have to be worried ;)"
5 hours ago
JFarrow replied to Lora's discussion 3.0 Photo Galleries
"you have a group for gang busters??  sweet.... be careful with that..."
6 hours ago
TJ @ jQueryHelp replied to Jamie Baker (Vision)'s discussion Time to say goodbye
"Sorry to see you go!  I do understand your decision and wish you all the best!"
6 hours ago
JFarrow replied to Lora's discussion 3.0 Photo Galleries
"the only limit is imaginary capacity...nice work...keep it growin'!"
6 hours ago
JFarrow replied to Lora's discussion 3.0 Photo Galleries
"here is a fork of a nice responsive photoset style which could be adapted to work in articles and b…"
6 hours ago
Alyce Keegan replied to Lora's discussion 3.0 Photo Galleries
"hopefully there's no limit LOL! One of my groups is going gang busters with over 2000 photos... con…"
7 hours ago
Edie2k2 replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"Right on. I don't care 'how' many pro 3'rs pretend that the Emperor dons new clothes... dude is nak…"
7 hours ago
steve replied to Lora's discussion 3.0 Photo Galleries
"I have about 30 groups now i think, and each group has its own gallery. So far at least there seems…"
7 hours ago
Edie2k2 replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"So much delusion in relation to 3.0. It's quite hilarious. Anyway, long live 2.0 and may 3.0 find a…"
7 hours ago
steve replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"yeah its all to do with how people use the net now. its all mobile devices mostly. Im seen as a din…"
7 hours ago
Writer Chick {Diane} replied to Lora's discussion 3.0 Photo Galleries
"I have about 15 photo galleries on my site, and I'm not finished adding them.  We're a graphics-ric…"
8 hours ago
Writer Chick {Diane} replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"2.0 is a clunky dinosaur. I really want the versatility and organizational features that 3.0 has, b…"
8 hours ago
Kos replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"As the internet evolves and responsive websites become the norm, it's just not feasible from a busi…"
8 hours ago
More…