Custom Styling
A Guide to Creating Memorable Presentations
September 22, 2025
Samantha Monty
Chair for Human-Computer Interaction, University of Würzburg

Table of Contents

Custom CSS

Customize the look of your presentation with custom CSS added with the meta-data variable template.css.

Syntax

decker.yaml

template:
  css: custom.css

custom.css

.red-font {
  color: #ff0000;
}
.blue-font {
    color: #0000ff;
}

Markdown

## Red font {.red-font}
This is red text!!

## Blue font

## {.blue-font}
This is blue font

Result

Red font

This is red text!!

Blue font

This is blue font

Background Image

Set an image as the slide background by adding ![](<image.path>){size="cover"} to a level 1 header. Replace <image.path> with the path of the background image.

Syntax

# Background Image Example ![](/assets/organization.jpg){size="cover"}{.grid}

## {.left}

![Prof. Dr. Marc Erich Latoschik](/img/marc.jpg){width=50%} 

## {.right}

![Dr. Jean-Luc Lugrin](/img/jll.jpg){width=50%} 

## ![](/assets/hci-jmu-logo.png){width=30%} Human-Computer Interaction | Universität Wuerzburg {.bottom}

Result

See next slide.

Background Image Example

img/marc.jpg
Prof. Dr. Marc Erich Latoschik

img/jll.jpg
Dr. Jean-Luc Lugrin

assets/hci-jmu-logo.png Human-Computer Interaction | Universität Wuerzburg

Background Color

Set a color as the slide background by adding {style="background-color:<COLOR>"} to the level 1 header. Replace <COLOR> with the color you wish to use e.g. #ff0000.

Syntax

# Background Color Example {style="background-color:#90D5FF" .grid} 

## {.left}

![Prof. Dr. Marc Erich Latoschik ](/img/marc.jpg){width=50%} 

## {.right}

![Dr. Jean-Luc Lugrin](/img/jll.jpg){width=50%} 

## ![](/assets/hci-jmu-logo.png){width=30%} Human-Computer Interaction | Universität Wuerzburg {.bottom}

Result

See next slide.

Background Color Example

img/marc.jpg
Prof. Dr. Marc Erich Latoschik

img/jll.jpg
Dr. Jean-Luc Lugrin

assets/hci-jmu-logo.png Human-Computer Interaction | Universität Wuerzburg

Presentation Background

Include a background image on all slides (e.g. the Uni Würzburg banner) by adding the following code to the CSS file (replace /assets/title-banner-jmu.jpg with the location of your title banner file):

Syntax

body {
  background: url( "/assets/title-banner-jmu.jpg" );
  background-size: contain;
  background-repeat: no-repeat;
}

Keep in mind that if a slide has a lot of text content it is possible that the slide title will overlay the banner