{"id":209,"date":"2011-05-09T17:17:03","date_gmt":"2011-05-09T17:17:03","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=209"},"modified":"2011-05-09T17:18:17","modified_gmt":"2011-05-09T17:18:17","slug":"stats-counter-styling-with-css","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/stats-counter-styling-with-css\/","title":{"rendered":"Counter styling with CSS"},"content":{"rendered":"

\"\"<\/p>\n

Key ingredients
\n\t<\/strong><\/p>\n

    \n
  1. Background image, like the above<\/li>\n
  2. Fixed-width font, like Courier<\/li>\n
  3. CSS letter-spacing property<\/li>\n
  4. Ability to zero-pad numbers with your server-side language<\/li>\n<\/ol>\n

    The HTML
    \n\t<\/strong><div id="counter">0003<\/div><\/code><\/p>\n

    The CSS<\/strong>

    \n\t#counter {  \/* adjust all styles below to fit your chosen font \/ size *\/
    \n\t  width: 68px;
    \n\t  padding: 1px 0 3px 3px;
    \n\t  font-family: Courier;
    \n\t  font-size: 18px;
    \n\t  letter-spacing: 7px;
    \n\t  background: url('\/src\/img\/test.png') 0 0 repeat-x; }<\/code><\/p>\n

    Zero-Padding<\/strong>
    \n\tWith ColdFusion as an example, you might use the following code to zero-pad your counter:<\/p>\n

    <div id="counter"><cfoutput>
    \n\t  #NumberFormat(hits, "0009")#
    \n\t<\/cfoutput><\/div><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

    Key ingredients Background image, like the above Fixed-width font, like Courier CSS letter-spacing property Ability to zero-pad numbers with your server-side language The HTML <div…<\/p>\n","protected":false},"author":1,"featured_media":210,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12],"tags":[90],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/209"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=209"}],"version-history":[{"count":3,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/209\/revisions"}],"predecessor-version":[{"id":214,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/209\/revisions\/214"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media\/210"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}