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: 2192

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

Luke Jones replied to Luke Jones's discussion 'Help'
"Ye I am :) I've tried all the options on google webmaster tools to let me verify my site,…"
47 minutes ago
Saurabh replied to Saurabh's discussion 'Title of a group home is not having group name'
"HI Crystal - Just wanted to know - has improved request filed for same.. There has been couple of…"
1 hour ago

NC for Hire
Bernard Lama replied to Luke Jones's discussion 'Help'
"Are you talking about google webmaster tool that you are able to verify your site? "
2 hours ago

NC for Hire
Bernard Lama replied to Jeffrey Haskins's discussion 'Need a Link for page addition on manage pages'
"Yeah why not ...you can add a link next to any links on group pages. Just go to Group Options>…"
2 hours ago
Phillip Brunelle replied to Crystal Coleman's discussion 'Ning 3.0 Progress Update for March and Let's Hear Your Thoughts'
"I'm hoping a video section is included in Ning 3.0 because my network is taking a loss of…"
2 hours ago

NC for Hire
Bernard Lama replied to Dutchlabel's discussion 'Align images horizontally'
"Hi there, Did you try this ever?"
2 hours ago
Troy Marquis replied to Troy Marquis's discussion 'Ning Activity feeds Going CooCoo's'
"its not its the profile pic of the uploader showing instead of the pic"
5 hours ago

NC for Hire
JFarrow replied to Troy Marquis's discussion 'Ning Activity feeds Going CooCoo's'
"this looks more like milicious member...or spam activity by a member uploading the same photos over…"
5 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service