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

josep marsal left a comment for FAY GWILLYON ミ◕‿◕彡
""
1 minute ago
Jords replied to Ron's discussion Ning Apps: Classifieds Preview
"Definitely interested in a paid listings option, may utilize it as an alternative to our current on…"
24 minutes ago
Mary Jane Peterson replied to Ron's discussion Free Emoji for Ning Apps Early Access Subscribers
"how do i be a be of  Early Access Program ?"
47 minutes ago
Jen left a comment for Phil McCluskey
"Just dropping by to say hi. Hope you're doing well.
=)"
49 minutes ago
Luke Jones replied to Ron's discussion Free Emoji for Ning Apps Early Access Subscribers
"Awesome :)I've replied to your post on your Ning apps page, Are these available on 3.0 ? :) and How…"
1 hour ago
Luke Jones replied to John Bizley's discussion Does anyone like this idea of having comments on the side of photos rather than below ? ( Code now added )
"This is an awesome Idea John :)  One question, None of the codes seem to be working on my website…"
3 hours ago
Luke Jones replied to Ron's discussion Ning Apps: Photo Tagging Feature (WIP)
":) Aha Awesome, that soon? :) Ye what I mean, is so its just like facebook, you can tag somebody in…"
5 hours ago
Ron replied to Yolanda van Heese's discussion Attachment in messages?
"Sure thing. Yes I think this is one thing that needs to be considered and added to messaging.
Good…"
8 hours ago
Ron replied to Ron's discussion Ning Apps: Classifieds Preview
"Thanks Fire-Tech! I will try to post regular updates as much as I can. :-)"
8 hours ago
Ron replied to Ron's discussion Ning Apps: Classifieds Preview
"Hey Jords! :D Thanks. "
8 hours ago
Ron replied to Ron's discussion Ning Apps: Classifieds Preview
"That's good to know Tim. I also know a few NCs who have the same situation as yours in regard to me…"
9 hours ago
Cory Meyers replied to Cory Meyers's discussion CAS Authentication to secure NING network?
"Thanks!"
17 hours ago
Kos replied to Cory Meyers's discussion CAS Authentication to secure NING network?
"They will not answer here.  You will have to file a ticket.  Best of luck."
17 hours ago
John Bizley replied to John Bizley's discussion Does anyone know how to do this: target items featured in the normal list not featured list
"Imagine you have photo which is featured this will show in the featured list page. So if iwanted to…"
18 hours ago
SweetPotato replied to John Bizley's discussion Does anyone know how to do this: target items featured in the normal list not featured list
"Not sure I understand. Can you elaborate?
SP"
19 hours ago
Fire-Tech replied to Ron's discussion Ning Apps: Classifieds Preview
"Nice. Look forward to checking it out when you finish it ;)"
19 hours ago
John Bizley replied to Yolanda van Heese's discussion Black gradient filter
"Your most welcome :-)"
20 hours ago
Yolanda van Heese replied to Yolanda van Heese's discussion Black gradient filter
"It does help John, thanks! "
20 hours ago
John Bizley replied to Yolanda van Heese's discussion Black gradient filter
"Hi Yolanda
You can remove it or change it's colour, this overlay is also present in members cover g…"
20 hours ago
John Bizley replied to John Bizley's discussion How to move your 'More Entries' photo strip up alongside the photo viewer
"Well decided on the more entries strip up along side of the photo in the main viewer, made a few al…"
20 hours ago
More…