Archive for January, 2010

Global Game Jam 2010


I had the pleasure of being in the jury for Global Game Jam 2010 in Turkey. The goal of Global Game Jam is to create a playable game in 48 hours. So, the teams do not sleep and try to create the best game in that very limited time. There were very talented and valuable people in this competition and most of the games they created were very good when you think they only have 2 days.

You can visit Global Game Jam site or GGJ Turkey site for more information.

Adding up on Mark Hewitt’s Mystique Facebook Icon Hack


UPDATE: This post is only valid for Mystique versions up to 1.7.2. Newer versions need a different approach which can be found on this post.

Well, Mystique is a beautiful theme, but the original icons for Twitter and RSS Feed you see on the upper right were not very appealing to the eye. And the Facebook and LinkedIn icons? They are not part of the theme.

So, what I have done to add those extra icons is, follow the instructions on Mark Hewitt’s Facebook Icon for Mystique Theme post. But editing the style.css file and uploading the icons over and over is not necessary after each theme update, so here are more update friendly instructions:

First, download the following image (all icons created by Mark, I only merged the LinkedIn icon into the default icon set), and upload it to your site. It will go to the SITE_ROOT/wp-content/uploads/ directory, if you did not change your upload destination.

OK, now that you have uploaded your image to your site, you will have to edit your site style. But instead of editing the style.css file directly, you will add the necessary changes to Mystique’s settings, so that they will not be overwritten after a theme update. Go to your admin panel and select Mystique settings under Appearance. In the settings page, select the User CSS tab, and add the following lines there:

#header .nav-extra.rss{background:transparent url(/wp-content/uploads/nav-icons.png) no-repeat right top;right:20px;}
#header a.twitter{background:transparent url(/wp-content/uploads/nav-icons.png) no-repeat -128px top;right:84px;}
#header a.linkedin{background:transparent url(/wp-content/uploads/nav-icons.png) no-repeat -64px top;right:148px;}
#header a.facebook{background:transparent url(/wp-content/uploads/nav-icons.png) no-repeat 0px top;right:212px;}

The numbers after no-repeat in these lines select which icon to show. 0px is the first icon (i.e. Facebook), -64px is the second one (i.e. LinkedIn) etc. with decreasing 64 pixels. And the numbers at the very end of the lines show where these icons will be from the right side. For example, 84px will put the icon to 84 pixels left of the right side.

If you want to lift the icons up a little bit, also add the following line:

#header .nav-extra{width:64px;height:46px;display:block;position:absolute;bottom:18px;z-index:10;}

The height element in this line determines the height of the icons.

Now that you have readied your icons, let’s show them on your site. You have to manually edit the header.php file in SITE_ROOT/wp-content/themes/mystique folder unless Milenko (designer of Mystique) comes up with another solution in the future versions of the theme.

Open header.php with a text editor and add the last two lines in the following code. These lines will go just after twitter code (they should go about lines 61-62 in version 1.72 of the theme). I have also included some of the original code for you to be able to find where to add the lines.

       //$twituser = get_mystique_option('twitter_id');
       // if(is_active_widget('TwitterWidget'))
       $twitinfo =  get_option('mystique-twitter');
       $twituser = $twitinfo['last_twitter_id'];
       if ($twituser): ?>
      <a href="<?php echo $twituser; ?>" class="nav-extra twitter" title="<?php _e("Follow me on Twitter!","mystique"); ?>"><span><?php _e("Follow me on Twitter!","mystique"); ?></span></a>
      <?php endif; ?>
       <a href=""  class="nav-extra linkedin" title="<?php _e("Contact me on LinkedIn!","mystique"); ?>"><span><?php _e("Contact me on LinkedIn!","mystique"); ?></span></a>
       <a href=""  class="nav-extra facebook" title="<?php _e("Contact me on Facebook!","mystique"); ?>"><span><?php _e("Contact me on Facebook!","mystique"); ?></span></a>

Change YOUR_LINKEDIN_USER and YOUR_FACEBOOK_USER according to your contact info.

If you don’t need one or both of these icons (for example only to have the fancy Twitter and RSS icons Mark created), just delete the according lines from both header.php and User CSS tab of Mystique settings.

That’s all, you can find additional info and icons on Mark’s post.

Laser marked toe line for darts


I play darts as an amateur. I love the game and have a darts board in my house. I have recently replaced the parquet floors with a wall to wall carpet and I did not want to place some lath or masking tape on my new carpet.

So I ended up with a laser marked toe line. I purchased a simple line laser, used it as a plumb bob to determine its own place and installed it over my darts board. While installing I did not have a decent camera, so I ended up photographing the whole installation with my old Nokia E70. After purchasing my Nikon D300, I took another photo, with a little bit more quality, which you can see at the end of the gallery below. 😉

Mystique and WP-Syntax Incompatibility


If you use Mystique theme and WP-Syntax plugin (the syntax highligher) together, you will notice that, your code snippets will use Mystique’s fonts instead of monospace for colored words. When reading codes, monospace fonts like Courier fell much better, because they are easier to read.

Mystique’s style.css file defines default fonts with “*”, so every element on your site which does not have font information will use Mystique’s default fonts. WP-Syntax uses span elements for colors, and these elements do not have their font attributes defined.

In order to solve this problem, you have to add the following to wp-syntax.css file of the plugin:

.wp_syntax span {
  font-family: Courier, "Courier New", monospace;

This way, WP-Syntax will use the correct fonts for every span element, rendering colored words with correct fonts.

Oh, Smashing Magazine, what hast thou done?


PHP QR Code Generator page was posted on the twitter account of Smashing Magazine, and the traffic of this humble blog has risen twenty-fold! Not that I am complaining… 😉

The page seems to be useful to a lot of people, so I will probably add new features to it when I find spare time.

Go to Top