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

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 Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Rhonda liked ⚡JFarrow⌁'s discussion Ning Creators Sound Off: Share Your Network
Mar 27
⚡JFarrow⌁ updated their profile photo
Mar 24
Markus Miner and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
Markus Miner replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"Man I'd love the help I was about just start a new network"
Mar 19
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"I can fix that... ill send you my contact info. no problem"
Mar 18
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"I can fix that... ill send you my contact info. no problem"
Mar 18
Markus Miner replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"Changed my design and now my logo overlap my new background header with no option to remove it.…"
Mar 15
Markus Miner replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"Because Ning is a terribly ran business with lack of upgrades and becoming obsolete "
Mar 15
Paul Corona replied to Anastasia_Ning_Support's discussion
Migration FAQ
"It might be transferred, but finding it and setting it up in a usable format is virtually…"
Mar 14
How to Speak to Travelocity Customer Service updated their profile
Feb 26
⚡JFarrow⌁ posted a discussion
Its been a few years since we have collaborated on a Community Share Post.   I would like to know…
Feb 24
Anderson updated their profile
Feb 20
More…

Meanwhile, you can check our social media channels