Vellora Template Documentation

Introduction

Thank you for choosing Vellora. This documentation will guide you through every aspect of the template, from initial setup to advanced customization.

Vellora is a handcrafted, editorial-style blog and magazine website template designed for writers, publishers, and content creators who value beautiful typography and thoughtful design. Built with clean HTML5, modern CSS3, and vanilla JavaScript, it offers a complete content management experience with both public-facing pages and a fully functional admin panel.

Unlike generic blog templates, Vellora embraces an editorial aesthetic inspired by premium magazines like Monocle, Cereal, and Kinfolk. Every detail, from the warm cream background to the elegant serif headings, has been carefully considered to create a reading experience that feels intentional and human.

Key Features

A carefully curated set of features designed to deliver a premium editorial experience.

File Structure

A clear, organized structure that makes navigation and customization straightforward.

The Vellora template is organized into a flat file structure with clear naming conventions. All public pages sit at the root level alongside their shared CSS and JavaScript files, while admin pages are prefixed with admin- for easy identification.

Installation

Get Vellora up and running in just a few simple steps.

Step-by-Step Setup

1. Download and extract the template files to your desired location.
2. Open index.html in your browser to preview the template.
3. Replace placeholder content with your own articles, images, and information.
4. Upload to your web server or hosting platform (Netlify, Vercel, GitHub Pages, etc.).
5. Customize the theme by editing CSS variables in style.css.

Quick Start with Local Server

For the best development experience, run a local server. Here are a few options:

# Using Python 3
python -m http.server 8000

# Using Node.js (http-server)
npx http-server

# Using PHP
php -S localhost:8000

Then open http://localhost:8000 in your browser.

Dependencies

External libraries loaded via CDN for optimal performance.

Vellora uses a carefully selected set of external libraries, all loaded from reliable CDNs. No build step or package manager is required.

CDN Links Reference

All CDN links are included in each HTML file's <head> section. Here's the complete list for reference:

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Bootstrap 5.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- FontAwesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- AOS Animations -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<!-- Quill.js (Admin only) -->
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>

<!-- Masonry (Blog pages) -->
<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>

Pages Overview

A comprehensive breakdown of all 16 pages included in the template.

Public Pages

These are the visitor-facing pages of your magazine. All public pages share the same navigation, footer, search overlay, and mobile drawer.

Admin Pages

The admin panel provides a complete content management experience. All admin pages share the same sidebar navigation and top navbar.

Customization

Make Vellora your own by customizing colors, typography, and layout.

Color Palette

Vellora uses a warm, editorial color palette designed to feel inviting without being distracting. All colors are defined as CSS variables at the top of style.css for easy customization.

Typography

Vellora uses a carefully chosen font pairing that balances elegance with readability. The serif font Fraunces is used for all headings and editorial elements, while Inter handles body text and UI elements.

Changing Fonts

To change the fonts, update both the Google Fonts link in your HTML and the CSS variables:

<!-- Replace with your chosen fonts -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Source+Sans+Pro:wght@300;400;500;600&display=swap" rel="stylesheet">

:root {
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Source Sans Pro', -apple-system, sans-serif;
}

CSS Variables Reference

All theme values are defined as CSS custom properties in style.css. Edit these to change the entire look of the site:

:root {
  /* Colors */
  --color-bg: #FDFBF7;
  --color-bg-alt: #F0EBE1;
  --color-bg-warm: #FAF7F2;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6560;
  --color-text-light: #8A847D;
  --color-accent: #8B2635;
  --color-accent-hover: #6F1E2A;
  --color-border: #E5E1D8;
  --color-white: #FFFFFF;

  /* Typography */
  --font-serif: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', 'Source Sans Pro', -apple-system, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 780px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

Content Guide

How to replace placeholder content with your own articles, images, and information.

Throughout the template, you will find HTML comments marking content that should be customized. Look for comments like:

<!-- UPDATE WITH YOUR CONTENT -->
<!-- UPDATE WITH YOUR AUTHOR IMAGE -->
<!-- UPDATE WITH YOUR SOCIAL LINKS -->
<!-- UPDATE WITH YOUR ADDRESS -->
<!-- UPDATE WITH YOUR EMAIL -->
<!-- UPDATE WITH YOUR PHONE -->
<!-- UPDATE WITH YOUR INSTAGRAM HANDLE -->
<!-- UPDATE WITH YOUR TEAM -->
<!-- UPDATE WITH YOUR COPYRIGHT -->
<!-- UPDATE WITH YOUR GOOGLE MAPS EMBED -->

Replacing Images

The template uses Unsplash for placeholder images. Replace these with your own images by updating the src attribute:

<!-- Before (placeholder) -->
<img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1200&h=800&fit=crop" alt="Featured article">

<!-- After (your image) -->
<img src="images/my-article.jpg" alt="Featured article">

Updating Author Information

Author information appears in multiple places. Update these consistently across all pages:

• Top bar and navbar: Update the admin link if needed
• Article bylines: Update author name, avatar, and bio in each article
• Author pages: Update author.html with full bio and social links
• Team section: Update team members in about.html
• Admin sidebar: Update admin avatar and name in all admin pages

Adding New Articles

To add a new article, copy an existing blog card structure and update the content:

<article class="blog-card" data-aos="fade-up">
  <div class="blog-card-image-wrap">
    <img src="images/your-image.jpg" alt="Article" class="blog-card-image">
    <span class="blog-card-category">Your Category</span>
  </div>
  <div class="blog-card-content">
    <h3 class="blog-card-title">
      <a href="single-post.html">Your Article Title</a>
    </h3>
    <p class="blog-card-excerpt">Brief excerpt of your article...</p>
    <div class="blog-card-meta">
      <div class="blog-card-author">
        <img src="images/author.jpg" alt="Author">
        <strong>Author Name</strong>
      </div>
      <span class="blog-card-meta-dot"></span>
      <span>Aug 29, 2026</span>
      <span class="blog-card-meta-dot"></span>
      <span>8 min read</span>
    </div>
  </div>
</article>

JavaScript Features

A complete reference of all JavaScript functionality in the template.

Public JavaScript (script.js)

The public JavaScript file handles all interactive features on visitor-facing pages. All code is wrapped in an IIFE to avoid polluting the global scope.

Admin JavaScript (admin-script.js)

The admin JavaScript handles all interactive features in the admin panel:

Keyboard Shortcuts

Vellora supports keyboard navigation for better accessibility:

• Escape - Close search overlay, mobile drawer, or lightbox
• Tab - Navigate through focusable elements
• Enter / , - Add tag in tags input
• Backspace - Remove last tag when input is empty

Admin Panel

A complete content management system built with the same editorial aesthetic.

The admin panel is fully separated from the public site with its own CSS (admin-style.css) and JavaScript (admin-script.js) files. This keeps the public site lightweight while providing powerful management features.

Accessing the Admin Panel

The admin panel is accessible via the "Admin" link in the top bar of any public page, or directly at admin-dashboard.html.

Admin Panel Structure

All admin pages share the same layout structure:

• Sidebar: Fixed left navigation with logo, menu sections, and user info
• Top navbar: Search bar, notifications dropdown, and user profile dropdown
• Main content: Page-specific content with header and cards

Rich Text Editor

The post creation page uses Quill.js for rich text editing. The editor is initialized in admin-script.js with a custom toolbar configuration:

const quill = new Quill('#quill-editor', {
  theme: 'snow',
  placeholder: 'Start writing your story...',
  modules: {
    toolbar: [
      [{ 'header': [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      [{ 'align': [] }],
      ['blockquote', 'code-block'],
      ['link', 'image', 'video'],
      ['clean']
    ]
  }
});

Admin Customization

The admin panel has its own set of CSS variables in admin-style.css. You can customize the admin theme independently:

:root {
  --admin-bg: #FDFBF7;
  --admin-bg-sidebar: #1A1A1A;
  --admin-accent: #8B2635;
  --admin-sidebar-width: 260px;
  --admin-navbar-height: 64px;
}

Responsive Design

Thoughtfully designed breakpoints for every screen size.

Vellora is fully responsive with carefully chosen breakpoints that maintain the editorial feel across all devices. The template uses a mobile-first approach with progressive enhancement.

Mobile-Specific Features

• Slide-in drawer menu with backdrop overlay
• Touch-optimized category scroll with snap points
• Collapsible admin sidebar with backdrop
• Responsive typography using clamp() for fluid sizing
• Stacked layouts for forms and grids on small screens

Testing Responsiveness

Test your site on multiple devices using browser developer tools:

• Chrome DevTools: Toggle device toolbar (Ctrl+Shift+M)
• Firefox: Responsive Design Mode (Ctrl+Shift+M)
• Safari: Responsive Design Mode (Cmd+Option+R)
• BrowserStack or LambdaTest for real device testing

Accessibility

Built with accessibility in mind for an inclusive reading experience.

Vellora follows WCAG 2.1 guidelines to ensure the template is usable by everyone. Key accessibility features include:

Browser Support

Vellora works in all modern browsers with graceful degradation for older ones.

CSS Features Used

Vellora uses modern CSS features that are widely supported:

• CSS Grid - For layout structures
• Flexbox - For component layouts
• CSS Variables - For theming
• clamp() - For fluid typography
• aspect-ratio - For image containers
• CSS transitions - For smooth interactions

Troubleshooting

Common issues and their solutions.

Styles Not Loading

Symptom: Page appears unstyled or with default browser styles.

Solution:

• Check that style.css is in the same directory as your HTML files
• Verify the path in the HTML: <link rel="stylesheet" href="style.css">
• Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
• Check browser console for 404 errors

Masonry Layout Not Working

Symptom: Blog grid items stack vertically instead of in masonry layout.

Solution:

• Ensure Masonry.js CDN is loaded before script.js
• Check browser console for JavaScript errors
• Verify images have loaded (Masonry needs image dimensions)
• Make sure the grid has the class masonry-grid

Fonts Not Displaying

Symptom: Text appears in default system fonts instead of Fraunces/Inter.

Solution:

• Check internet connection (Google Fonts requires online access)
• Verify the Google Fonts link is in the HTML <head>
• Check browser console for font loading errors
• Try a different font from Google Fonts if needed

Images Not Showing

Symptom: Broken image icons appear instead of images.

Solution:

• Verify image paths are correct (relative or absolute)
• Check that image files exist in the specified location
• Ensure image file names match exactly (case-sensitive on some servers)
• Check file permissions on your server

Mobile Menu Not Opening

Symptom: Hamburger menu button does nothing when clicked.

Solution:

• Check browser console for JavaScript errors
• Verify script.js is loaded at the end of the body
• Ensure the mobile drawer HTML structure is intact
• Check that the hamburger button has the class mobile-menu-toggle

Quill Editor Not Working

Symptom: Rich text editor doesn't appear on create post page.

Solution:

• Verify both Quill CSS and JS are loaded in the correct order
• Check that the editor container has id="quill-editor"
• Ensure admin-script.js is loaded after Quill.js
• Check browser console for initialization errors

Credits & Support

Acknowledgments and resources for further help.

Third-Party Resources

Vellora makes use of the following excellent open-source resources:

• Bootstrap 5.3 - Responsive grid system by the Bootstrap team
• FontAwesome 6 - Icon library by Fonticons, Inc.
• AOS - Animate On Scroll library by Michał Sajnok
• Masonry - Cascading grid layout library by David DeSandro
• Quill.js - Rich text editor by Slab
• Google Fonts - Fraunces by Florian Karsten, Inter by Rasmus Andersson
• Unsplash - Placeholder images from the Unsplash community
• Pravatar - Placeholder avatars from pravatar.cc

Design Inspiration

The editorial aesthetic of Vellora is inspired by premium publications including:

• Monocle - Global affairs, culture, and design
• Cereal - Travel and style magazine
• Kinfolk - Slow living and intentional design
• Medium - Thoughtful long-form writing
• Substack - Independent writers and newsletters

Getting Help

If you need assistance with the template, here are some helpful resources:

License

This template is provided for your use in personal and commercial projects. Please respect the licenses of all third-party libraries and resources used.