Documentation's navigation
On this page
In this guide we will show you how to create a custom dashboard and how to personalize it, for example based on user's location.
The 'Layout box' macro
First, let's talk about the Layout box macro. It will be an essential tool for our custom dashboard.
What does the Layout box macro do?
The Layout box macro can:
- Limit the width of any element (text, media, macro).
- Separate the page in multiple sections.
- Include custom spacing between elements.
The name Layout box is chosen on purpose. The Layout box macro is basically a box wrapped around the content. To help you visualize the concept, we created the screenshots below.
On the left, you can see how a Confluence page looks like normally. On the right side, you can see how layout boxes can transform the page to your liking.
A page without layout boxes.
The same page reorganized with the help of layout boxes.
How does the Layout box macro work?
Think in boxes! Every "section" of your dashboard is a Layout box, going from the very left to the very right of your page. Alternatively, the box has a width you defined.
Inside those boxes might be several more boxes, acting as columns. For the columns to be displayed correctly, three conditions must be met:
- The columns must be inside a wrapper Layout box.
- All Layout boxes acting as columns must be aligned to the left.
- Column widths and spacings between and around them must add up to 100% (or the total width you set up for your wrapper box).
The Layout box macro has all kind of settings to customize your design. Learn more about Layout boxes in our documentation.
Example of width calculation with two boxes:
The boxes have to be 49% wide, because the space between them takes away 2% of the available space.
100% - 2% = 98%
98% / 2 = 49% = width per box
If the spacing between boxes is bigger (let's say 10%), the box width must be adjusted.
100% - 10% = 90%
90% / 2 = 45% = width per box
How to create a custom dashboard
Now we can create a dashboard.
Our end result will look like this:
Please note that these instructions use macros specific to this example. You can of course use whichever macros you need and want.
Also, we create a full-width dashboard here. If you want to restrict your elements in width, edit the width of your wrapper boxes.
Insert a Layout box.
Insert the Layout box macro into your page.
This Layout box does not need any configuration. We want to use it for only one macro. It will have the full width of the page.
Add the Cover Stories macro and a title.
Inside your Layout box, use a title to describe the functionality. We are using "Company news" here.
Place the Cover Stories macro inside your Layout box. Place it beneath the title.
Create a wrapper box.
Insert another Layout box macro into your page. Select "Use box as a wrapper" in this macro's configuration.
Add an outer spacing of 50px auto to this wrapper box. It will push this box and its content down by 50px and center it horizontally.
Create three more Layout boxes inside your wrapper box.
Above all those boxes, add the title "Employees".
Now setup the Layout boxes as columns:
- Set the width to 32% on all three boxes.
- Set the inner spacing to 5px on all three boxes.
- Set the alignment of the box to left on all three boxes.
- Set the outer spacing to 0 2% 0 0 on the first two boxes.
Fill your Layout boxes with content.
Add pictures and text. Center both.
Note that we used another Layout box for the text. This allowed us to easily add a background color to the text.
Create a new wrapper box.
Insert a new Layout box into your page.
Configure it like in step 3:
- Outer spacing of 50px auto
- Select "Use box as a wrapper"
Insert two Layout boxes into your wrapper box.
Configure those Layout boxes as follows:
First box:
- Width of 64%
- Outer spacing of 0 2% 0 0
- Inner spacing of 5px
- Alignment of the box - left
Second box:
- Width of 34%
- Inner spacing of 5px
- Alignment of the box - left
Fill your Layout boxes with content.
Add titles and macros to your Layout boxes.
Create a new wrapper box.
Insert another Layout box into your page.
Configure it once more as a wrapper:
- Set the outer spacing to 50px auto.
- Activate "Use box as a wrapper".
Insert four Layout boxes into your wrapper box.
Configure your four boxes as follows:
First and second box:
- Width of 14%
- Outer spacing of 0 2% 0 0
- Inner spacing of 5px
- Alignment of the box - left
Third box:
- Width of 24%
- Outer spacing of 0 2% 0 0
- Inner spacing of 5px
- Alignment of the box - left
Fourth box:
- Width of 42%
- Inner spacing of 5px
- Alignment of the box - left
Fill your Layout boxes with content.
Add titles and macros to your Layout boxes.
Step-by-step cheat sheet
Here you can view the whole layout in one image. If you're stuck, compare your work with this cheat sheet. Perhaps you can identify your problem.
Link to this page: https://seibert.biz/linchpinsuite-customdashboards