Styling Page Layouts

Confluence Page Layouts are a powerful tool to create complex layouts in your content. By default, Slide Presenter “flattens” Page Layouts and treats the multiple columns as if they appear below each other. However, you can tell Presenter to respect Page Layouts - learn more about Using Page Layouts with Slide Presenter.

The problem we want to solve: too wide single column content

Example of a presentation content that feels too wide.

We strongly recommend to use 16:9 slides with Page Layouts so the columns have some space to live. However, this can make single-column content look too wide on your slides.

But fear not - Slide Presenter adds some markup to the slides that makes it easy to make these slides shine again!

Our default themes contain this styling an 16:9 slides since version 3.22. If your installation is older, you can simply install a default theme in its current version and get this new styling.

Styling single column content

When the layout option “Respect column layout” is switched on, Slide Presenter wraps each single column section with a DIV.columnSingle element. Additionally, the following classes are added:

If the content contains a table: withTable
If the content contains a YouTube gadget: withYoutube
If the content contains an iFrame that is NOT a YouTube gadget: withIframe

In the next section, we will use these classes to create CSS layout rules for pretty slides.

CSS Layout rules for pretty single column slides

We are going to achieve the following effects:

Single column Page Layouts (and content without Page Layouts) will only use the center 60% of the slide, resulting in pleasant text line lengths.
However, if the single column contains a table or an iFrame, the full width is used - we want our tables to be wide and well readable!

Add the following CSS code to your theme:

CSS

/**
 * Slides without page layout or with a single column page layout
 * are VERY wide in 16:9 - restrict them to 60% just like they
 * were the center column in a 1:3:1 page layout.
 * Remove this if you switch away from 16:9.
 */
.slides .columnSingle {
    width: 60%;
    margin: 0 auto;
}

/** But if the single column slide contains a table, give it 100% width */
.reveal .slides .columnSingle.withTable,
.reveal .slides .columnSingle.withIframe {
    width: 100%;
}

The result

The CSS centers the content on single column slides, giving naturally good looking line lengths:

Learn more about the handling of Page Layouts, including a demo video, here: Using Page Layouts with Slide Presenter