# PDF Customization using custom CSS

Folge uses HTML and CSS to create and generate PDF documents. App forms HTML document, adds internal CSS styles and then converts it all into a pdf document. This means that you can use custom CSS styles to customize final output, change font sizes, colors, backgrounds etc.

# Custom CSS location

To access this functionality open any guide, click Export -> PDF Document -> Custom CSS.
Paste your CSS in the text area. It will be injected in the HTML document right after all other styles.

An image

# HTML Structure

# Document overview

The resulting HTML consists of multiple <section> tags, where each <section> represents the page in PDF.

<body>
  <section class="sheet coverPage">
    <!-- See cover page structure below -->
  </section>

  <section class="sheet tocPage">
    <!-- See TOC page structure below -->
  </section>

  
  <section class="sheet stepsPage">
    <!-- See steps page structure below -->
  </section>

  <section class="sheet stepsPage">
    <!-- See steps page structure below -->
  </section>

    <!-- stepsPage continues for each page with steps -->
</body>

# Cover page structure

Cover page won't be included if respective option is chosen in the PDF Export Settings

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

# Table of Contents page structure

Table of Contents page won't be included if respective option is chosen in the PDF Export Settings

  <section class="sheet tocPage">
    <div class="header">
      <!-- See header structure below -->
    </div>
    <div class="tocWrapper">
      <h3 class="tocTitle">
        <!-- Table of contents title -->
      </h3>
      <div class="tocItem nested"> <!-- Class `nested` is added when tocItem is a substep -->
        <a href="#step-0" class="link">
          <!-- Step 1 title -->
        </a>
        <span class="tocItemPageNumber"> <!-- Span that is filled with page number where step is located --></span>
      </div>
      <div class="tocItem">
        <a href="#step-1" class="link">
          <!-- Step 2 title -->
        </a>
        <span class="tocItemPageNumber"> <!-- Span that is filled with page number where step is located --></span>
      </div>
      <!-- tocItem continues for each step -->
    </div>
    <div class="footer">
      <!-- See footer structure below -->
    </div>
  </section>

# Step page structure

WARNING

Internal steps enumeration starts with 0

Each step page consists of one header, one stepPageContent and one footer tags. Header and footer might be disabled if chosen in the PDF Export Settings

  <section class="sheet stepsPage">
    <div class="header">
      <!-- See header structure below -->
    </div>

    <div class="stepPageContent">
      <div class="stepTitle" id="step-0">
        <div class="stepTitleIndex"><!-- Step 1 index --></div>
        <div class="stepTitleText"><!-- Step 1 title --></div>
      </div>
      <p> <!-- Step 1 description goes here --> </p>
      <div class="stepImage">
        <!-- Step 1 Image -->
        <img src="./steps/step-1-image.jpeg" width="300px" height="300px">
      </div>

      <div class="stepTitle" id="step-1">
        <!-- Step 2 title -->
      </div>
      <div class="stepTextBlock"><!-- Optional text block. See below for the full structure --> </div>
      <p> <!-- Step 2 description goes here --> </p>
      <div class="stepImage">
        <!-- Step 2 Image -->
        <img src="./steps/step-2-image.jpeg" width="300px" height="300px">
      </div>
    </div>
    <div class="footer">
      <!-- See footer structure below -->
    </div>

  </section>

stepPageContent has all the steps that were chosen to fit into this page. So if Step content flow option is set to One step per page, only one step will be in stepPageContent. If other two, then stepPageContent might have multiple steps in it.

# Header and footer structures

Header and footer consist of 3 columns, where logo position will define columns order.

<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"><!-- Footer pagination text--> </div></div>
  </div>
</div>

# Step Text Block structure

Step text block is injected before, inside or after steps. TYPE can be one of the following: alert, info, warning, success

<div class="stepTextBlock {{TYPE}}">
  <div class="stepTextBlockIcon">
    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><!-- svg iconpath --></svg>
  </div>
  <div class="stepTextBlockContent">
  <div class="stepTextBlockTitle"><!--  Text block title --> </div>
  <div class="stepTextBlockDescription"><!--  Text block description --> </div>
</div>

← Markdown export Rich HTML customization with CSS →