Folge User Manual

# Rich HTML Customization using custom CSS

WARNING

This feature is available in version 1.5.0 and onwards

You can inject your CSS into rich 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 -> Rich 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 <div class="guideDetailsWrapper"> and multiple <div class="stepCard">. 

<body class="bg">
  <div class="topSection">
    <div class="container grid-lg text-center guideDetailsWrapper">
      <h2 class="headline title"><!-- Guide title --></h2>
      <span class="description"><!-- Guide description --></span>
    </div>
  </div>
  <div class="section">
      <div class="container grid-md">
        <div class="columns flex-centered">
          <div class="column col-xs-10 col-md-10 col-xl-10">
            <div class="card stepCard" data-step-id="step-1">

              <div class="card-header card-title h5 headline" id="step-1">
                <label class="form-checkbox">
                  <input type="checkbox" class="completionCheckbox" data-step-id="step-1">
                  <i class="form-icon"></i>
                </label>
                <div class="stepTitle">
                  <!-- Step 1 title -->
                </div>
              </div>
              <div class="card-body stepDescription"><!-- Step 1 description --></div>
                <div class="card-image"><img src="<!-- Step 1 path to image -->" class="img-responsive stepImage"/></div>
            </div>
          </div>
        </div>
    </div>
  </body>

← Simple HTML customization with CSS →