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

Ning via Facebook

Back to School Community Reading http://ow.ly/zbQJh

Back to…

Ning via Facebook

Awesome Questions to Ask New Members of your Online Community http://ow.ly/zbQzA

Ning via Facebook

How to Optimize Your Social Media Strategy to Gain More Followers http://ow.ly/zbQio

Ning via Facebook

Creating a Sense of Belonging in Your Online Community http://ow.ly/zbMfs

Ning via Facebook

Activity Feed 3.0 Updates Has Officially Been Released! Check out the official announcement on…

Ning via Facebook

Designing The Perfect Newcomer To Regular Journey Part 2 http://ow.ly/zbM4Q

Ning via Facebook

Designing The Perfect Newcomer To Regular Journey Part 1 http://ow.ly/zbLXh

Ning via Facebook

Are Comments Bad for Science? http://ow.ly/zbLKV

Are Comments…

Ning via Facebook

The Purpose of Community Platforms http://ow.ly/2KgJJf

The…

Ning via Facebook

Prevent Summer Community Blues http://ow.ly/zbLpp

Ideas to…

Ning via Facebook

Before You Spend $500K On A Community Platform... http://ow.ly/2JQDWi

Ning via Facebook

Power and Influence http://ow.ly/2JsEKn

Power and…

Ning via Facebook

8 Overlooked Elements Every Online Community Should Have http://ow.ly/2IUtId

Ning via Facebook

A Simple Online Community Reputation System http://ow.ly/ycrvl

Ning via Facebook

A Basic Online Community Wireframe http://ow.ly/2I1BxS

A…

Ning via Facebook

Essential Elements Of Community Platforms http://ow.ly/2HuOIy

Ning via Facebook

Moderation Strategy http://ow.ly/2Hidmv

Moderation…

Ning via Facebook

20 Things That Should Be Included In Your Online Community Website http://ow.ly/2Hc6E8

Ning via Facebook

How To Subtly Influence Your Online Community http://ow.ly/2H4zfE

Ning via Facebook

4 Types Of Contributions You Want Your Members To Make Into Your Community…

More…