Sign in with
Sign up | Sign in
Your question

How-to: Make custom Windows 8 Metro tiles for your websites

Tags:
Last response: in Windows 8
Share
February 13, 2013 6:09:13 PM

How-to: Make custom Windows 8 Metro tiles for your websites

A typical Windows 8 Metro desktop looks something like this.



Usually when you "Pin" a web page to your Start Screen, it has some groovy little custom graphic on its tile. Otherwise it just has a boring generic "e" thing on it. I wanted to make custom Metro tile graphics for sites I created, so here is how I did that.

Here are two of them, for my sites waikikigunclub.com and blibbi.com, above a generic one for BF3 and a custom one for TomsHardware.



To do this, I go here: http://www.buildmypinnedsite.com/

In the second part, "Build your own pinned site," you upload the graphic you want to use, preferably square, and then it gives you back a 144x144px png file which you upload to your site. In step 3, "Get the code," it gives you back something like this, which you paste just under your site's
  1. <head>
tag:

  1. <meta name="application-name" content="Waikiki Gun Club" />
  2. <meta name="msapplication-TileColor" content="#868696" />
  3. <meta name="msapplication-TileImage" content="http://www.waikikigunclub.com/bb/styles/Attriuum/template/wgc_metro_tile.png" />


If you are doing this with a PHPBB3 site, like our waikikigunclub.com site, you could of course edit the template from the site's control panel, rather than editing overall_header.html in a text editor and then uploading it with an ftp app, in which case your full process might be like this:

1)
Go to /cpanel, click on Style tab.
Click on Templates in the left column
Then next to your template name click Edit.
Select overall_header.html
paste under the head tag:

  1. <meta name="application-name" content="Waikiki Gun Club" />
  2. <meta name="msapplication-TileColor" content="#FFFFFF" />
  3. <meta name="msapplication-TileImage" content="http://www.waikikigunclub.com/bb/styles/Attriuum/template/wgc_metro_tile.png" />


Note that you can use whatever background color you want. It doesn't have to be #FFFFFF. I just use white because it makes my own custom tiles really easy to recognize, and I like white backgrounds.

2) Go to Templates again and click on Refresh in the right column for the template you just edited.

3) Up above, click on the General tab, and find the Purge the cache button and do that.

Here are the actual png files.



a b * Windows 8
February 13, 2013 6:21:12 PM

This one is very cool. Hope they let it take the full tile in the future(at least it is bigger then the favicon most sites use).
m
0
l
!