Branded App Home Screen - Layout, Icons & Background

Tiles can be moved and resized within the 3 column grid system.

To move a tile, drag and drop it to the location you want it in the home screen. It will push any overlapping tiles up or down to make room for the tile you are moving.

To resize a tile, select the tile and hover over the bottom right corner of the tile until an anchor point arrow appears. Drag the tile to the desired size and release the corner.

To remove a tile, once the tile is selected click the X symbol in the top right corner of the tile.

MiGym provides a set of default tile icons that appear for each type of tile. These icons default to the color set for your app design color scheme. The default background color for your tiles is also predetermined by the color set for your app design color scheme. Your app design color scheme is set up and agreed as part of the app design process during the initial app configuration.

Click a tile to review the tiles properties on the right-hand side of the page.

To move or resize the icon image, click the icon image on the tile and an orange box will appear around the border.

You can then resize the icon image by dragging any of the anchor points. You can move the icon image within the tile by clicking and holding the icon image and dragging it to the desired location.

Once you have selected a tile you can adjust the design properties on the right-hand side.

1. Tile Icon: Click the choose file button to change the tile icon by uploading a new image. Images with transparent backgrounds and minimal empty borders work best here as this will allow you to resize the image to the maximum size within the tile. Click the trash icon to remove this from the tile completely. Tiles that include dynamic text content will anchor the icon to the bottom right of the tile and appear cropped slightly to match the original tile design. If you wish to keep the default icons but wish to change the color of these, please contact the MiGym support team and provide the desired hexadecimal color value.
2. Background color: Set the background color for the tile. The color picker includes a transparency slider the set the opacity of the tiles background color.
3. Background image: You can use this setting to set the background of the tile as an image instead of a color. The image will be resized without affecting the aspect ratio. Please take note of the recommended dimension for each tile. Click the trash icon to remove the background image from the tile completely.
4. Border: You can add a border to your app tiles by ticking the enable border box and selecting a color using the color picker tool. Below this you can set the width of the border added and can choose to round the corners of the tile if you wish.