Template System Guide

Quireio features a powerful template system that lets you create professional blogs with zero technical configuration. Learn how to choose, customize, and switch between templates to create the perfect presentation for your content.

Template Overview

Quireio offers two professionally designed templates, each optimized for different content types and audiences.

Writer Template

Perfect for: - Personal blogs and journals - News and magazine sites - Storytelling and narrative content - Marketing blogs and business content

Design Features: - Clean, minimal aesthetic - Focus on readability and typography - Optimized for long-form content - Mobile-first responsive design - Fast loading and SEO-friendly

Key Elements: - Header with blog title and navigation - Article-focused layout with generous white space - Social sharing integration - Comment system ready - Archive and category organization

Documentation Template

Perfect for: - Technical documentation and guides - API references and developer resources - Knowledge bases and help centers - Educational content and courses

Design Features: - Structured, hierarchical layout - Sidebar navigation for easy browsing - Search functionality (future feature) - Code syntax highlighting - Table of contents generation

Key Elements: - Organized sidebar with nested navigation - Breadcrumb navigation - Previous/Next post navigation - Code block optimization - Mobile-responsive with collapsible sidebar

Template Selection

During Onboarding

New users choose their initial template during the Welcome Wizard:

1. Template Preview - See both templates with sample content 2. Content Type Selection - Choose based on your primary content type 3. Easy Switching - Change templates anytime without data loss

Template Comparison

| Feature | Writer | Documentation | |---------|---------|---------------| | Best For | Blogs, Articles | Guides, References | | Layout | Single column | Sidebar + content | | Navigation | Header menu | Sidebar tree | | Code Display | Basic | Enhanced | | Content Flow | Chronological | Hierarchical | | Mobile Experience | Optimized | Collapsible sidebar |

Switching Templates

Instant Template Changes

One of Quireio's revolutionary features is instant template switching - change your blog's entire appearance without losing any content.

How to Switch: 1. Go to Blog Settings in your dashboard 2. Select Template section 3. Choose new template from dropdown 4. Click Save Changes 5. Your blog updates instantly

Benefits: - ✅ Zero Data Loss - All content preserved - ✅ Instant Changes - No regeneration required - ✅ Easy Testing - Try templates risk-free - ✅ Content Independence - Posts work with any template

Template-Specific Features

Writer Template Features: - Article-focused homepage - Tag-based organization - Social media integration - Author bio sections - Newsletter signup integration

Documentation Template Features: - Nested page organization - Advanced code formatting - Cross-reference linking - Version control integration - API documentation layout

Customization Options

Basic Customization

Blog Settings Customization: - Blog Title - Your site's main heading - Blog Description - Subtitle and SEO description - Theme Mode - Light or dark theme - Navigation Menu - Custom menu items

Visual Customization: - Color scheme variations - Typography options - Layout spacing adjustments - Mobile responsiveness settings

Advanced Customization (Pro Plans)

Custom CSS: - Add your own styling rules - Override template defaults - Create unique visual identity - Mobile-specific customizations

Custom JavaScript: - Add interactive elements - Integrate third-party tools - Custom analytics tracking - Enhanced user experience features

Brand Customization: - Custom logo integration - Favicon customization - Social media branding - Email template customization

Template-Specific Content

Writing for Writer Template

Optimal Content Types: - Blog Posts - Personal stories, opinions, news - Articles - In-depth analysis, tutorials - Updates - Company news, announcements - Reviews - Product reviews, recommendations

Content Structure:

Engaging Title
Brief introduction that hooks readers...
Main Content Section
Detailed content with subheadings...
Supporting Points
- Bullet points for key information
- Easy-to-scan content structure
Conclusion
Wrap up with key takeaways and calls-to-action.

Writing for Documentation Template

Optimal Content Types: - Guides - Step-by-step instructions - References - API docs, technical specs - Tutorials - Educational walkroughs - FAQs - Question and answer format

Content Structure:

Guide Title
Overview
What this guide covers...
Prerequisites
What readers need to know first...
Step 1: Initial Setup
Detailed instructions...
Configuration Options
Sub-sections for complex topics...
Step 2: Implementation
Continue with next steps...
Troubleshooting
Common issues and solutions...
Next Steps
What to do after completion...

Theme Customization

Light and Dark Themes

Both templates support light and dark themes:

Light Theme Benefits: - Better readability in bright environments - Professional appearance for business content - Wider compatibility with embedded media - Traditional web experience

Dark Theme Benefits: - Reduced eye strain in low-light environments - Modern, sleek appearance - Better battery life on OLED screens - Popular with developer communities

Theme Switching: - Set default theme in blog settings - Readers can toggle themes on your blog - Theme preference saved per visitor - Consistent experience across devices

Color Scheme Customization

Available Color Options: - Primary Color - Links, buttons, accents - Secondary Color - Subtle accents and borders - Text Colors - Headings, body text, metadata - Background Colors - Page background, content areas

Template-Specific Colors: - Writer: Warmer, more vibrant palette - Documentation: Cooler, professional palette

Responsive Design

Mobile Optimization

Writer Template Mobile: - Single-column layout - Touch-friendly navigation - Optimized reading experience - Fast loading on mobile networks

Documentation Template Mobile: - Collapsible sidebar navigation - Touch-friendly menu system - Optimized code display - Easy scrolling and navigation

Device-Specific Features

Tablet Experience: - Optimized for landscape and portrait - Sidebar remains accessible - Enhanced touch targets - Improved content layout

Desktop Features: - Full sidebar navigation (docs template) - Keyboard navigation support - Multiple column layouts - Enhanced interactive features

SEO and Performance

Template SEO Features

Built-in SEO Optimization: - Semantic HTML structure - Proper heading hierarchy - Meta tag generation - OpenGraph integration - Twitter Card support

Performance Features: - Optimized CSS delivery - Compressed images - Fast loading times - Mobile-friendly design - Clean, semantic markup

Search Engine Benefits

Writer Template SEO: - Article-focused markup - Author information integration - Publication date optimization - Social sharing optimization

Documentation Template SEO: - Structured data for technical content - Breadcrumb navigation - Internal linking optimization - Technical content markup

Advanced Template Features

Navigation Systems

Writer Template Navigation: - Header-based menu system - Category-based organization - Tag cloud and filtering - Archive page organization

Documentation Template Navigation: - Sidebar tree navigation - Breadcrumb trails - Previous/Next navigation - Table of contents generation

Content Organization

Writer Template Organization: - Chronological post ordering - Category-based grouping - Tag-based filtering - Featured post highlighting

Documentation Template Organization: - Hierarchical content structure - Cross-referenced linking - Search functionality (future) - Version-based organization

Custom Domain Integration

Professional Branding (Growth/Pro Plans)

Custom Domain Benefits: - Professional appearance - Brand consistency - SEO advantages - Marketing benefits

Setup Process: 1. Register your domain 2. Configure DNS settings 3. Add domain in Quireio settings 4. SSL certificate automatic setup 5. Redirect old URLs automatically

Domain Examples: - yourbrand.com instead of markdownblog.com/u/yourusername - docs.yourcompany.com for documentation sites - blog.yourproject.org for project blogs

Template Development (Future Feature)

Custom Template Creation

Template Structure: - index.php - Homepage layout - post.php - Individual post layout - style.css - Template styling - config.json - Template metadata

Development Tools: - Template preview system - Live editing environment - Version control integration - Community sharing platform

Troubleshooting Templates

Common Issues

Template Not Applying: - Clear browser cache - Check template selection in settings - Verify blog is published - Contact support if issues persist

Styling Problems: - Check for custom CSS conflicts - Verify theme mode settings - Test with different browsers - Reset to default template if needed

Mobile Display Issues: - Test on actual mobile devices - Check responsive design settings - Verify viewport configuration - Report mobile-specific bugs

Getting Help

Template Support: - Browse template documentation - Check community forums - Submit support tickets - Request customization help

Community Resources: - Template showcase gallery - User customization examples - Best practices sharing - Template request voting

Future Template Features

Upcoming Enhancements

Advanced Customization: - Visual template editor - Drag-and-drop layout builder - Custom widget system - Advanced typography controls

New Template Options: - Portfolio template - E-commerce integration - Magazine-style layouts - Minimalist designs

Enhanced Features: - Advanced search functionality - Comment system integration - Social media widgets - Newsletter integration

Best Practices

Template Selection Guidelines

Choose Writer Template when: - Content is primarily blog posts and articles - Audience reads content chronologically - Social sharing is important - Simple, clean design is preferred

Choose Documentation Template when: - Content is reference material or guides - Users need to find specific information quickly - Content has hierarchical relationships - Technical accuracy is paramount

Customization Best Practices

Design Consistency: - Maintain brand colors throughout - Use consistent typography - Keep navigation intuitive - Test on multiple devices

Performance Optimization: - Minimize custom CSS - Optimize images for web - Use web-safe fonts - Test loading speeds regularly

User Experience: - Prioritize readability - Ensure mobile responsiveness - Maintain fast loading times - Provide clear navigation

Ready to customize your blog's appearance? Visit your Blog Settings and start experimenting with templates and themes!

---

Need help with templates? Check our FAQ or contact support for personalized assistance.