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:

Tags: bar, pagination, search

Views: 798

Attachments:

Reply to This

Replies to This Discussion

Nice and slick! I dig! :) Thanks!

Nice :)

sweet

Hi Hoao,

There is another attachment. Please open that...copy and paste it directly. If it still doesn't work, let me know. 

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. 

Thanks Joao. Glad it worked for you now. 

Thanks guys...

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!

RSS

What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next! - Survey will close Friday, 4/25

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces. Released 4/16.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums. Released 4/9. 

APIs - The ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

Suzie Nielsen replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"Skye, Exactly! I have a widget- called feedget- and I watch them click in in real time... I am just…"
2 hours ago
Suzie Nielsen replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"Tahita, The same!"
2 hours ago
Suzie Nielsen replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"Se I trust you, You can  get my Google Analytics if you like- I think I have your email or I…"
2 hours ago
Kisha Freed replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"This is good insight Kos and Anam.  This will help us build community by keeping the members…"
3 hours ago
Kisha Freed replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"I agree! "
3 hours ago
Kisha Freed replied to Phil McCluskey's discussion 'Introducing Articles and the Author Bio Box'
"I'm excited about the author/bio box! I'll have to check out the articles/pages features…"
3 hours ago
Just Asking replied to David Hogan's discussion 'Lots of Attention but not a lot of engagement'
"I'm not an expert by any means... just another person trudging through the web.  The…"
3 hours ago
Suzie Nielsen replied to Alexander's discussion 'Goodbye for now.'
"I mean your new site... ahhh..."
4 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service