Page tree

Creating Presentations

Last updated

Theme Press 1.5 introduced the ability to turn Confluence pages into a slide presentation.

Theme Press 1.5 introduced the ability to turn Confluence pages into a slide presentation. 

To give you an idea, take a look at these three presentation page examples: (Note, each of these hidden pages opens in a new window for your convenience.)

Title Page (click the right arrow to go to the second page)

About (click the right arrow to go to the third page, click the left arrow to go back to the first page)

Repeating Content (click the left arrow to go back to the previous page)

These pages open in presentation mode. You can click the "esc" key to exit back to normal mode.

 

For help with creating a Theme Press presentation, review the information below.

When you view one of the three slide pages above, you'll see the page appear without the Confluence header, toolbar or sidebar. To navigate the slide deck and move between slide or page view, use the following controls.

KeyDescription
  • space
  • right arrow
  • down arrow
advance key to next slide
  • left arrow
  • up arrow
return to previous slide
  • esc
exit presentation mode; view page with Confluence header, toolbar and sidebar
  • N
open presentation notes in a separate window
  • E
open edit screen

When creating a slide presentation, you need a Confluence page for each slide. Additionally, you may want to:

  • create a parent page that lists all the slides
  • create a fresh page for each slide

Slide Components

To turn a page into a slide, the page needs two or three things:

You can learn about the special layout and presentation notes in the respective blocks on this page. Adding and working with layers functions in the same manner as any Theme Press page.

Similar to other slide presentation software, you can:

Add Notes

To add notes to your presentation, complete the following procedures.

  1. Access the slide page.

    If your page appears in presentation mode, press the esc key before continuing.

  2. Open the Page tab:
    1. Press the period (.) key.

    2. The Theme Press Designer opens.
    3. Select the Page tab.
  3. Expand the first Layer accordion.
  4. Click the +Layer button to add a layer.
  5. Wait for the page to refresh.
  6. Expand the new layer's accordion.
  7. Click the Handling expander.
  8. In the CSS Class field, enter: presentation-notes.
  9. Close the Designer by pressing the period (.) key.
  10. On the page, edit the new layer's block.
  11. Add your presentation notes.
  12. Save the page.
Add LayerAdd CSS

View Notes

To view notes during a presentation, complete the following procedures. The notes for each page are tied to that page/slide and automatically progress as you move through the slides.

Slide Layout

Apply the appropriate layout to your slide before running a presentation.

  1. Access a slide page that contains notes.
  2. Press the N key.
  3. A new window opens showing the presentation notes.
The layout you apply to a slide page is one of the most important aspects of a Theme Press presentation. Our slides use a version of the Clean layout with one difference. We've applied Presentation Mode to the layout. To help you start, here are some basic steps.

  1. Access the Clean layout page in the Theme Press Default space.
  2. Copy the page.
  3. Name the copied page appropriately.

    Page Name
    .brikit.layout.<enter anything you want here>
  4. Save the page.
  5. Open the Designer using the period (.) key.
  6. Expand the Presentation Mode accordion.
  7. Check the Enable box.
  8. Wait for the page to refresh.
  9. Access the appropriate slide page.
  10. If necessary, open the Designer using the period (.) key.
  11. Select the Page tab.
  12. Expand the Layout Source accordion.
  13. Select the Override Layout button.
  14. Select the copied layout page you created in step 2.
  15. Wait for the page to refresh.
  16. Repeat steps 9 to 15 for each slide in the deck.

We use the following CSS in the sample slides above.

CSS
/*set the canvas color for different slides*/
body.white-canvas .brikit-canvas,
body.white-canvas #full-height-container {
	background-color: white !important;
}
 
body.primary-canvas .brikit-canvas,
body.primary-canvas #full-height-container {
	background-color: $primaryColor !important;
}

body.secondary-canvas .brikit-canvas,
body.secondary-canvas #full-height-container {
	background-color: $secondaryColor !important;
}

/*add class to easily remove block backgrounds and borders.*/
.brikit-content-block.clean {
	background-color: transparent;
	border: none;
}

/*remove extra Confluence border - see https://brikit.atlassian.net/browse/PRESS-1657*/
body.primary-canvas .aui-page-panel,
body.secondary-canvas .aui-page-panel,
body.white-canvas .aui-page-panel {
	border: none;
}

/*hero styling*/
.brikit-content-block.hero h1 {
	font-size: 54px;
}

body.primary-canvas .brikit-content-block.hero p,
body.secondary-canvas .brikit-content-block.hero h1,
body.primary-canvas .brikit-content-block.hero h1 {
	color: #ffffff;
}

body.primary-canvas .brikit-content-block.hero h1 {
	color: $mediumColor;
	padding-bottom: 12px;
}

*/list styling*/
body.white-canvas .brikit-content-block.hero ul li,
body.primary-canvas .brikit-content-block.hero ul li,
body.secondary-canvas .brikit-content-block.hero ul li {
	font-size: 38px;
	line-height:1.2em;
	padding-bottom: 18px;
}

body.primary-canvas .brikit-content-block.hero ul li {
	color: #ffffff;
}

body.white-canvas .brikit-content-block.hero ul li {
	color: $secondaryColor;
}

Still need help?