Pro Feature

Custom Layouts Guide

Learn how to create fully branded, custom HTML templates for your documentation.

Read Guide

Custom Layout Guide for ArkScribe Pro

Overview

ArkScribe Pro allows you to create custom HTML layouts to brand and style your exported guides. This guide explains how to create, customize, and use your own layout templates.

Prerequisites

  • ArkScribe Pro License - Custom layouts are a Pro-only feature
  • Basic HTML/CSS Knowledge - Understanding of HTML structure and CSS styling
  • Text Editor - Any code editor (VS Code, Notepad++, Sublime, etc.)

Quick Start

Step 1: Create Your Layout File

  1. Create a new file with .html extension (e.g., my-layout.html)
  2. Start with the default template (provided below)
  3. Customize the HTML and CSS to match your brand
  4. Save the file

Step 2: Upload Your Layout

  1. Open ArkScribe and go to Preview & Export page
  2. Under Layout section, click "Upload" button
  3. Select your custom HTML file
  4. You'll see a success message: "Custom layout uploaded successfully!"

Step 3: Export Your Guide

  1. Your custom layout is now active
  2. Click "Export All" to generate guides with your custom design
  3. All HTML and PDF exports will use your layout

Layout Structure

Required Placeholders

Your layout must include these placeholders:

Placeholder Description Example Output
<GUIDE_TITLE> Guide name "User Registration Guide"
<GUIDE_DESCRIPTION> Guide description "Learn how to create an account"
<BEGIN_STEPS> Start of step template (marker only)
<END_STEPS> End of step template (marker only)
<STEP_NUMBER> Step number with format "Step 1:", "1.", "#1", or ""
<STEP_TITLE> Step description "Click on Sign Up button"
<STEP_DESCRIPTION> Optional step details "Make sure to use a strong password"
<STEP_SCREENSHOT> Step image (if exists) <img> or empty

Template Anatomy

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title><GUIDE_TITLE></title>
 <style>
 /* Your custom CSS styles */
 </style>
</head>
<body>
 <!-- Header/Title Section -->
 <h1><GUIDE_TITLE></h1>
 <div class="guide-description"><GUIDE_DESCRIPTION></div>

 <!-- Steps Section -->
 <BEGIN_STEPS>
 <div class="step">
 <h2><STEP_NUMBER><STEP_TITLE></h2>
 <div class="step-description"><STEP_DESCRIPTION></div>
 <STEP_SCREENSHOT>
 </div>
 <END_STEPS>

 <!-- Footer Section -->
 <div class="footer">Created with ArkScribe</div>
</body>
</html>

Default Template (Copy & Customize)

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title><GUIDE_TITLE></title>
 <style>
 body { 
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
 max-width: 900px; 
 margin: 40px auto; 
 padding: 20px;
 background: #ccc;
 min-height: 100vh;
 }
 .guide-container {
 background: white;
 border-radius: 12px;
 padding: 40px;
 box-shadow: 0 10px 40px rgba(0,0,0,0.1);
 }
 h1 { 
 color: #667eea; 
 border-bottom: 3px solid #667eea; 
 padding-bottom: 15px;
 margin-bottom: 10px;
 font-size: 2.5em;
 }
 .guide-description {
 color: #666;
 font-size: 1.1em;
 line-height: 1.6;
 margin-bottom: 30px;
 padding: 15px;
 border-radius: 4px;
 }
 .step {
 background: #fafbfc;
 margin: 25px 0; 
 padding: 25px;
 border-radius: 10px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.08);
 }
 .step h2 { 
 color: #667eea;
 margin-bottom: 12px;
 font-size: 1.5em;
 }
 .step-description {
 color: #333;
 line-height: 1.8;
 margin-bottom: 15px;
 font-size: 1.05em;
 }
 .step img { 
 max-width: 100%; 
 border: 2px solid #e5e7eb; 
 border-radius: 8px;
 margin-top: 15px;
 }
 .footer {
 text-align: center;
 color: #999;
 font-size: 0.9em;
 margin-top: 50px;
 padding-top: 30px;
 border-top: 2px solid #e5e7eb;
 }
 </style>
</head>
<body>
 <div class="guide-container">
 <h1><GUIDE_TITLE></h1>
 <div class="guide-description"><GUIDE_DESCRIPTION></div>

 <BEGIN_STEPS>
 <div class="step">
 <h2><STEP_NUMBER><STEP_TITLE></h2>
 <div class="step-description"><STEP_DESCRIPTION></div>
 <STEP_SCREENSHOT>
 </div>
 <END_STEPS>

 <div class="footer">
 Created with ArkScribe
 </div>
 </div>
</body>
</html>

Customization Examples

Example 1: Corporate/Professional Style

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title><GUIDE_TITLE></title>
 <style>
 body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 max-width: 1000px;
 margin: 0 auto;
 padding: 40px;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 min-height: 100vh;
 }
 .container {
 background: white;
 border-radius: 8px;
 padding: 60px;
 box-shadow: 0 20px 60px rgba(0,0,0,0.3);
 }
 .header {
 border-left: 5px solid #667eea;
 padding-left: 20px;
 margin-bottom: 40px;
 }
 h1 {
 color: #2c3e50;
 font-size: 2.8em;
 margin: 0 0 10px 0;
 font-weight: 700;
 }
 .guide-description {
 color: #7f8c8d;
 font-size: 1.2em;
 line-height: 1.6;
 }
 .step {
 background: #f8f9fa;
 border-left: 4px solid #667eea;
 margin: 30px 0;
 padding: 30px;
 border-radius: 4px;
 }
 .step h2 {
 color: #667eea;
 font-size: 1.6em;
 margin: 0 0 15px 0;
 font-weight: 600;
 }
 .step-description {
 color: #555;
 line-height: 1.8;
 margin-bottom: 20px;
 font-size: 1.1em;
 }
 .step img {
 max-width: 100%;
 border: 1px solid #dee2e6;
 border-radius: 4px;
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
 .footer {
 text-align: center;
 color: #adb5bd;
 font-size: 0.9em;
 margin-top: 60px;
 padding-top: 30px;
 border-top: 1px solid #dee2e6;
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="header">
 <h1><GUIDE_TITLE></h1>
 <div class="guide-description"><GUIDE_DESCRIPTION></div>
 </div>

 <BEGIN_STEPS>
 <div class="step">
 <h2><STEP_NUMBER><STEP_TITLE></h2>
 <div class="step-description"><STEP_DESCRIPTION></div>
 <STEP_SCREENSHOT>
 </div>
 <END_STEPS>

 <div class="footer">
 Documentation - <strong>Your Company Name</strong> - 2025
 </div>
 </div>
</body>
</html>

Advanced Customization

Adding Your Logo

<style>
 .logo {
 max-width: 200px;
 margin-bottom: 20px;
 }
</style>

<body>
 <img src="data:image/png;base64,YOUR_BASE64_LOGO_HERE" class="logo">
 <h1><GUIDE_TITLE></h1>
 <!-- rest of layout -->
</body>

Important Notes

What Gets Replaced

  1. Guide Title/Description - Replaced once at the top
  2. Step Section - Everything between <BEGIN_STEPS> and <END_STEPS> is repeated for each step
  3. Step Placeholders - Replaced per step iteration
  4. Screenshot - Replaced with <img> tag or empty string

What Doesn't Work

  • External Resources - No external CSS/JS files (embed everything inline)
  • Server-Side Code - No PHP, Python, etc. (HTML/CSS only)
  • JavaScript - Will work in HTML exports but not in PDF generation

Best Practices

  • Inline All Styles - Put CSS in <style> tags, not external files
  • Use Base64 for Images - Embed logos/icons as data URLs
  • Test Before Exporting - Use Preview button to check layout
  • Keep It Simple - Complex layouts may not render well in PDFs
  • Mobile-Friendly - Use responsive design principles
  • Print Styles - Add @media print rules for better PDFs

Troubleshooting

Layout Not Applying

Problem: Export still uses default layout
Solution:

  • Make sure you clicked "Upload" button (not "Default")
  • Check that file has .html extension
  • Try uploading again

Missing Steps

Problem: Steps don't appear in export
Solution:

  • Ensure <BEGIN_STEPS> and <END_STEPS> markers exist
  • Check that step template is between these markers
  • Placeholders are case-sensitive

Broken Images

Problem: Screenshots not showing
Solution:

  • <STEP_SCREENSHOT> placeholder must be in step template
  • Images are automatically embedded as base64
  • Check browser console for errors

PDF Looks Wrong

Problem: PDF layout differs from HTML preview
Solution:

  • PDFs use html2pdf with limitations
  • Simplify complex CSS (avoid transforms, animations)
  • Add print-specific styles with @media print
  • Test with smaller guides first

Need Help? Check the Help section in ArkScribe or visit the support page.

Back to Help Center
:

Ready to Create Perfect Guides in Minutes?

Stop repeating yourself. Start using ArkScribe to automatically document your workflows and create crystal-clear guides that your team and customers can follow.

Install Extension

Want best out of this? upgrade to pro to get maximum from this.