{"id":3414,"date":"2010-01-27T00:00:00","date_gmt":"2010-01-26T22:00:00","guid":{"rendered":"http:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/"},"modified":"2019-04-14T20:46:59","modified_gmt":"2019-04-14T18:46:59","slug":"facebook-css-for-will_paginate-gem","status":"publish","type":"post","link":"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/","title":{"rendered":"Facebook CSS for will_paginate gem"},"content":{"rendered":"<p>Today I needed to add pagination to my Danish beta application for handling your accounting called <a href=\"http:\/\/hurtigmoms.dk\">Hurtigmoms<\/a>. Since I&#8217;m developing in Rails it was a logically choice to use \u201cwill_paginate\u201d to support pagination.<\/p>\n<p>Our prototype layout is using a Facebook header and so I wanted my pagination control to mimic their style. If you need something similar you might want to take a look at my CSS styles which are using the default class names used by will_paginate.<\/p>\n<pre><code>    .pagination {\n        font-size: 11px;\n        float: right;\n        margin: 0;\n        padding: 3px 0 4px;\n    }\n        .pagination a,\n        .pagination span {\n            padding: 3px 3px 2px;\n        }\n        .pagination .disabled {\n            background:none repeat scroll 0 0 transparent;\n            border:medium none;\n            color:#999999;\n            cursor:default;\n        }\n        .pagination a {\n            color:#3B5998;\n            cursor:pointer;\n            text-decoration:none;\n        }\n        .pagination a:hover {\n            background-color:#3B5998;\n            border-bottom:1px solid #3B5998;\n            border-color:#D8DFEA #D8DFEA #3B5998;\n            color:#FFFFFF;\n            text-decoration:none;\n        }\n        .pagination .current {}\n            .pagination .current {\n                border-bottom:2px solid #3B5998;\n                border-color:#3B5998;\n                color:#3B5998;\n                font-weight:bold;\n                padding-left:2px;\n                padding-right:2px;\n            }\n            .pagination .current a:hover {\n                background-color:#3B5998;\n                color:#FFFFFF;\n            }\n\n        .pagination .prev_page {\n\n        }\n        .pagination .next_page {\n\n        }\n<\/code><\/pre>\n<p>Just copy and paste it into your application css file and you\u2019re done.<\/p>\n<p>This is how it looks:<\/p>\n<p><img src=\"https:\/\/i0.wp.com\/www.theill.com\/stuff\/screenshots\/facebook-pagination-css-style-20100127-114918.png?w=660\" data-recalc-dims=\"1\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today I needed to add pagination to my Danish beta application for handling your accounting called Hurtigmoms. Since I&#8217;m developing in Rails it was a logically choice to use \u201cwill_paginate\u201d to support pagination. Our prototype layout is using a Facebook header and so I wanted my pagination control to mimic their style. If you need &hellip; <a href=\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Facebook CSS for will_paginate gem<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","spay_email":"","jetpack_publicize_message":""},"categories":[98],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v14.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Facebook CSS for will_paginate gem &bull; Peter Theill Site<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Facebook CSS for will_paginate gem &bull; Peter Theill Site\" \/>\n<meta property=\"og:description\" content=\"Today I needed to add pagination to my Danish beta application for handling your accounting called Hurtigmoms. Since I&#8217;m developing in Rails it was a logically choice to use \u201cwill_paginate\u201d to support pagination. Our prototype layout is using a Facebook header and so I wanted my pagination control to mimic their style. If you need &hellip; Continue reading Facebook CSS for will_paginate gem\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/\" \/>\n<meta property=\"og:site_name\" content=\"Peter Theill Site\" \/>\n<meta property=\"article:published_time\" content=\"2010-01-26T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-14T18:46:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.theill.com\/stuff\/screenshots\/facebook-pagination-css-style-20100127-114918.png?w=660\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@theill\" \/>\n<meta name=\"twitter:site\" content=\"@theill\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.theill.com\/#website\",\"url\":\"https:\/\/www.theill.com\/\",\"name\":\"Peter Theill Site\",\"description\":\"What\\u2019s going on in the personal life of Peter Theill\",\"publisher\":{\"@id\":\"https:\/\/www.theill.com\/#\/schema\/person\/d65d009363af2cc0a150b55dc20fa301\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.theill.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/i0.wp.com\/www.theill.com\/stuff\/screenshots\/facebook-pagination-css-style-20100127-114918.png?w=660\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/#webpage\",\"url\":\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/\",\"name\":\"Facebook CSS for will_paginate gem &bull; Peter Theill Site\",\"isPartOf\":{\"@id\":\"https:\/\/www.theill.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/#primaryimage\"},\"datePublished\":\"2010-01-26T22:00:00+00:00\",\"dateModified\":\"2019-04-14T18:46:59+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.theill.com\/#\/schema\/person\/d65d009363af2cc0a150b55dc20fa301\"},\"headline\":\"Facebook CSS for will_paginate gem\",\"datePublished\":\"2010-01-26T22:00:00+00:00\",\"dateModified\":\"2019-04-14T18:46:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.theill.com\/#\/schema\/person\/d65d009363af2cc0a150b55dc20fa301\"},\"image\":{\"@id\":\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/#primaryimage\"},\"articleSection\":\"development\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.theill.com\/blog\/2010\/01\/27\/facebook-css-for-will_paginate-gem\/#respond\"]}]},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.theill.com\/#\/schema\/person\/d65d009363af2cc0a150b55dc20fa301\",\"name\":\"Peter\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.theill.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f4f96a08152550e603ee595403f3ba57?s=96&d=retro&r=g\",\"caption\":\"Peter\"},\"logo\":{\"@id\":\"https:\/\/www.theill.com\/#personlogo\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_shortlink":"https:\/\/wp.me\/p8TYI1-T4","jetpack-related-posts":[{"id":3399,"url":"https:\/\/www.theill.com\/blog\/2012\/03\/31\/a-bash-version-of-keep_releases-known-from-capistrano-ruby-scripts\/","url_meta":{"origin":3414,"position":0},"title":"A bash version of keep_releases known from Capistrano ruby scripts","date":"March 31, 2012","format":false,"excerpt":"Today I needed a clean up feature in my bash script similar to what\u2019s known from Capistrano when using the \u201ckeep_releases\u201d argument. I wasn\u2019t able to find a simple version so I created it myself. Maybe others find it useful too so here goes releases_path=\/data\/sites\/yoursite.com\/releases # change this keep_releases=5 versions=`ls\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3400,"url":"https:\/\/www.theill.com\/blog\/2011\/06\/08\/finding-apache-configuration-file-httpd-conf-location\/","url_meta":{"origin":3414,"position":1},"title":"Finding Apache configuration file (httpd.conf) location","date":"June 8, 2011","format":false,"excerpt":"Just a quick tip for programmers working with Apache. Sometimes I\u2019m asked where to find the Apache configuration file on a given server. Since it\u2019s possible to configure this there is no \u201cdefault location\u201d so I usually do: $ ps -ef | grep apache which gives me a list like\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3404,"url":"https:\/\/www.theill.com\/blog\/2011\/01\/14\/how-to-get-display-name-from-nsscreen\/","url_meta":{"origin":3414,"position":2},"title":"How to get display name from NSScreen","date":"January 14, 2011","format":false,"excerpt":"While working on Wallpapery I needed to get a given screens display name. There is no \u201cdisplayName\u201d method on NSScreen so I added a category to provide this functionality. Seems like others are looking for this too so I\u2019m posting my code below. NSScreen+DisplayName.h #import @interface NSScreen (DisplayName) - (NSString\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3398,"url":"https:\/\/www.theill.com\/blog\/2012\/04\/24\/how-to-slice-a-psd-for-use-with-iphone-ipad\/","url_meta":{"origin":3414,"position":3},"title":"How to slice a PSD for use with iPhone & iPad","date":"April 24, 2012","format":false,"excerpt":"If you are designer doing iOS interfaces and want to help your developer, these guidelines are for you. Slice both a regular and retina version. Retina files are postfixed with \u201c@2x.png\u201d (for \u201ctwo times\u201d) e.g. \u201caccount.png\u201d vs \u201caccount@2x.png\u201d Retina files must be placed in same folder as its non-retina brother\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3418,"url":"https:\/\/www.theill.com\/blog\/2009\/03\/12\/extend-your-shell-toolbox-with-pbcopy\/","url_meta":{"origin":3414,"position":4},"title":"Extend your shell toolbox with pbcopy","date":"March 12, 2009","format":false,"excerpt":"I'm developing Rails applications on Mac and a command which isn\u2019t used enough in my opinion is \u201cpbcopy\u201d. This command will allow you to grab the standard input from a terminal and put it on the clipboard. I find myself using commands such as \u201cpwd | pbcopy\u201d a lot. This\u2026","rel":"","context":"In &quot;development&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3417,"url":"https:\/\/www.theill.com\/blog\/2009\/03\/16\/upgrading-rails-engines-project-to-rails-2-3-2\/","url_meta":{"origin":3414,"position":5},"title":"Upgrading Rails Engines Project to Rails 2.3.2","date":"March 16, 2009","format":false,"excerpt":"My lifestyleapps project (still in very early beta) was running Rails 2.2.2 with the Rails Engines plugin ten minutes ago. Today, Rails 2.3.2 was released so I decided to try if I could easily upgrade it and avoid using the Rails Engines plugin anymore. It was beautiful simple and took\u2026","rel":"","context":"In &quot;development&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"amp_validity":null,"_links":{"self":[{"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/posts\/3414"}],"collection":[{"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/comments?post=3414"}],"version-history":[{"count":1,"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/posts\/3414\/revisions"}],"predecessor-version":[{"id":3429,"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/posts\/3414\/revisions\/3429"}],"wp:attachment":[{"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/media?parent=3414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/categories?post=3414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.theill.com\/wp-json\/wp\/v2\/tags?post=3414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}