Decker Folienerstellung

Foliengestaltung

Sebastian Lukas Hauer

Lehrstuhl für Computergraphik, TU Dortmund

🚀 by Decker

Eigene CSS-Regeln einbinden

Möchten Sie das Design Ihrer Folien selbst bestimmen können Sie entweder ein vollständiges Ressourcenpaket erstellen oder eigene CSS-Dateien in Ihren Foliensatz einbetten.

Zudem haben Sie die Möglichkeit in ihrem Markdown-Quelltext einen <style>-HTML-Abschnitt zu notieren, um in einer einzelnen Datei CSS-Regeln zu definieren:

# Folientitel

[Roter Text]{.red}

<style>
.red {
  color: red;
}
</style>
Style-Tag im Markdownquelltext

Roter Text

CSS-Dateien im decker und tudo Folienstil

Im Standarddesign und TU Dortmund-Design der Folien können CSS-Dateien in Foliensätzen und Webseiten mit folgender Konfigurationsoption eingebunden werden:

template:
    css:
      - dateipfad

Werden Sie in der decker.yaml-Datei konfiguriert so wirken sich die Stilregeln in der Datei sowohl auf Foliensätze als auch auf Webseiten aus.

Wenn Sie die Konfiguration im yaml-Kopf einer Folien bzw. Webseitendatei vornehmen so wirkt sich die eingebundene Datei nur auf den entsprechenden Foliensatz oder Webseite aus.

Globale Konfiguration für deck und page-Dateien

Möchten Sie für Foliensätze und Webseiten unterschiedliche CSS-Dateien einbinden können Sie dies mit den Konfigurationsoptionen template.deck.css und template.page.css einstellen. Stile für die Index-Seite können Sie mit template.index.css einbinden:

template:
  deck:
    css:
      - dateipfad
  page:
    css:
      - dateipfad
  index:
    css:
      - dateipfad

Werden diese Konfigurationen in der decker.yaml vorgenommen wirken sie sich wie gehabt auf alle Dateien im Projekt aus. Werden Sie im yaml-Kopf einer Folien bzw. Webseitendatei vorgenommen wirken sie nur auf die jeweilige Datei.

Beispiel: Eigene CSS-Regeln

In diesem Foliensatz ist eine Beispiel-CSS-Datei mit folgendem Inhalt eingebunden:

.definition {
  background-color: var(--accent3-bg);
  border-left: 5px solid var(--accent3);
  border-radius: 1rem;
  padding-left: 1rem;
  margin: 1rem 0 1rem 0;
}

Der angezeigte Bereich besitzt folgenden Markdownquellcode:

::: definition

## Definition 2.1

Gilt für alle $x \in M$, dass auch $x \in N$, so nennt man $M$ eine Teilmenge von $N$.

Man schreibt auch $M \subseteq N$.

:::

Definition 2.1

Gilt für alle \(x \in M\), dass auch \(x \in N\), so nennt man \(M\) eine Teilmenge von \(N\).

Man schreibt auch \(M \subseteq N\).

CSS-Variablen und Farbpaletten in Decker

Die Grundstile, die Decker für die Darstellung seiner Präsentationen und Webseiten verwendet, stellen eine Reihe von CSS-Variablen bereit, die Sie weiter verwenden können, um den Stil Ihrer eigenen CSS-Klassen mit denen des Grundstils einheitlich zu halten.

Eine Übersicht über diese Variablen finden Sie in der dafür vorgesehenen Anleitung.

Wenn Sie nur Anpassungen an den verwendeten Farben vornehmen möchten können Sie dies auch durch Anpassen der Farbpalette umsetzen.

Anleitungen für CSS

Eine vollständige Anleitung für das Schreiben von CSS-Dateien können wir Ihnen hier nicht anbieten. Bitte machen Sie von den üblichen Webtutorials gebrauch: