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. 

This reply was deleted.

Search the Creators Network

Latest Activity

Elson Tan replied to Elson Tan's discussion Code Editor for Custom Code
"hey guys, glad to see you too."
4 hours ago
Livita Jesus Silva left a comment for Livita Jesus Silva
"Thanks George
correto.
Very good
A good sunday
Livita"
8 hours ago
George H. Compton IV left a comment for Livita Jesus Silva
"Okay thanks for the link, this code will work :-)  see image below.
.subTab-item > a{   background:…"
8 hours ago
Jelena replied to Elson Tan's discussion Code Editor for Custom Code
"Glad to see you Elson and awesome Google chrome plugin. Thanks."
9 hours ago
Livita Jesus Silva left a comment for Livita Jesus Silva
"I'll tryThe good night
thanks"
9 hours ago
Livita Jesus Silva left a comment for Livita Jesus Silva
10 hours ago
Livita Jesus Silva left a comment for Livita Jesus Silva
10 hours ago
George H. Compton IV left a comment for Livita Jesus Silva
"Hello Livita :)  In the image it appears that it's the active tab that you want colored. This code…"
10 hours ago
Mary Jane Peterson replied to Mary Jane Peterson's discussion getting 500: Unexpected Error site down
"thank you"
11 hours ago
Livita Jesus Silva left a comment for George H. Compton IV
"Hello George, I need help.You know the code for imaging or color in the sub tabs?Looks like he is.…"
11 hours ago
Livita Jesus Silva left a comment for George H. Compton IV
".navbar {
background: #bd834d
url() top center repeat-x scroll !important;
border-top:3x groove #34…"
11 hours ago
Livita Jesus Silva left a comment for George H. Compton IV
"Hello George, I need help.You know the code for imaging or color in the sub tabs?Looks like he is.…"
11 hours ago
JFarrow replied to Elson Tan's discussion Code Editor for Custom Code
"Good to see you Elson!"
13 hours ago
Garfield Creator replied to Elson Tan's discussion Code Editor for Custom Code
"That's very nice of you. Thanks!"
14 hours ago
Mary Jane Peterson replied to Mary Jane Peterson's discussion How do I add chat to my 2.0 mobile part of the site
"hi  Kos 

thank you"
15 hours ago
Kos replied to Elson Tan's discussion Code Editor for Custom Code
"Glad to see you're still around Elson"
15 hours ago
Kos replied to Mary Jane Peterson's discussion How do I add chat to my 2.0 mobile part of the site
"Make chat a tab on your menu in tabs & pages.  The existing URL is /chat and then it will display v…"
16 hours ago
Kos replied to Mary Jane Peterson's discussion getting 500: Unexpected Error site down
"Mine are all up.  If you're still receiving this, you can file a ticket online here http://ec2-75-1…"
16 hours ago
Strumelia replied to Mary Jane Peterson's discussion getting 500: Unexpected Error site down
"You need to file a help ticket to Ning for this.  Other creators here cannot help on this issue, an…"
16 hours ago
SweetPotato replied to Mary Jane Peterson's discussion powered by ning on the 2.0
"They removed this on 2.0 sites if you signed up after a certain date."
21 hours ago
More…