Search

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Custom Themes

A Theme is a set of files allowing to change the visual style of a presentation.

You can change the style of a presentation at different levels:
– Using a specific Theme and its CSS
– Using presets
– Depending on your slide content (auto-layout)
– By defining CSS variables in the Style Inspector.

Theme structure

iA
  1. Themes assets.
  2. Presets (Predefined sets of CSS variables)
  3. Custom fonts
  4. Theme CSS definitions
  5. Theme thumbnail
  6. Theme definition

Slides HTML structures

iA

Layouts

Cover

Title

Section

Split

Grid

The Grid layout also has a CSS class indicating the number of grid cells at the slide content DIV level: grid-items-2</ , grid-items-3 , grid-items-4 , etc…

Caption

Image Title

Default (text)

Custom fonts

You need to follow these steps to add a custom font to your theme:
– Add the font files to your theme folder

Roboto-Slab-Regular.woff2
Roboto-Slab-Bold.woff2
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url(Roboto-Slab-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url(roboto-slab-Bold.woff2) format('woff2');
}

Using images from your Theme in CSS

When your custom Theme is installed, iA Presenter preserves the directories structure.

You can then reference an image using the url(...) function. Example:

.backgrounds .default-container{
  background-image: url("image1.jpg");
  background-size: cover;
  background-position: center;
}

Backgrounds

.backgrounds .v-split-container{
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1024 600" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="red" d="m541.526-57.455 584.065 49.14-56.35 669.755-584.065-49.14z"/></svg>');
  background-size: cover;
  background-position: center;
}

If you use inline SVG as url, directly in your CSS files, you need to take care of how you declare colors. Colors in hexadecimal format (like #FFFFFF ) will break your CSS. You will need to use instead of the rgb(0,0,0) format.

Appearances

iA Presenter uses the .dark and .light CSS classes.
– These classes are set per layout.
– You can force the appearance for a specific layout in a custom Theme.

Responsiveness

The themes are responsive. By default, CSS applies to mobile devices.
If you want to target non-mobile devices:

@media (min-width: 768px) {
...
}

You can add additional breakpoints if, for instance, you want to provide different font-size/margins depending on the viewport size. However, iA Presenter already has its logic, and defaults should be enough.

Developing custom themes

  1. Create a new Theme: Go to PreferencesThemes . Click on Create New and enter a name.
  2. Navigate to the new Theme files: Click on the Reveal Themes folder in Finder button. Navigate then to the folder of the newly created Theme.
  3. Use your new Theme: Open a presentation, go to the Style Inspector , and set the newly created Theme.
  4. Bring your modification: Open your Theme.css in your preferred editor and add your custom CSS.

iA Presenter monitors the used Theme and will reload the Preview each time you change it.