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

NC for Hire

If you're like me, getting the details of your ning network just right is an ongoing process.  For example, I think that the default pagination styles attached to ning themes are BOR-ING.  So I'm going to quickly show you how to add a little style to your pagination and make your pages just a little more unique.

First, for those who don't know, this is pagination

 

 

What You will Be Making is This on the right:

 

You can see the finished product on any page on my network with pagination-for example, the Surveying Photos Page as pictured to the right.

 

 

 

 

Let's begin.  First you want to find a style that you like and you can find these all over the web.  !'ve found that some offered by blogs which help with blogger design have pretty good ones.  For this exercise, try picking one of the many styles from this page.  I used this one: Meneame Style   You can see from the image below that there are plenty to choose from:

You'll want to download the CSS style sheet for the style you want and if there is an image involved grab that too.  If there is an image, you'll want to upload it to a blog post on your network and paste that image URL into the CSS style sheet wherever you see something like url:(image/whatever.jpg)

 

 


Next, you're gonna want to look at the style sheet and find any instance where it says something similar to   div.pagination  and replace every instance of div.    with  ul.  because what you are changing is not the div itself, but the unordered list.

 

Finally, you're gonna want to copy and paste the entire CSS from the  stylesheet and add it to the bottom of your Advanced CSS in dashboard.

 

Bonus Tip:  If you want to style it even further, head over to the CSS3Generator and use the Transform property.  Play around with that a little bit and grab the new code it generates.  Place that code within the ul.pagination hover state and you will get something similar to what you see on bottom of LSU Photos page.

 

 

Good luck!

 

Need help with your Ning Network?  Message me.  I don't bite.

 

 

 

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

  • Freaking brilliant! Thanks Justin! Just installed it on my network.

  • Hi justin,

    Have come up with the following code to place in appearance>advanced (at the end) but it is not working. What am I missing? Thanks for your help.

    • Maybe  because you have a different theme, but I don' have any of that other code between -moz-transform and (0deg,0deg).

      • Hey Thunder thanks for taking a look. I've taken all the transform code out and it still doesn't display the new "style". I'll go back and re-copy and place the code~ all fresh!

        Thanks, 

        James

        • You're welcome James.

           

          Best to you.

  • NC for Hire

    thanks...im glad you all are getting use of this...

  • Hi JFarrow , i want to put like your style and emotion of numbers in your website.when I click in number it is  move littel.Can you give me the css for it .

  • ?

    • NC for Hire
      As I said in the post Ahmad you need to go to http://css3generator.com and generate that code then add it to your advanced css box...
      • I do not know generated
        You can generate for me?

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

Maighread Birdsong updated their profile photo
yesterday
J.Ayvar replied to Nique Stevenson's discussion
Directory Page
" hello, is there any update  idea to build a directory with ning 3 ?"
Saturday
TJ @ jQueryHelp replied to TJ @ jQueryHelp's discussion
Security Alert! Please Delete Code for my Old Apps such as Smileys IMMEDIATELY!
"Thanks! 👍"
Friday
J.Ayvar replied to TJ @ jQueryHelp's discussion
Security Alert! Please Delete Code for my Old Apps such as Smileys IMMEDIATELY!
"Thanks TJ.  welcome back !"
Friday
TJ @ jQueryHelp posted a discussion
Hi everyone! This is TJ, a Ning Apps developer for many years.  Looks like some Ning Creators are…
Friday
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"thank you very much I come from the times of this site now I put the photo, it was hard to survive…"
Dec 1
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"To do a border without the ridge and using dots you would just write it like this
border:13px…"
Dec 1
Steve C posted a discussion
 I want to put ads above individual groups.Jen showed me how to put text above forum categories…
Dec 1
Rosas † Negras replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"I don't use file manager for photos, so if it's a photo I'm not interested even if after I close…"
Dec 1
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"I agree with you, but I want it rounded, on the square it gives no problem,this is an impossible…"
Nov 30
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"It's because you are using the ridge as a border, to create the ridge the border property adds the…"
Nov 30
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"I don't want to go below 13 px I know all would be ok but it's too logical"
Nov 30
More…

Meanwhile, you can check our social media channels