Formatting/styling will_paginate


I received few requests in the past ( personally and recently a comment on my post describing how to use will_paginate plugin ) about how to format pagination links while using will_paginate plugin.

So here it is:

When you add

<%= will_paginate @obj_instance %>

in your views to show your pagination links then it also creates an element (div) and wraps the whole thing under the class name pagination. The one with the current page will have the class name current.

Here is the html code generated by will_paginate


<div class="pagination">
<a href="/page_path?page=2">« Previous</a>
<a href="/page_path">1</a>
<a href="/page_path?page=2">2</a>
<span class="current">3</span>
<a href="/page_path?page=4">4</a>
<a href="/page_path?page=5">5</a>
<a href="/page_path?page=4">Next »</a>
</div>

Now, it is totally upto your imagination how you want to style it using CSS.

But, if due to some reason you don’t want to use the class pagination and add your own then do something like this


<%= will_paginate @obj_instance, :class => 'my_class' %>

Similarly, if you want to add an element id then

<%= will_paginate @obj_instance, :id => 'my_element' %>

Let’s say if you have done both like so:

<%= will_paginate @obj_instance, :id => 'my_element', :class => 'my_class' %>

then the new html generated by will_paginate will be

<div class="my_class" id="my_element">
<a href="/page_path?page=2">« Previous</a>
<a href="/page_path">1</a>
<a href="/page_path?page=2">2</a>
<span class="current">3</span>
<a href="/page_path?page=4">4</a>
<a href="/page_path?page=5">5</a>
<a href="/page_path?page=4">Next »</a>
</div>

Yes, it is that simple.

SPhred Relaunched

SPhred was relaunched last week (1st week of April, 2008) with RESTful interface, new codebase and a new design. Here is a summary of the changes:

  1. Now we have OpenID authentication on SPhred, i.e., new users do not need to Sign Up to use SPhred if they have an Open ID account.
  2. In the past, some users have suggested that they do not want their full name to be shown on their profile page, so now we do not show any user’s full name anywhere because we have added nicknames or user names.
  3. I thought its a bit tedious to type your whole email address to login, hence added an option of using the Sign In name, ie. you can either use your Sign In name or the email address. If you do not know your Sign In name yet then Sign In using your email address and you will see it once you are signed in.
  4. If you have done some activity on SPhred like adding tags to your profile, SPhredding, connected with other people then SPhred can also recommend a network of people with similar interests on SPhred. Simply go to your profile and click on the ‘More Like you’ link to check this out.
  5. You can also send short messages to other users by using the ‘Buzz’ link on a user profile.
  6. I think it is important to bring the old posts back to users’ attention once in a while even if it has gone past 10th page and hence have implemented a ‘Random Picks’ widget which is shown on almost every page. Go to the widgets page http://www.sphred.com/widgets and check out the other widgets.
  7. I received lots of spam in the past, hence now we have captcha implemented on almost every page where users contribute to SPhred.
  8. Previously, every post on SPhred had a URL like http://www.sphred.com/sphred_details/site_name, this url scheme is still kept for backward compatibility but now we have better and more meaningful (& RESTful) urls like http://www.sphred.com/categories/1-New-Launches/websites/site_name.NOTE: The old url scheme will be phased out eventually hence can I request you change the old urls on your blogs/websites to the new ones.
  9. There are many more behind the scenes changes and some you will notice in time.
  10. And yes, this is how SPhred looked in the past http://www.sphred.com/images/sphred.png

If you have any feedback and suggestion then do send it to me, have fun!