Folge User Manual

# Simple HTML Customization using custom CSS

WARNING

This feature is available in version 1.5.0 and onwards

You can inject your CSS into html guides generated by Folge during generation, and 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 -> HTML File -> 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 one <p class="guideDetailsWrapper"> and multiple <div class="stepCard">. 

<body>
  <p class="guideDetailsWrapper">
    <h2 class="headline title">
      <!-- Guide title -->
    </h2>
    <span class="description"><!-- Guide description --></span>
  </p>

  <div class="stepCard">
    <p class="stepTitle">
      <!-- Step 1 title -->
    </p>

    <p class="stepDescription"><!-- Step 1 description goes here --></p>
    <br/>
    <p>
      <img 
      src="<!-- Step 1 base64 image representation-->" 
      class="img-responsive stepImage" 
      data-image-path="<!-- Step 1 path to image -->" 
      />
    </p>
  </div>

  <div class="stepCard">
    <p class="stepTitle">
      <!-- Step 2 title -->
    </p>

    <p class="stepDescription"><!-- Step 2 description goes here --></p>
    <br/>
    <p>
      <img 
      src="<!-- Step 2 base64 image representation-->" 
      class="img-responsive stepImage" 
      data-image-path="<!-- Step 2 path to image -->" 
      />
    </p>
  </div>
</body>

← Application Settings →