Using Tiles for Confluence

A Tile can only be applied to a page when defined within a Tile Container. Upon installation of the Tile for Confluence app, two macros will be installed. These are:

  • Tile Container
  • Tile

Adding the Tile Container to the page.

  1. From the editor tool-bar (page must be in Edit mode) select Insert more content > Other macros. Here the user can search and select from the list of installed macros by typing in ‘Tile’. 
  2. Select Tile Container.
  3. Complete the configurable properties - described below.
  4. Select Insert to add the Tile Container on the page.


Configuration

Tile Container macro comes with 8 configurable properties:

  • Direction is used to set the flow of the Tiles. Values are rowcolumn and masonry
  • Alignment defines how the inner Tiles are aligned in the Tile Container. The values for this field can be:

    • flex-start - items are placed on the cross-start/top line

    • flex-end - items are placed on the cross-end/base line

    • center - items are centred 

    • stretch - stretch to fill the container

flex-start
flex-end
center
stretch
  • Justify defines how the inner Tiles are justified in the Tile Container. The values for this field are:
    • flex-start
    • flex-end
    • center
    • stretch
    • space-around
    • space-between
flex-start

flex-end
center
space-between
space-around
  • Max Width is used to set the maximum width of the Tile Container.  

    Tiles will fill the Tile Container as long as there is space as per the Max Width.  For example


  • Default Height is used to set the height of all Tiles. If left blank, the default is auto.
  • Default Width is used to set the width of all Tiles.  If left blank, the default is auto.
  • Gutter is used to set the space between tiles. If left blank it will default to 10px.  
  • CSS Style allows you to configure further styling to the Tile Container.

Adding a Tile to the page.

  1. Ensure your cursor is within the Tile Container on the page.
  2. From the editor tool-bar (page must be in Edit mode) select Insert more content > Other macros. Here the user can search and select from the list of installed macros by typing in ‘Tile’. 
  3. Select Tile.
  4. Complete the configurable properties - described below.
  5. Select Insert to add the Tile  on the page.
  6. Add your content within the Tile body.



  7. If the Tile is not within the Tile Container previously added, it can be dragged into the correct location. 
  8. Repeat these steps to add further Tiles.

Configuration

There are 15 configurable properties in Tile macro:

    • Height is used to set height of the Tile, and will override the height value of the container. Use auto, percent or a pixel (px) value.
    • Width is used to set width of the Tile, and will override the width value of the container. Use auto, percent or a pixel (px) value.
    • Padding sets the content padding
    • Background Image will fill the container with an image
    • Background Image Width and Height provides dimensions for the background image. 
    • Background Image Position sets the position of the background image. 
    • Background Image Fill (Checkbox) if checked will set the dimensions of your Tile to the background image.
    • Background Colour Set colour name, hex, or rgb values. If left blank the default Confluence colours will be used.
    • Text Colour Set colour name, hex, or rgb values. If left blank the default Confluence colours will be used.
    • Border Colour Set colour name, hex, or rgb values.
    • Border (Checkbox) Sets a default border and shadow to the tile. Enabled by default. 
    • CSS Style is used to add custom css rules to the selected tile. 

    • ID is used to add a HTML ID to the tile element. Can be used to apply external CSS. 
    • Class is used to add HTML classes to the tile element. Can be used to apply external CSS. 

Useful Examples


  1. Use alongside the Include Page macro to insert any Confluence page within a tile!