Hi NCs,

This tip explains how to design a youtube like pagination for video page, photo page etc. or more in general to split a long list of contents in more pages. I hope it's a perfect pagination style. 

Instruction: Just copy and paste the code into Advanced CSS box.

The Code

.pagination li{
text-shadow: 0 1px 0 #fff;
background-color: #e0e0e0;
-moz-box-shadow: inset 0 0 1px #fff;
-ms-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px #fff;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffafafa,EndColorStr=#ffdcdcdc);
background-image: -moz-linear-gradient(top,#fafafa 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#fafafa 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#fafafa 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fafafa),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#fafafa 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#fafafa 0,#dcdcdc 100%);
}
.pagination li a {
border-color: #ccc #ccc #aaa!important;
color: #333333;
}
.pagination li span {
border: solid 1px;
padding: 5px 10px;
color: #333333;
border-color: #888 #aaa #ccc;
-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 #fff;
box-shadow: inset 0 1px 5px rgba(0,0,0,0.25),0 1px 0 #fff;
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%);
}

Want to give a different look to your ning site?  Mail me at bernardmax2@gmail.com 

Live Example: Here

Example:

Tags: Cool, Tip:, Youtube, like, pagination

Views: 2189

Reply to This

Replies to This Discussion

definitely a cool tip bernard! nice one

Thanks Ron for liking it.

Very cool tip, Bernard! What's funny is that now that I've added this, I don't remember what was there before. LOL

Thanks!

LOL Thanks Patrick.


Before

Oh! Yeah, yours is much better! LOL

Very nice, cheers for sharing

Cheers SP

esta bien chevere! 

Great tip, Bernard. Thank you so much for sharing!

You are welcome Tuan.

Very nice

Thanks

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

Kos replied to Enrrico Torres's discussion 'how to reduce the http request'
"Agreed."
1 hour ago
George H. Compton IV replied to Enrrico Torres's discussion 'Please help to create a slider'
"Replace just the CSS stylesheet with this one. I think I have it all worked out for…"
2 hours ago
Elshara Silverheart replied to Shruti Shah's discussion 'Sign up problem'
"I seen that somewhere two on another site, not sure what it means."
2 hours ago
Fondazione ISTUD is now a member of Creators
2 hours ago
Elshara Silverheart replied to György Juhász's discussion 'Language editor issues'
"Hey, good idea! I know in Ning 2.0 the most recent translations were on the last pages of the site…"
2 hours ago
Elshara Silverheart replied to György Juhász's discussion 'Language editor issues'
"I've never heard of that happening before. Essentially you're having problems translating…"
2 hours ago
Elshara Silverheart replied to György Juhász's discussion 'Language editor issues'
"Sometimes I can't get formatting to work right when editing certain boxes."
3 hours ago
Elshara Silverheart replied to francesco pillinini's discussion '3rd Party Integration > Facebook'
"It's under general app settings on your facebook app its a checkbox you need to uncheck it if…"
3 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service