Yii 1.1: emetrotile

A wrapper to create a metro interface.

A widget to display metrotiles as seen in Windows 8 operating system. This widget is basically a wrapper for MetroJs and TileJs combined. MetroJs is used to create the tile animation while TileJs is to give the tilting effects.


  • Yii 1.1.10 or above


  1. Download and extract EMetroTile in your extension directory.
  2. Call the widget. Following is how array data should be organized. Example:
$this->widget('ext.emetrotile.EMetroTile', array(
                array('title'=>'Test Title', 'tiles'=>array(
                    array('content'=>array('test1-a','test1-b'), 'liveTileOptions'=>array('data-speed'=>750, 'data-delay'=>3000,'data-stack'=>true)),
                    array('content'=>array('test2-a', 'test2-b'), 'position'=>'bottom', 'liveTileOptions'=>array('animate'=>true)),
                    array('content'=>'test4', 'position'=>'bottom'),
                    array('content'=>'Blog', 'style'=>'vertical', 'url'=>'http://blog.expressthisout.com'),
                    array('content'=>array('test3-a','test3-b','test3-c'), 'style'=>'horizontal', 'liveTileOptions'=>array('data-mode'=>'carousel')),
                    array('content'=>array('test5-a','test5-b'), 'position'=>'bottom', 'liveTileOptions'=>array('data-mode'=>'flip')),
                    array('content'=>'test6', 'position'=>'top'),

Done, you are ready to go.

For those who want to have an idea how it would look like, here are some screenshots of it: - http://www.anony.ws/M5L - http://www.anony.ws/M5S - http://www.anony.ws/M5U

Total 1 comment

#19756 report it
GrayMac at 2016/01/20 03:12am
Great extension!

Took me a while to get it to work correctly (particularly with knowing which js files to use), but I've now got a nice dashboard menu. The only thing I can't get right is that it's not responsive! On mobile devices it just keeps the tile sizes. Any advice?

Leave a comment

Please to leave your comment.

Create extension