On this page:
- Multi-column layout examples
- Two column layout
- Three column layout
- Configure the content on your dashboard
- Dashboard layout
- Step-by-step instructions
- 1. Insert a Layout box.
- 2. Add the Cover Stories macro and a title.
- 3. Create a wrapper box.
- 4. Create three more Layout boxes inside your wrapper box.
- 5. Fill your Layout boxes with content.
- 6. Create a new wrapper box.
- 7. Insert two Layout boxes into your wrapper box.
- 8. Fill your Layout boxes with content.
- 9. Create a new wrapper box.
- 10. Insert four Layout boxes into your wrapper box.
- 11. Fill your Layout boxes with content.
- Step-by-step cheat sheet
Multi-column layout examples
NEW IN SUITE 6.2 & ESSENTIALS 3.2 With Linchpin Theme you can define the look and feel of your Linchpin Intranet both for the light and dark mode. Make sure your site looks snazzy, no matter what mode users prefer!
Two column layout
Settings for this box:
Width = 49%
Outer spacing = 0 2% 0 0
Alignment = left
Settings for this box:
Width = 49%
Outer spacing = 0
Alignment = left
Explanation:
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% per box
Three column layout
Settings for this box:
Width = 32%
Outer spacing = 0 2% 0 0
Alignment = left
Settings for this box:
Width = 32%
Outer spacing = 0 2% 0 0
Alignment = left
Settings for this box:
Width = 32%
Outer spacing = 0
Alignment = left
Explanation:
The boxes have to be 32% wide, because the spaces between them take away 2% of available space each.
100% – 2% – 2% = 96%
96% / 3 = 32% per box
Those examples apply to all units (%, px, em, rem).
If you wish to apply a width limit to your layout, add the width attribute to the wrapper box.
To center your columns horizontally, use outer spacing = 0px auto on your wrapper box.
You can change the 0px to any other number. This number defines the vertical distance to other elements.
Configure the content on your dashboard
To configure the dashboard’s content, you need to be an administrator and edit the Default Welcome Message template.
You will find this template in Confluence administration > Configuration > Global Templates and Blueprints > System templates > Default Welcome Message.
Click on Edit. You can now create a dashboard template.
Dashboard layout
Let’s create an exemplary dashboard using Layout boxes.
The end result will look like this:
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).
Step-by-step instructions
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.
1. 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.
2. 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 under the title.
3. 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.
4. 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.
5. 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.
6. 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”
7. 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
8. Fill your Layout boxes with content.
Add titles and macros to your Layout boxes.
9. 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”.
10. Insert four Layout boxes into your wrapper box.
Configure your four boxes as follows:
First and second box:
-
- Width: 14%
- Outer spacing: 0 2% 0 0
- Inner spacing: 5px
- Alignment: left
Third box:
-
- Width: 24%
- Outer spacing: 0 2% 0 0
- Inner spacing: 5px
- Alignment of the box: left
Fourth box:
-
- Width: 42%
- Inner spacing: 5px
- Alignment of the box: left
11. 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.
Please note: Make sure that Linchpin Theme is active.
Visit our documentation on how to activate your theme to learn more.
Link to this page: https://seibert.biz/layoutexamples
