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

Luke Jones replied to George H. Compton IV's discussion Tip any network.. Graphical loader interface. Hide your ugly bounce rate.
"Aha no problem :p its true lol, their going too slow mun , aha :) ,o random question but are you re…"
1 hour ago
marshall blake replied to marshall blake's discussion Events For 3.0 Networks
"Interesting I will look into this more."
1 hour ago
Thiago Santos de Moraes left a comment for ANGE.L LUAR
"Qual chat você colocou?"
1 hour ago
ANGE.L LUAR left a comment for Thiago Santos de Moraes
"Vim te agradecer pus chat que vc me indicou..."
1 hour ago
Robin B replied to marshall blake's discussion Events For 3.0 Networks
"If you don't want your page title to be "Articles" instead of Events, and if you want a more elegan…"
2 hours ago
Crystal Walters replied to Ning's discussion How do I use my own domain so the Ning doesn't show in the url?
"My domain is registered with hostgator. Could really use some help with them."
2 hours ago
Gildas G, Crystal Walters, Eric Swoyer and 2 more joined Ning Creators Network
2 hours ago
George H. Compton IV replied to George H. Compton IV's discussion ( TIP "N3.0, N2.0 ) Add Google translate to all pages. Update 2/25/15 v9
"You're welcome Eve, you have a great day. :-)"
2 hours ago
George H. Compton IV replied to George H. Compton IV's discussion Tip any network.. Graphical loader interface. Hide your ugly bounce rate.
"lol Thank you Luke, I definitely needed to laugh today. :-) lol"
2 hours ago
George H. Compton IV replied to Luke Jones's discussion Another question :P
"That would be a nice feature to add to 3.0."
2 hours ago
George H. Compton IV replied to Luke Jones's discussion please help ?
"It can't be done with CSS but it can be done with a JavaScript... I believe Ning will add that feat…"
3 hours ago
Thiago Santos de Moraes replied to Luke Jones's discussion Another question :P
"It will be better if you put your questions in the tiltle, because it will help other creators with…"
3 hours ago
Luke Jones replied to George H. Compton IV's discussion Tip any network.. Graphical loader interface. Hide your ugly bounce rate.
"Awesome, yet again you give us another awesome, useful, really cool code :) I reckon you should buy…"
5 hours ago
Eve Bellator replied to George H. Compton IV's discussion ( TIP "N3.0, N2.0 ) Add Google translate to all pages. Update 2/25/15 v9
"Very cool! Thank you!"
8 hours ago
Luke Jones replied to George H. Compton IV's discussion ( TIP "N3.0, N2.0 ) Add Google translate to all pages. Update 2/25/15 v9
"Aww good :) lol , aha :) I'm really happy with it, comet chat have said that their bringing in the…"
8 hours ago
Thiago Santos de Moraes replied to Calico's discussion AJUDA COM ESTE NING 3,0 in Criadores Brasileiros - Brazilian Creators
"Um que use os mesmos membros de sua rede só o Cometchat mesmo, mas o Spot dá conta do recado se voc…"
23 hours ago
Thiago Santos de Moraes replied to Calico's discussion AJUDA COM ESTE NING 3,0 in Criadores Brasileiros - Brazilian Creators
"Entre com outro navegador. Para mim é super normal com o Firefox, Chrome e IE."
23 hours ago
Calico replied to Calico's discussion AJUDA COM ESTE NING 3,0 in Criadores Brasileiros - Brazilian Creators
"Acho que ficou um pouco confuso pois sua resposta esta em outro post. Me refiro a sua resposta:
"Vo…"
yesterday
ANGE.L LUAR replied to Calico's discussion AJUDA COM ESTE NING 3,0 in Criadores Brasileiros - Brazilian Creators
"Thiago Santos de Moraes eu não lembro vc ter me indicado chate auternativos, uso xat. com mas outro…"
yesterday
Thiago Santos de Moraes replied to Calico's discussion AJUDA COM ESTE NING 3,0 in Criadores Brasileiros - Brazilian Creators
"Do que você está falando, Calico?"
yesterday
More…