Using Tiles for Confluence

A Tile Macro can only be applied to a page when defined within a Tile Container. Upon installation of the the Tile Macro add-on, 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 four configurable properties:

    • 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:

    • Center align the Tile Container by setting the Max Width equal to the width, multiplied the number of Tiles you wish to have on each row. 

      So 2 tiles per row that are 300px each, set the max width to 600px. For example:


      If Max Width is not set, tiles will align to the left.


  • Default Height is used to set the height of all Tiles. If left blank it uses the height of the Tile that gets added.
  • Default Width is used to set the width of all Tiles. If left blank it uses the width of the Tile that gets added.
  • Gutter is used to set the space between tiles. If left blank it will default to 10px.  

Adding a Tile to the page.

  1. Ensure y our 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 you 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 five configurable properties in Tile macro:

    • Height is used to set height of the Tile, and will override the height value of the container
    • Widthis used to set width of the Tile, and will override the width value of the container
    • CSS Style is used to add custom css rules to the selected tile. 

      E.g: background-color: black; color: white


    • 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. 


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