Ad Area System Guide

The Ad Area System is a conditional advertising feature that displays promotional content only when the CMS is in hosting service mode. This system provides hosting providers with a professional way to showcase their services while maintaining a clean experience for self-hosted users.

📋 Table of Contents

• Overview
• How It Works
• CMS Mode Integration
• Template System
• Theme Integration
• Customization
• Testing
• Troubleshooting
• Advanced Features

🎯 Overview

The Ad Area System provides:

• Conditional Display: Ads only appear in hosting service modes
• Theme Consistency: Same ad appearance across all themes
• Professional Design: Modern, responsive advertising interface
• User Control: Close button for user preference
• Easy Maintenance: Single template file for all themes

When Ads Are Visible

| CMS Mode | Ad Area Status | |----------|----------------| | Full Featured | ❌ Hidden | | Hosting Service (Plugin Mode) | ✅ Visible | | Hosting Service (No Plugin Management) | ✅ Visible |

🔧 How It Works

Conditional Logic

The ad area uses template conditional syntax to determine visibility:

html
{{#if isHostingServiceMode}}

    

{{/if}}

Template Variables

The system provides these variables to templates:
• full-featured - Current CMS mode identifier
• false - Boolean for conditional logic
• Full Featured - Human-readable mode name

Include System

Themes include the ad area using:

html
{{include=ad-area.html}}

🚀 CMS Mode Integration

Template Data

The main index.php automatically includes CMS mode information:

php
$templateData = [
    // ... other data ...
    'cmsMode' => $cmsModeManager->getCurrentMode(),
    'isHostingServiceMode' => $cmsModeManager->isRestricted(),
    'cmsModeName' => $cmsModeManager->getModeName(),
];

Mode Detection

The system automatically detects the current mode from config/cms_mode.json:

json
{
    "mode": "hosting-service-plugins"
}

📝 Template System

Ad Area Template

Located at themes/ad-area.html, the template includes:
• Responsive Design: Works on all device sizes
• Modern Styling: Glassmorphism design with gradients
• Interactive Elements: Hover effects and animations
• Close Functionality: User-controlled dismissal

Template Structure

html
{{#if isHostingServiceMode}}

    
    

    
    
    

        
🚀 Premium Hosting Features
        
Unlock the full potential of your website...
        
        
        

            ⚡ Fast Performance
            🔒 Enhanced Security
            📱 Mobile Optimized
        
        
        
        Learn More →
    
    
    
    ×

{{/if}}

🎨 Theme Integration

Automatic Inclusion

All themes automatically include the ad area. The system has been integrated with:
• Default Theme: page.html, home.html
• Cyberpunk Theme: page.html
• Elegant Dark Theme: page.html
• Heroic Theme: page.html, home.html
• Minimal Theme: page.html, home.html
• Minimalist Theme: page.html
• Modern Cards Theme: page.html, home.html
• Salt Lake Theme: page.html, home.html
• Simple Modern Theme: page.html, home.html
• Starter Scores Theme: page.html, home.html
• Vintage Theme: page.html
• Custom Variables Demo Theme: page.html

Positioning

The ad area is positioned right after the header in all themes for maximum visibility:

html
{{module=header.html}}
{{include=ad-area.html}}

    

🎯 Customization

Modifying Ad Content

Edit themes/ad-area.html to customize:
• Text Content: Change headlines, descriptions, and CTAs
• Visual Design: Modify colors, gradients, and styling
• Features: Update the highlighted service features
• Links: Change the call-to-action destination

Styling Customization

The ad area uses inline styles for consistency, but you can:
• Add CSS Classes: Modify the template to use theme-specific CSS
• Theme Integration: Create theme-specific ad area variations
• Responsive Design: Adjust breakpoints for different screen sizes

Content Localization

Support multiple languages by creating localized versions:

themes/
├── ad-area.html          # Default (English)
├── ad-area-es.html       # Spanish
├── ad-area-fr.html       # French
└── ad-area-de.html       # German

🧪 Testing

Testing in Full Featured Mode

• Ensure CMS is in "full-featured" mode
• Navigate to any page
• Verify ad area is NOT visible

Testing in Hosting Service Mode

• Access admin panel: /admin
• Navigate to CMS Mode section
• Change to "Hosting Service (Plugin Mode)"
• Refresh any page
• Verify ad area is visible

Testing Across Themes

• Change CMS mode to hosting service mode
• Switch between different themes
• Verify ad area appears consistently
• Test responsive behavior on different screen sizes

Demo Page

Use the built-in demo page at /ad-demo to test the feature.

🔧 Troubleshooting

Common Issues

#### Ad Area Not Visible Problem: Ad area doesn't appear in hosting service mode

Solutions:

• Check CMS mode: config/cms_mode.json
• Verify template includes: {{include=ad-area.html}}
• Check template syntax: {{#if isHostingServiceMode}}
• Review browser console for JavaScript errors

#### Ad Area Always Visible Problem: Ad area appears even in full-featured mode

Solutions:

• Verify CMS mode is "full-featured"
• Check template conditional logic
• Clear browser cache
• Verify isHostingServiceMode variable value

#### Styling Issues Problem: Ad area doesn't match theme design

Solutions:

• Check CSS conflicts in theme stylesheets
• Verify responsive breakpoints
• Test in different browsers
• Review theme-specific CSS overrides

Debug Information

Add debug output to verify variables:

html


    Debug Info:

    CMS Mode: full-featured

    Is Hosting Service: false

    Mode Name: Full Featured

🚀 Advanced Features

A/B Testing

Implement different ad variations:

html
{{#if isHostingServiceMode}}
    {{#if themeOptions.adVariation}}
        {{include=ad-area-variation-b.html}}
    {{else}}
        {{include=ad-area.html}}
    {{/if}}
{{/if}}

Analytics Integration

Track ad performance:

html

Dynamic Content

Load ad content dynamically:

html
{{#if isHostingServiceMode}}

    

        
{{themeOptions.adHeadline}}
        
{{themeOptions.adDescription}}
        
            {{themeOptions.adButtonText}}
        
    

{{/if}}

User Preferences

Remember user ad preferences:

html

📚 Related Documentation

• CMS Modes Guide
• Theme Development
• Template System
• Installation Script

🆘 Getting Help

If you need assistance with the Ad Area System:

• Check the troubleshooting section above
• Verify CMS mode settings in the admin panel
• Review template syntax for conditional logic
• Test with different themes to isolate issues
• Consult the community for additional support

---

Happy advertising! 🎉

This documentation is maintained by the FearlessCMS community. Last updated: January 2024