Welcome!

Customizing a Slide Deck

Customizing a MARP slide deck can significantly enhance your presentations' visual appeal and effectiveness. Personalizing the design and layout can create a more professional and tailored experience for your audience. Here are some ways to achieve customization:

Using internal CSS style

Using CSS (Cascading Style Sheets), you can control the appearance of elements within a slide. CSS allows you to modify fonts, colors, sizes, margins, and other visual aspects.

A <style> block written in a slide applies only to that slide in the built video. Lupo renders every slide as its own Marp document, made of the file's front matter plus that slide's content, so the block never reaches the other slides. This differs from the Marp preview in VS Code, where the same block restyles the whole deck. Use it for one-slide effects; for the whole deck, use a theme (below).

Example

<style>
    section {
        background-color: #c9ee;
    }
</style>

Styling the whole deck with a theme

Deck-wide styling lives in a theme: a CSS file in your project that the Markdown file selects with the theme: line of its front matter. The project template ships one at themes/customtheme.css, selected with theme: customtheme.

Three things have to agree for the theme to be applied in a build:

The CSS file is named after the theme (customtheme.css) and starts with the Marp theme header, for example:
```
/* @theme customtheme */
@import 'default';
section {
    background-color: #c9ee;
}
```
The file is listed in the project's .vscode/settings.json under markdown.marp.themes (the template lists ./themes/customtheme.css). Lupo finds themes only through that list: a theme named in the front matter but not listed there is reported as a warning ("The theme 'customtheme' mentioned in 'file.md' is not found in 'settings.json'") and the slides are built without it.
The Markdown file's front matter names it: theme: customtheme.

These files are part of the project the Lupo team sets up with you. See Markdown Configuration for how that setup starts and Project Structure Template for where the files live in a project.

Using Marp Directives

Lupo utilizes Marp, a powerful Markdown-based presentation tool that offers two types of directives: global and local.

Global Directives

Global directives in Marp are applied to the entire slide deck, affecting all slides uniformly. These directives are set in the front matter at the beginning of your Markdown file. Lupo puts that same front matter in front of every slide it builds, so they apply to every slide of the built video too.

Local Directives

Local directives in Marp allow you to override global settings and apply customization per slide, written as an HTML comment inside the slide. Because Lupo builds each slide separately, a local directive applies only to the slide it is written on, even without the _ prefix that limits it to one slide in Marp. Keep directive comments separate from narration comments.