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

Bizz ( John ) replied to Bizz ( John )'s discussion Why Are The Events Not Listing The Same Way As UpComing In My Events Or Categories ?
"Any news on this ?"
10 minutes ago
Bizz ( John ) replied to Bizz ( John )'s discussion NEW Code Release for Events Months Wrap and how to style them month by month
"I have also added the code here in a blog to make it easier to copy or read
http://bizzssite.ning.c…"
11 minutes ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion CAPTCHA - NO BOTS AND SPAMMY CONTENT
"Hi there,
It looks like the limitation of @yopmail.com has been set after those people have signed…"
14 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion CAPTCHA - NO BOTS AND SPAMMY CONTENT
"Hi Kevin,
It seems that you are the administrator of the network. However, only network creator has…"
14 hours ago
Sara Horein is now a member of Ning Creators Network
14 hours ago
Philip Voice replied to Yana Ning Support's discussion CAPTCHA - NO BOTS AND SPAMMY CONTENT
"Sorry for the slow reply.
Just to say that the problem with my network wasn't caused by the Ning sy…"
16 hours ago
Charles Harrison replied to Bryce Rubio's discussion A Message from Our CEO
"What a terrible Template and Layout. Please we need a Responsive Template and Layout, and more Resp…"
19 hours ago
Maureen Jansen replied to Maureen Jansen's discussion Message group members
"Thank you to the admin who told me what to do. The button was hidden on a blue bar. "
22 hours ago
⚡JFarrow⌁ replied to Bizz ( John )'s discussion My New Events Notification Messages
"Wow... really nice!"
yesterday
Kevin Acosta replied to Yana Ning Support's discussion CAPTCHA - NO BOTS AND SPAMMY CONTENT
"Please explain the correct pathway for Ning 2.0 - - as you can see from the image below there is no…"
yesterday
Traddie replied to Yana Ning Support's discussion CAPTCHA - NO BOTS AND SPAMMY CONTENT
"Hi. I added the @yopmail.com   address this morning, and this afternoon I still had a few get throu…"
yesterday
Constantine is now a member of Ning Creators Network
yesterday
Kyryl_Ning_Support replied to Yana Ning Support's discussion CAPTCHA - NO BOTS AND SPAMMY CONTENT
"Hi Philip,
We have replied to you in private message, as the reply contain some personal informatio…"
yesterday
Kyryl_Ning_Support replied to Hugh's discussion Support Tickets Closed Even if Error not Fixed
"Hi Hugh,
We do apologise for the inconveniences, the system could close your ticket automatically.…"
yesterday
Kyryl_Ning_Support replied to Maureen Jansen's discussion Message group members
"Hi there,
To send the message to all members of the group please go to the Group and Press the Butt…"
yesterday
Saurabh replied to Saurabh's discussion Home page showing error
"The error again started"
Tuesday
Jungla replied to Yana Ning Support's discussion CAPTCHA - NO BOTS AND SPAMMY CONTENT
"How can you do new stuff, when you can't even fix old errors? My website, today gives all day Our a…"
Monday
Philip Voice replied to Yana Ning Support's discussion CAPTCHA - NO BOTS AND SPAMMY CONTENT
"Has this update affected networks?

Can you please check landscapejuicenetwork.com as it's been dow…"
Monday
Kos replied to Anna Ning Support's discussion Announcing Events for Ning 3.0
"Moi?  *lol*  Yeah, once I'm 'in' something, I tend to stick around forever 'til you show me the exi…"
Monday
Pat Howlett replied to Anna Ning Support's discussion Announcing Events for Ning 3.0
"Kos, you are certainly one who kept me coming back :]
I hope to have something worth sharing soon. "
Monday
More…