In this tutorial you will learn how to create your first own theme. You can either choose one of our handcrafted themes as a base, or you can create a theme from scratch. No matter which way you choose, your theme is sure to be awesome!

Step 1: Create a new theme

(blue star)You have two options if you want to create your own theme: You can either write everything from scratch or you can use an existing theme and customize it to your needs.

Copy theme to use as a base (recommended)

  1. You can easily duplicate one of the existing Presenter Themes and use it as a template

  2. Or you download one of our handcrafted themes here and upload it to Presenter for Confluence

  3. Get styling started

Create a theme from scratch

  1. Click on the button create new theme

  2. Get styling started 


Step 2: Give basic information

  1. Name your theme and enter a short description

  2. Upload your logo (supported file formats are .png and .jpg)
    (lightbulb) For an optimal representation cut your logo squarely before

  3. If you want to display a custom text in the header or footer you can define the text here

Step 3: Define the header and footer

If you want a header and/or footer that overlays your presentation content and shows additional information such as the name of the presenter, you can activate it here.

If you do not want a header or footer in your presentation, you can skip this step.

The color of the header and footer depends on the selected base theme, but can also be adjusted manually as explained later.

You can display up to three different types of information in the header and footer. The elements can be aligned leftcentered or right.
For example, to place your logo on the left side of the header, activate the header and select the Logo element in the drop-down menu.

(lightbulb) Are you already curious about the result? Click on the Save or Apply button, open a Confluence document of your choice, click on present and choose your new theme. Tada! Your first successes will be visible.


Step 4: Select a base theme

As already mentioned in Define the header and footer the base theme influences the appearance of the header and footer.

For example, if you select White, headers and footers will automatically have a light grey background. If you select Black, the background is black.

But not only header and footer change with the selection of a base theme. Also the background of all slides, fonts and other elements are affected.

You can save yourself a lot of work by choosing a suitable base theme. You can also overwrite unwanted styles with your own afterwards.

If you don't choose a base theme, the code snippets to the left of the editor disappear and you have to define everything yourself.


Step 5: Styling

Before we start, I would like to give you a little intro to CSS, which is used to write the code to style your theme

Welcome to CSS

CSS, or Cascading Style Sheets, is used in web development to give websites a layout and styling
For the development of your first theme, you will mostly need simple styling in terms of colors, sizes and fonts.

Let me show you an example on how to write your own CSS code:

.reveal h1 {
    font-size: 2.5em;
}
CODE

It all starts with you selecting the element you want to style, in our case the h1. H1 is an element predefined in CSS with which you address the largest possible headline. Besides h1 there are h2 to h6, while h6 is the smallest possible headline. You already know headlines from formatting your Confluence page, here you can also use Heading 1 to Heading 6.

With .reveal we are addressing our external library reveal.js, you don't have to worry about that. You will learn from the following examples when to use .reveal before the actual selector.

After you have defined an element you want to style, in this example the h1, the code that styles this element follows. The code is defined in curly brackets { }

Insert curly brackets with Alt + 8 and Alt + 9 on Mac and Alt + Shift + 7 and Alt + Shift + 0 on Windows

You can now define the style of the element in the curly brackets. In this example we want the font size to be 2.5em. There are different units to define sizes in CSS, we will use em and px (pixel). Each line inside the curly brackets is terminated with semicolons ;.


Common use cases

Import fonts

You can easily import fonts from Google fonts. Search for the desired font and click on select this font.

Then copy the font from @IMPORT as shown in the screenshot:

This code line is then inserted into the theme editor.

After you have imported the font, you have to apply it.

You can do this by switching back to Google fonts and copying the code given under Specify in CSS:

The next step is to decide which elements of your presentation should adopt this font. 

Sometimes it is desired that the headings and the body text use a different font. If this is the case, you must import both fonts as described above.

  1. All elements should use the same font

    .reveal {
       /*paste line copied from google fonts here (e.g. font-family: 'Roboto', sans-serif;)*/
    }
    CODE

  2. Only the headings should use this font

    reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
        /*paste line copied from google fonts here (e.g. font-family: 'Roboto', sans-serif;)*/
    }
    CODE

  3. Only the body text should use the font

    reveal p {
       /*paste line copied from google fonts here (e.g. font-family: 'Roboto', sans-serif;)*/
    }
    CODE

Set Background color

To change the background color of all slides, write:

body {
    background-color: #191919; /*Insert your hex or rgb color code instead of #191919*/
}
CODE

To give the title slide a different color, write:

.reveal .title-slide .slide-background-content {
    background-color: #fcba03; /*Insert your hex or rgb color code instead of #fcba03*/
}
CODE

Style header and footer

With the following code pieces you can style the header and footer element according to your wishes:

#slide-header {

	/*Adjust background-color*/
	background: rgba(0, 0, 0, 0.2);

	/*Adjust height*/
    height: 12%;

	/*Adjust font-size*/
    font-size: 8vh;

	/*Adjust font-color*/
	color: #fff;
}

#slide-header .text{

	/*Adjust font-family*/
	font-family: 'Open Sans', Arial, sans-serif;
}
CODE

Navigation control color

To change the color of the navigation controls, insert:

.reveal .controls {
    color: #42affa;
}
CODE

Progress bar color

You can define two colors for the progress bar: the background color and the color of the progress bar itself:

.reveal .progress {

	/*The color of the background*/
    background: rgba(0, 0, 0, 0.2);

	/*The color of the progress bar*/
    color: #42affa;
}
CODE

We hope you got a first impression of how you can create your first own theme - it will be amazing! ‍

Happy presenting!