Folge User Manual

# PDF Customization with Custom CSS

Folge uses HTML and CSS to generate PDF documents. It builds an HTML document, applies internal CSS styles, and converts it to PDF. You can inject your own CSS to customize the final output - change fonts, colors, spacing, backgrounds, and more.

# Custom CSS location

Open any guide, click Export → PDF Document, then find the Custom CSS field in the export settings.

Paste your CSS there. It will be injected after all built-in styles, so your rules take precedence.

Custom CSS field in export settings

# HTML Structure

# Document overview

The PDF is built from multiple <section> tags, each representing a page:

<body>
  <section class="sheet coverPage">
    <!-- Cover page -->
  </section>

  <section class="sheet tocPage">
    <!-- Table of contents -->
  </section>

  <section class="sheet stepsPage">
    <!-- Steps (one or more per page depending on layout) -->
  </section>

  <!-- More stepsPage sections as needed -->
</body>

Sections may also have a landscape class when landscape orientation is selected.

# Cover page

The cover page is optional - it can be toggled in PDF Export Settings. It shows the guide title and description:

<section class="sheet coverPage">
  <div class="guideDetailsWrapper">
    <h2 class="title"><!-- Guide title --></h2>
    <div class="description">
      <!-- Guide description (rich text) -->
    </div>
  </div>
</section>

# Table of contents

Also optional. Controlled in PDF Export Settings.

<section class="sheet tocPage">
  <div class="header"><!-- Header --></div>
  <div class="tocWrapper">
    <h3 class="tocTitle"><!-- Table of contents title --></h3>

    <div class="tocItem">
      <a href="#step-0" class="link"><!-- Step title --></a>
      <span class="tocItemPageNumber"><!-- Page number --></span>
    </div>

    <div class="tocItem nested-1">
      <!-- Substep (level 1 nesting) -->
      <a href="#step-1" class="link"><!-- Substep title --></a>
      <span class="tocItemPageNumber"><!-- Page number --></span>
    </div>

    <!-- More tocItems... -->
  </div>
  <div class="footer"><!-- Footer --></div>
</section>

Substeps get a nested-N class where N indicates the nesting depth (nested-1 for 2.1, nested-2 for 2.1.1, etc.).

# Step page - standard layout

Each step page has a header, content area, and footer. The header and footer are optional.

<section class="sheet stepsPage">
  <div class="header"><!-- Header --></div>

  <div class="stepPageContent">
    <div class="stepTitle">
      <div class="stepTitleIndex"><!-- Step number badge --></div>
      <div class="stepTitleText"><!-- Step title --></div>
    </div>
    <div class="stepDescription"><!-- Step description (rich text) --></div>
    <div class="stepImage">
      <img src="...">
    </div>
  </div>

  <div class="footer"><!-- Footer --></div>
</section>

Substeps have additional classes on both .stepTitle and .stepDescription:

<div class="stepTitle subStep subStep-1">
  <!-- subStep-1 = first nesting level (e.g. 2.1) -->
  <!-- subStep-2 = second level (e.g. 2.1.1) -->
</div>
<div class="stepDescription subStep subStep-1"><!-- ... --></div>

# Content blocks

A content block is a special kind of step that has no screenshot and no step number - it acts as a section divider or heading inside the guide. In the generated HTML it replaces the regular .stepTitle / .stepImage markup with a single .contentBlockTitle element (the description, if any, still renders below it as .stepDescription):

<section class="sheet stepsPage">
  <div class="header"><!-- Header --></div>

  <div class="stepPageContent">
    <div class="contentBlockTitle"><!-- Content block title --></div>
    <div class="stepDescription"><!-- Rich text description --></div>
  </div>

  <div class="footer"><!-- Footer --></div>
</section>

Content blocks inherit the step title font and color settings by default. In the Two-column (image + text) layout, a content block becomes a full-width row with no image column:

<div class="step-table-row step-table-row-noimage">
  <div class="step-table-col step-table-col-text step-table-col-text-full">
    <div class="contentBlockTitle"><!-- Content block title --></div>
    <div class="stepDescription"><!-- Description --></div>
  </div>
</div>

# Step page - two-column layout

When Layout is set to Two-column (image + text), each step is a row with the screenshot in one column and the number, title and description in the other:

<div class="step-table-row step-table-row-first">
  <div class="step-table-col step-table-col-image">
    <div class="step-table-image-frame">
      <div class="stepImage"><img src="..."></div>
    </div>
  </div>
  <div class="step-table-col step-table-col-text">
    <span class="step-table-badge"><!-- Step number --></span>
    <span class="step-table-title"><!-- Step title --></span>
    <div class="stepDescription"><!-- Step description --></div>
  </div>
</div>

When a description is too long for one page, it continues in a new row. That row keeps an empty image column so the image side stays continuous:

<div class="step-table-row step-table-row-cont">
  <div class="step-table-col step-table-col-image step-table-col-image-empty"></div>
  <div class="step-table-col step-table-col-text"><!-- Rest of the description --></div>
</div>

Row classes:

  • step-table-row-first - the first row of a step (image + text)
  • step-table-row-cont - continuation row (description overflow)
  • step-table-row-noimage - full-width text row (no image column, or content block)
  • step-table-row-page-first / step-table-row-page-last - first and last row on a page (rounded corners, bottom border)

The image column has a light grey background (#f7f8fa) by default. The Image position setting can put the image on the right, so don't assume it is always on the left.

Header and footer each have a 3-column layout. Logo placement (left, center, or right) determines column arrangement.

<div class="header">
  <div class="columns">
    <div class="column col-1">&nbsp;</div>
    <div class="column col-9 text-center">
      <div class="headerText"><!-- Header text --></div>
    </div>
    <div class="column col-2 text-right">
      <img class="headerLogo img-responsive" src="">
    </div>
  </div>
</div>

<div class="footer">
  <div class="columns">
    <div class="column col-2 text-left">
      <img class="footerLogo img-responsive" src="">
    </div>
    <div class="column col-8 text-center">
      <div class="footerText"><!-- Footer text --></div>
    </div>
    <div class="column col-2 text-right">
      <div class="footerNumbering"><!-- Page number --></div>
    </div>
  </div>
</div>

# Text blocks

Text blocks can be positioned before or after titles, descriptions, and images. Each has a type: alert, info, warning, or success.

<div class="stepTextBlock warning">
  <div class="stepTextBlockIcon">
    <!-- SVG icon for the block type -->
  </div>
  <div class="stepTextBlockContent">
    <div class="stepTextBlockTitle"><!-- Block title --></div>
    <div class="stepTextBlockDescription"><!-- Block content --></div>
  </div>
</div>

# Multi-image substeps

Steps that contain multiple images produce repeated blocks inside .stepPageContent, one per sub-image:

<div class="multiImageSubstepTitle"><!-- Substep title --></div>
<div class="multiImageSubstepDescription"><!-- Substep description --></div>
<div class="stepImage"><img src="..."></div>

The order of title / description / image is controlled by the step's block settings.

# CSS Examples

Here are some practical examples to get you started.

# Change step title color and size

.stepTitleText {
  color: #2c3e50;
  font-size: 22px;
}

# Hide step number badges

.stepTitleIndex {
  display: none;
}

# Add a border around step images

.stepImage img {
  border: 2px solid #e0e0e0;
  border-radius: 4px;
}

# Change cover page background

.coverPage {
  background-color: #1a1a2e;
}
.coverPage .title {
  color: #ffffff;
}

# Indent substeps in table of contents

.tocItem.nested-1 { padding-left: 20px; }
.tocItem.nested-2 { padding-left: 40px; }

# Style text blocks by type

.stepTextBlock.warning {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
}
.stepTextBlock.info {
  background-color: #d1ecf1;
  border-left: 4px solid #17a2b8;
}

# Reduce spacing between steps

.stepTitle {
  margin-top: 10px;
}
.stepImage {
  margin-bottom: 10px;
}

# Style content blocks differently from step titles

By default, content blocks inherit the step title styling. To give them their own look:

.contentBlockTitle {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a2e;
  border-bottom: 2px solid #1a1a2e;
  padding-bottom: 0.3em;
  margin: 1em 0 0.5em;
}

# Change the image column background in two-column layout

The grey behind step images comes from .step-table-col-image. Empty image columns on continuation rows share that class, so one rule covers both:

.step-table-col-image {
  background: #ffffff; /* any color, or transparent */
}

# Remove all borders in two-column layout

.step-table-row {
  border: 0;
  background: none;
}

All built-in row and column selectors use single classes, and your custom CSS loads after them, so plain rules like these are enough to override them. No !important needed.

← Rich HTML customization with CSS →