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

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

Step 2: Upload Your Layout

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

Step 3: Export Your Guide

Your custom layout is now active
Click "Export All" to generate your guides.
Your custom layout is for HTML exports only. PDF files are generated using a separate internal process and are completely unaffected by your custom layout template.

Using AI to Create Layouts

You don't need to be an HTML/CSS expert to create a stunning layout. You can leverage AI assistants like Google Gemini, ChatGPT, or Claude to generate the code for you.

How to Use AI:

Provide Context: Copy the key information from this guide and give it to the AI. You should include:
- The entire "Layout Structure" section (to explain the required placeholders).
- The full code from the "Default Template" section (to give the AI a valid starting point).
Write a Clear Prompt: Tell the AI exactly what you want. Be descriptive.
Example Prompt:
"I need to create a custom HTML layout for a documentation tool called ArkScribe. The layout must use specific placeholders. You must preserve these placeholders exactly as they are.
Here is the documentation explaining the structure and placeholders: [Paste the 'Layout Structure' section here]
And here is the default template to start from: [Paste the 'Default Template' code here]
Now, please create a new layout with a modern, minimalist design. Use a dark theme with a green accent color for headings. The main font should be Inter. Please make it fully responsive."
Iterate: The AI might not get it perfect on the first try. You can ask for changes, like "Can you make the font size for the step description smaller?" or "Add a placeholder for our company logo in the header."
Test: Once you're happy with the generated code, save it to an .html file and upload it to ArkScribe to see how it looks.

This approach is a fantastic way to produce highly customized, professional layouts without writing code from scratch.

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>

Example 2: Interactive Carousel Style

This example demonstrates using an external font (Lato) and an external JavaScript library (Flickity) to create a step-by-step guide where each step is a slide in a carousel.

Note: This layout will appear as a simple list in the in-app preview but will become an interactive carousel in the final exported HTML file.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title><GUIDE_TITLE></title>

 <!-- 1. External Fonts and CSS -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

 <style>
 body {
 font-family: 'Lato', sans-serif;
 background-color: #f0f2f5;
 margin: 0;
 padding: 40px 0;
 }
 .guide-header {
 max-width: 900px;
 margin: 0 auto 30px auto;
 padding: 0 20px;
 }
 h1 {
 font-size: 2.8em;
 font-weight: 700;
 color: #1c1e21;
 margin-bottom: 5px;
 }
 .guide-description {
 font-size: 1.2em;
 color: #606770;
 }
 .main-carousel {
 max-width: 1000px;
 }
 .carousel-cell {
 width: 80%;
 max-width: 800px;
 margin-right: 40px;
 background: #ffffff;
 border-radius: 12px;
 box-shadow: 0 5px 25px rgba(0,0,0,0.1);
 padding: 30px;
 display: flex;
 flex-direction: column;
 }
 .step-header {
 padding-bottom: 15px;
 border-bottom: 1px solid #e5e7eb;
 }
 .step-header h2 {
 font-size: 1.8em;
 color: #333;
 margin: 0;
 }
 .step-content {
 padding-top: 15px;
 flex-grow: 1;
 }
 .step-description {
 font-size: 1.1em;
 line-height: 1.7;
 color: #444;
 }
 .step-content img {
 max-width: 100%;
 border-radius: 8px;
 margin-top: 20px;
 }
 /* Flickity button styling */
 .flickity-prev-next-button {
 width: 60px;
 height: 60px;
 background: #fff;
 box-shadow: 0 2px 10px rgba(0,0,0,0.2);
 }
 .flickity-prev-next-button .flickity-button-icon {
 fill: #333;
 }
 </style>
</head>
<body>

 <div class="guide-header">
 <h1><GUIDE_TITLE></h1>
 <p class="guide-description"><GUIDE_DESCRIPTION></p>
 </div>

 <!-- 2. Carousel Container -->
 <div class="main-carousel">
 <BEGIN_STEPS>
 <div class="carousel-cell">
 <div class="step-header">
 <h2><STEP_NUMBER> <STEP_TITLE></h2>
 </div>
 <div class="step-content">
 <div class="step-description"><STEP_DESCRIPTION></div>
 <STEP_SCREENSHOT>
 </div>
 </div>
 <END_STEPS>
 </div>

 <!-- 3. External JavaScript -->
 <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
 <!-- 4. Google Analytics or other scripts -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID"></script>
 <script>
 // Initialize Flickity Carousel
 var elem = document.querySelector('.main-carousel');
 var flkty = new Flickity( elem, {
 cellAlign: 'left',
 contain: true,
 pageDots: false,
 wrapAround: true
 });

 // Initialize Google Analytics
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', 'YOUR_GA_ID');
 </script>

</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

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

Important Considerations

External Resources: External resources like fonts, CSS, or JavaScript from a CDN will not load in the in-app preview due to browser security restrictions. However, they will work perfectly in the final exported HTML file.
JavaScript: JavaScript only works in HTML exports. It will not run during PDF generation, and custom layouts do not apply to PDFs anyway.
Server-Side Code: Server-side code (like PHP or Python) is not supported, as layouts are for frontend HTML only.

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
Mobile-Friendly - Use responsive design principles

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

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

Back to Help Center

Custom Layouts Guide