Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

NC for Hire

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:

You need to be a member of Ning Creators Network to add comments!

Join Ning Creators Network

Email me when people reply –

Replies

This reply was deleted.

Search the Creators Network

Latest Activity

Janos Cseri commented on Crystal's blog post How to Monetize Your Online Community [Video]
"Nice to be back and looking at my old, old stuff here. Great Video, I like how you present things o…"
19 minutes ago
Janos Cseri is now a member of Creators Suggestions for Ning
31 minutes ago
Janos Cseri is now a member of Hire a Creator
33 minutes ago
Paul Corona replied to Seth Regan's discussion Network down... AGAIN?!?!?!??!
"and chat has been down all day again......."
1 hour ago
Janos Cseri is now a member of Russian group of ning creators
1 hour ago
TJ @ jQueryHelp replied to ⚡JFarrow⌁'s discussion Meta-tags To Use For Optimized Facebook Sharing
"Interesting and helpful!  Thanks JFarrow!"
3 hours ago
Kos replied to Meshelemiah's discussion Need some help
"*lol*  You should be good to go now."
8 hours ago
Meshelemiah replied to Meshelemiah's discussion Need some help
"never mind!! disregard! found it!! THANKS!!!"
8 hours ago
Meshelemiah replied to Meshelemiah's discussion Need some help
" Just went back and double checked myself and that box is checked.....any ideas?"
8 hours ago
Kos replied to Meshelemiah's discussion Need some help
"You just missed this box.  Then you'll have to review them before you approve them."
9 hours ago
George H. Compton IV replied to George H. Compton IV's discussion (Ning 2 & 3) welcome / sign-in and sign-up pop-up module. Updated May 1, 2016
"Thank you John. :-) I just updated all the codes in my plug-in today. Here's the new link. :-)
htt…"
yesterday
George H. Compton IV replied to George H. Compton IV's discussion (Ning 2 & 3) welcome / sign-in and sign-up pop-up module. Updated May 1, 2016
"You're welcome Dave, Thank you for the compliment :-)"
yesterday
Ceddy J replied to ⚡JFarrow⌁'s discussion Meta-tags To Use For Optimized Facebook Sharing
"Do you have a way we can implement this on 3.0?"
yesterday
John Bizley replied to George H. Compton IV's discussion (Ning 2 & 3) welcome / sign-in and sign-up pop-up module. Updated May 1, 2016
"Very Nice update George :-)"
yesterday
Scott Bishop replied to Scott Bishop's discussion Make Any Page Into an RSS Page
"I found another service at fetchrss.com. It will pull in videos with image thumbnails great but not…"
yesterday
Scott Bishop replied to Scott Bishop's discussion Make Any Page Into an RSS Page
"Thanks for the reply SweetPotato. I got it to run no problem but how do you get the rss link for it…"
yesterday
SweetPotato replied to Scott Bishop's discussion Make Any Page Into an RSS Page
yesterday
dave replied to George H. Compton IV's discussion (Ning 2 & 3) welcome / sign-in and sign-up pop-up module. Updated May 1, 2016
"Awesome work George :-) Great update thank you for sharing."
Tuesday
George H. Compton IV replied to George H. Compton IV's discussion Ning coding and styling Tool "GeocPlugin" v2.00.005
"Update May 2, 2016
NEW Feature, Run a script every 15, 30, 45 or 60 seconds. Target just online mem…"
Monday
steve davies replied to Traddie's discussion Can't Sign in or out of my Network, or add blogs
"Are many of you pasting from MS Word into Ning?
Had an issue with some work I did years ago. Turned…"
Monday
More…