CSS3 badges using UTF-8 character

The idea was to generate badges for different types of users on the fly. Just by defining a new color. The solution is using an UTF-8 character for the corner: ◤ U+25E4

You can see the example page here:

1. Step: Use UTF-8

<meta charset="utf-8">

2. Step: The badge style

.badge {
  font-family: Arial,san-serif;
  font-size: 10px;
  line-height: 1em;
  padding: 0px 15px 0px 3px;
  text-transform: uppercase;
  border: 1px solid #ccc;
  color: #666666;
  position: relative;
  background: #f1f1f1;
.badge:before {
  content: '\25E4';
  width: 12px;
  height: 12px;
  display: block;
  background: #fff;
  position: absolute;
  right: -1px;
  bottom: -1px;
  font-size: 15px;
  line-height: 10px;
  color: #bdbdbd;
.badge:hover {
  color: #2D3441;
  cursor: pointer;

3. Step: The badge markup

<span class="badge" title="Default Badge">Default Badge</span>

WordPress Multisite footer navigation

On a new project I wanted to have an footer navigation across a range of WordPress Multisite blogs. This is my solution:

<?php $current_blog = get_current_blog_id(); ?>
<?php switch_to_blog(1); ?>
<?php wp_list_pages( 'show_home=1&title_li=<h3>'.get_bloginfo('name').'</h3>&depth=1' ); ?>

<?php switch_to_blog(2); ?>
<?php wp_list_pages( 'show_home=1&title_li=<h3>'.get_bloginfo('name').'</h3>&depth=1' ); ?>


<?php switch_to_blog($current_blog); ?>

If you use switch_to_blog just once you don’t need the $current_blog and you can switch back easy using restore_current_blog().

WordPress Function Reference / switch to blog

The project URL is coming soon.


It’s not necessary to use the $current_blog variable. After the switches you can return to the current blog by using the restore_current_blog() function.


My Rails project: Static pages

How to create static pages, for example legal notice, on a Rails project.

1. Step: The Controller

./script/rails generate controller Static

The controller code:

class StaticController < ApplicationController
  def method_missing(name)
    render :template => "static/#{name}"

2. Step: Routes

In your config/routes.rb add one line for every static page:

match 'legal_notice' => 'static#legal_notice'

3. Step: The view

Create a new directory app/views/static and add your page legal_notice.html.haml

Now go to http://your-application.com/legal_notice – that’s all.

A Book Apart: Part 1

I have obtained my first A Book Apart editions. Number 5: “Design For Emotions” and number 6: “Mobile First”.

Just two days ago I enquired to the support about my order. Now I got it after 3 weeks waiting. I’m looking forward to the next shipment ordered 6 weeks ago, number 1, 2, 3 and 4.

I’m not realy sure if it’s normal but many thank’s to USPS and the german customs.