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

Mandy replied to Nancy Gruver's discussion Migration from Ning to WordPress
"Hi Kos I'm in the same boat; would you mind sending me  PM with the link to check out as well! Than…"
19 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion Tip: For Those Who Need a Personal Site
"no problem bud... definitely cool... one thing that distinguishes this from the rest is the ability…"
21 hours ago
George H. Compton IV replied to ⚡JFarrow⌁'s discussion Megaload of Ning Tips, Tricks and Hacks (over 200+)
"I love the way you organize the tips, awesome job. :-)"
yesterday
George H. Compton IV replied to George H. Compton IV's discussion (TIP N3.0 & N2.0) Nonmembers/visitors redirect scripts
"You're welcome JFarrow. :)  I'm not sure if I've seen your personal site yet, I would love to check…"
yesterday
George H. Compton IV replied to ⚡JFarrow⌁'s discussion Tip: For Those Who Need a Personal Site
"I'll go check this out today, thank you for sharing. :-)"
yesterday
George H. Compton IV replied to Mandy's discussion Redirect Urls / Custom Url
"Good morning Mandy. Here's a website that will customize your links. It may not be exactly what you…"
yesterday
Mandy replied to Mandy's discussion Redirect Urls / Custom Url
"For some reason I'm not getting notifications when someone replies/comments; so didn't realize unti…"
yesterday
Fire-Tech replied to CocteauBoy's discussion After Years of Enduring Empty Promises, I Am Leaving Ning
"Yeah.. that's what I have been holding off for... a more stable and fully responsive version. I als…"
yesterday
⚡JFarrow⌁ replied to George H. Compton IV's discussion (TIP N3.0 & N2.0) Nonmembers/visitors redirect scripts
"came in handy today on my personal site.  thanks G!  "
yesterday
Kos replied to CocteauBoy's discussion After Years of Enduring Empty Promises, I Am Leaving Ning
"Troy How's the mobile setup there?  I get a warning "this connection is untrusted" and when I click…"
yesterday
Kos replied to CocteauBoy's discussion After Years of Enduring Empty Promises, I Am Leaving Ning
"Holy cow"
yesterday
CocteauBoy replied to CocteauBoy's discussion After Years of Enduring Empty Promises, I Am Leaving Ning
"You were/are so awesome... My Ning community benefited so much from your hard work. I will always b…"
yesterday
CocteauBoy replied to CocteauBoy's discussion After Years of Enduring Empty Promises, I Am Leaving Ning
"There are a LOT of internal issues with that platform. And the third-party plugins are awesome with…"
yesterday
Dan Lee replied to Saurabh's discussion Fatal Error & warnings
"how to fix this error"
yesterday
Fire-Tech replied to CocteauBoy's discussion After Years of Enduring Empty Promises, I Am Leaving Ning
"Thanks man and best of luck"
Friday
Fire-Tech replied to CocteauBoy's discussion After Years of Enduring Empty Promises, I Am Leaving Ning
"Have been focusing on my elearning site...completely different software.I was getting really close…"
Friday
George H. Compton IV replied to CocteauBoy's discussion After Years of Enduring Empty Promises, I Am Leaving Ning
":( Sorry to see you go my friend.  Best of luck to you and your new network."
Friday
George H. Compton IV replied to Katy Blagg's discussion Resizing Group Icons
"Hello Katy this should do the trick, the code goes into the design studio global CSS section..
@med…"
Friday
⚡JFarrow⌁ replied to Katy Blagg's discussion Resizing Group Icons
"try adding this to see if it helps .groupHub-group.matrix-itemFluid {
max-width:100%
}"
Friday
CocteauBoy replied to CocteauBoy's discussion After Years of Enduring Empty Promises, I Am Leaving Ning
"I spent THOUSANDS of dollars on SE PHP and it was the biggest mistake I've ever made beyond stickin…"
Friday
More…