AI 對話紀錄  April 9, 2025

【AG-16】Progress review / Fixing Section Background Bug

Q: Since a lots have been gone through, can you go through the links one by one and summarized high-level things we've implemented so far, the present state of the system, and upcoming fixes to implement?

---

A: No worries at all—I appreciate the clarification! I’ve gone through the links you provided, reviewed our journey with the Chaplaincy Admin system, and pieced together a high-level summary of what we’ve implemented, the current state, and the upcoming fixes. Let’s break it down:

---

High-Level Summary of Implementations

1. Foundation with AppGini (Low-Code Framework)

   • What We Did: Started with AppGini as the rapid development tool to build a low-code system for chaplaincy administration. Leveraged its table-based structure (e.g., tip_and_quote, contact_book, journal) for core functionality.

   • Key Features: Quick updates, easy feature additions, and a user-friendly admin interface.

   • Links: No-Code System, AppGini Workflow.

2. Hooks for Extended Functionality

   • What We Did: Used AppGini’s "hook" mechanism to extend capabilities beyond its out-of-the-box features.

   • Examples: Custom logic for data processing, email automation, and UI enhancements.

   • Links: Enhancing with Hooks.

3. Email Automation

   • What We Did: Implemented dynamic email generation triggered by data in tip_and_quote, contact_book, and journal. Expanded this to support daily/on-request emails and group-specific messaging.

   • Key Features: Automation tied to user groups, customizable content, and scheduling.

   • Links: Daily Emails, Group Emails.

4. Website CMS Integration

   • What We Did: Extended the system into a CMS by integrating Publii (a WYSIWYG static site generator) as the template engine and managing content via a web_content table.

   • Key Features: Simplified content editing, support for dynamic and mixed-mode content, and flexible layouts (sequential and non-sequential). Added separators for better content propagation logic.

   • Links: CMS Extension, CMS Refinements, Content Propagation.

5. Task and Workflow Management

   • What We Did: Added features for daily operations—visit logging, task management, and workload reporting. Introduced a contact_book task flow control and micro-task management via a review tab.

   • Key Features: Structured workflows, modal windows for task details, and micro-task adaptability.

   • Links: Task Flow, Review Tab.

6. WhatsApp Integration

   • What We Did: Designed a basic WhatsApp send-out function to push updates or notifications.

   • Key Features: Lightweight messaging tied to system events.

   • Links: WhatsApp Function.

7. UI/UX Enhancements

   • What We Did: Fine-tuned modal windows, adjusted field layouts, and worked on responsive design (e.g., task-map.php sections with background images).

   • Key Features: Cleaner modals, better spacing, and attempts at full-width backgrounds.

   • Links: Modal Tuning, Modal Bug Fix.

8. Philosophy and Security

   • What We Did: Aligned the design with Aaron Dignan’s People Positive and Complexity Conscious principles. Ensured security with prepared statements and secure coding practices.

   • Links: Business Philosophy.

---

Current State of the System

• Core Functionality: The system is operational with AppGini managing tables, hooks driving automation (emails, WhatsApp), and a CMS integrated via Publii and web_content. Task management and workflows are in place with micro-task support.

• UI/UX: Modal windows are restored and functional (e.g., per the fix in Modal Bug). The task-map.php page has two sections with background images, and debug logs confirm correct page routing (index → landing, task-map → task-map).

• Known Issues:

  • Background Image Width: Efforts to make section backgrounds full-width in task-map.php clashed with page-width, causing left-alignment. The chat ended before resolving this.

  • Responsiveness: Small-screen adjustments (spacing, image scaling) are partially implemented but need refinement.

  • Spacing: Space between section headers and borders in task-map.php needs tweaking for visual balance.

• • *

Upcoming Fixes and Enhancements

1. Fix Full-Width Background Image in task-map.php

   • Goal: Stretch the background image to full width without breaking content centering.

   • Approach: Use a wrapper div with 100vw and a centered inner container with max-width, as proposed in my last response. Avoid page-width overrides.

   • Status: Proposed but untested—needs implementation and validation.

2. Increase Header-Border Spacing

   • Goal: Add more space between section headers and borders in task-map.php.

   • Approach: Adjust margin-bottom and padding-top on h2 elements within sections.

   • Status: Suggested in CSS (e.g., margin-bottom: 30px), but requires your feedback on the exact spacing.

3. Improve Small-Screen Responsiveness

   • Goal: Ensure task-map.php sections (and the system broadly) look good on mobile.

   • Approach: Refine media queries to adjust padding, font sizes, and image scaling (e.g., background-size: cover).

   • Status: Basic media query proposed, but needs testing across devices.

4. Validate Modal Stability

   • Goal: Confirm the modal fix holds across all use cases after the bug in CMS Micro-Tasks.

   • Approach: Test modals in various contexts (e.g., task details, CMS edits) and check for regressions.

   • Status: Fixed, but ongoing vigilance needed.

5. Polish CMS and Workflow Features

   • Goal: Ensure content propagation, micro-task management, and WhatsApp integration are seamless.

   • Approach: Review edge cases (e.g., separator logic, task flow triggers) and optimize performance.

   • Status: Functional but could use a polish pass.

---

Let’s Move Forward

I’d suggest we start with the task-map.php fixes since that’s where we left off. My previous response provided a CSS solution for the background image width—let’s test that first. If you’re ready, apply the HTML/CSS I shared, check the results, and let me know:

• Does the background go full-width without shifting content?

• Is the header spacing right, or should we tweak it?

• How does it look on mobile?

From there, we can tackle responsiveness and any other priorities you’d like to focus on. What do you think?

---

<<Grok provided fixes didn't solve the display problem.>>

This fix works well on mobile screen but on a PC the section background is still not taking the full width of the browser. Header spacing looks good and the modal is functioning basically well, except for a few strange characters appearing at the lower left corner of the modal (See attached).I find the hero image of index.php (I'm testing on this instead of task-map.php) is taking full-width of the browser (See attached). To avoid complicated fix that we have experienced before, I wonder if we can simply "borrow" the style of the hero image.

The source code for the hero image looks like to be:

病人、家屬、醫護，院牧部撐住你！

How do you think?

<>

Q: This fix makes things worst. First, the section titles and contents have now become white and section background image is missing (See attached). Strange characters are no long shown in the modal.

<>

Q: It's good that you still recall the logic of section background image (Show it when img_role is set the Background, regardless of whether we have default separator). The fix has restored text to black for sections without background image but the section with background image set is still missing the image (See attached). Is it a problem with the image path? We've encountered this issue before.

<>

Q: Let me clarify: Since all images are uploaded to the server via the web_content table, the default folder for customer background image/separator images is "./images", meaning the same directory as the "public" folder where index.php is at. The images folder is not inside the "public" folder.

<>

Q: No change. The background image is still not shown. I can't see any error message from the inspector (I'm using Edge and is not very familiarize with the inspector though).

The HTML of index.php is:

I can click on the image URL in the code view to load the image (.JPG is correct) directly. Since the image started to fail only AFTER we borrow the hero image styles. Would it be just CSS issues?

A: Thank you for the update and for sharing the HTML snippet from index.php. I’m glad you confirmed that the image URL (/images/2b757015baddc2464.JPG) loads correctly when clicked directly in the browser, and that the .JPG extension matches the file (so case sensitivity isn’t the issue). Since there’s no error in the browser console (despite the onerror handler) and the image loads fine when accessed directly, this strongly suggests the issue is not with the image path or server, but rather with how the image is being rendered on the page—likely a CSS or layout issue.

You’re absolutely right to suspect that the issue might be related to the hero image styles we borrowed, as the background image stopped showing after we made that change. Let’s dive into the CSS and layout to identify and fix the problem.

Analysis of the Issue

HTML Output

The HTML for the image in index.php is:

html

<div class="section-hero__image">
    <img src="/images/2b757015baddc2464.JPG" alt="Section Background" class="section-hero__img" onerror="console.error('Failed to load image: /images/2b757015baddc2464.JPG')">
</div>

• The src attribute is correct (/images/2b757015baddc2464.JPG), and you confirmed the image loads when clicked.

• The onerror handler isn’t logging anything in the console, which means the image is being found and loaded by the browser (a 404 or network error would trigger the onerror event).

CSS Rules

The relevant CSS in custom.css for the background image is:

css

.section-hero--full {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 400px;
    overflow: hidden;
}

.section-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #f0f0f0; /* Debug background */
}

.section-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
}

Why the Image Isn’t Visible

Since the image is loading (no onerror event), the issue must be with how it’s being displayed. Here are the likely culprits:

1. Parent Container Height:

   • .section-hero__image is position: absolute and has height: 100%, which means it takes the height of its nearest positioned ancestor (.section-hero--full, which is position: relative).

   • .section-hero--full has min-height: 400px, but if the content inside .section-hero__content (e.g., the

     and .generic-content) is shorter than 400px, the actual height of .section-hero--full might collapse to the content height. If the content is very short, the height might be too small for the image to be visible.

   • Additionally, if .section-hero--full’s height is being overridden by another style (e.g., a Publii theme rule), the image might not have enough space to display.

2. Z-Index Issue:

   • .section-hero__image has z-index: -1, which places it behind .section-hero__content. If .section-hero__content has a background color (e.g., background: #fff), it might be covering the image.

3. Hero Style Differences:

   • When we borrowed the hero styles, the original hero (
     ) likely had additional styles or JavaScript that ensured the image was visible (e.g., setting a specific height or handling responsive behavior). Our simplified version might be missing a key piece.

4. Content Overlap:

   • .section-hero__content is positioned relatively and might be overlapping the image. If it has a background or padding that covers the entire section, the image (at z-index: -1) won’t be visible.

Why It Worked Before

Before we borrowed the hero styles, we were using an inline background-image style directly on .content__entry:

php

$background_style = ($has_image && $img_role === 'Background') ? " style=\"background-image: url('../images/" . htmlspecialchars($row['theme_img']) . "');\"" : '';
echo "<div class=\"content__entry\"$background_style>";

The CSS for .content__entry was:

css

.content__entry {
    position: relative;
    padding: 20px;
    min-height: 200px;
    margin: 0 auto;
    max-width: 1200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
}

This approach worked because:

• The background-image was applied directly to the container holding the content, so there was no separate element to position.

• background-size: cover ensured the image scaled to fill the container, and the min-height: 200px ensured there was enough space to display it.

• There was no z-index conflict because the background was part of the same element as the content.

When we switched to the hero-style approach, we introduced a separate element with position: absolute, which is more prone to layout issues if the parent container’s dimensions or stacking context aren’t set correctly.

Fix: Simplify the Approach

Since the hero-style approach is causing issues, and the previous background-image method worked, let’s revert to the original approach of using an inline background-image style. This avoids the complexities of positioning a separate element and ensures the background displays as it did before. We’ll keep the .section-hero--full structure for full-width support but apply the background directly to it.

Updated pull_contents.php

php

<?php
// pull-contents.php

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$config_path = '../config.php';
if (!file_exists($config_path)) {
    die("Error: config.php not found at $config_path");
}
require_once $config_path;

if (!isset($dbServer) || !isset($dbUsername) || !isset($dbPassword) || !isset($dbDatabase)) {
    die("Error: AppGini database variables not defined in config.php");
}

$conn = new mysqli($dbServer, $dbUsername, $dbPassword, $dbDatabase, $dbPort ?: 3306);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Auto-detect page from calling file if $_GET['page'] not set
if (isset($_GET['page'])) {
    $current_page = $_GET['page'];
    echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Page set from GET: '$current_page'</div>";
} else {
    $calling_file = basename($_SERVER['SCRIPT_FILENAME']);
    $request_uri = $_SERVER['REQUEST_URI'];
    echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Calling file: '$calling_file'</div>";
    echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: REQUEST_URI: '$request_uri'</div>";
    $current_page = str_replace('.php', '', $calling_file);
    echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page after str_replace: '$current_page'</div>";
    if ($current_page === 'index') {
        $current_page = 'landing';
        echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page set to 'landing'</div>";
        // Fallback: Check REQUEST_URI if SCRIPT_FILENAME returns 'index'
        if (preg_match('/\/(task-map)\.php/', $request_uri, $matches)) {
            $current_page = $matches[1];
            echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page updated from REQUEST_URI: '$current_page'</div>";
        }
    }
}
$status = 'Show';

echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Final current page: '$current_page'</div>";

$sql = "SELECT title, content, image, video_embed, button_link, button_text, position, model, date_edited, theme_img, img_role, chk_divider FROM web_content WHERE page = ? AND status = ? ORDER BY position ASC, date_edited DESC";
$stmt = $conn->prepare($sql);
if (!$stmt) {
    die("Prepare failed: " . $conn->error);
}

$stmt->bind_param("ss", $current_page, $status);
$stmt->execute();
$result = $stmt->get_result();

$sections = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $pos = $row['position'];
        if (!isset($sections[$pos]) || $row['date_edited'] > $sections[$pos]['date_edited']) {
            $sections[$pos] = $row;
        }
    }
}

if (!empty($sections)) {
    ksort($sections);
    $current_index = 0;

    foreach ($sections as $position => $row) {
        $current_index++;
        if ($position < 1 || $position > 10) {
            continue;
        }

        $has_image = !empty($row['theme_img']);
        $img_role = trim($row['img_role'] ?? 'Background');
        $use_default_divider = $row['chk_divider'] == 1;

        // Add page-specific class if desired
        $extra_class = ($current_page === 'task-map') ? ' task-map-section' : '';

        // Use a hero-like structure for full-width, but apply background directly
        $background_style = ($has_image && $img_role === 'Background') ? " style=\"background-image: url('/images/" . htmlspecialchars($row['theme_img']) . "');\"" : '';
        echo "<div class=\"section-hero section-hero--full$extra_class\"$background_style>";
        echo "<div class=\"section-hero__content\">";
        echo "<h1 class=\"align-center\">" . $row['title'] . "</h1>";
        echo "<div class=\"generic-content align-center\">" . $row['content'] . "</div>";

        if ($row['model'] === 'title-text-image' && !empty($row['image'])) {
            $image_url = '/images/' . htmlspecialchars($row['image']);
            echo "<div class=\"content-image\"><img src=\"$image_url\" alt=\"Section Image\" class=\"welcome-image\"></div>";
        }

        if ($row['video_embed']) {
            $clean_embed = preg_replace('/sandbox(="[^"]*"|)/', '', $row['video_embed']);
            echo '<div class="video-embed">' . $clean_embed . '</div>';
        }

        if (!empty($row['button_text'])) {
            $button_link = htmlspecialchars($row['button_link'] ?: '');
            $button_text = htmlspecialchars($row['button_text']);
            echo "<div class=\"content__buttons\">";
            if (!empty($button_link) && $row['button_link'] !== '#') {
                echo "<a class=\"myButton modal-trigger\" href=\"#\" data-modal-link=\"$button_link\">$button_text</a>";
            } else {
                echo "<a class=\"myButton\" href=\"#\">$button_text</a>";
            }
            echo "</div>";
        }

        echo "</div>"; // Close section-hero__content
        echo "</div>"; // Close section-hero

        if ($current_index < count($sections)) {
            if ($use_default_divider) {
                echo "<div class=\"separator\"><img src=\"/public/down_arrow.png\" alt=\"Default Separator\" class=\"separator-image\"></div>";
            } elseif ($has_image && $img_role === 'Separator') {
                $image_url = '/images/' . htmlspecialchars($row['theme_img']);
                echo "<div class=\"separator\"><img src=\"$image_url\" alt=\"Custom Separator\" class=\"separator-image\"></div>";
            }
        }
    }
} else {
    echo "No sections found.";
}

echo '<div id="story-modal" class="modal">';
echo '<div class="modal-content">';
echo '<span class="modal-close">×</span>';
echo '<div id="modal-body"></div>';
echo '</div>';
echo '</div>';

$stmt->close();
$conn->close();
?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Create a debug log container
    const debugLog = document.createElement('div');
    debugLog.id = 'debug-log';
    document.body.appendChild(debugLog);

    function logDebug(message, color = 'green') {
        debugLog.insertAdjacentHTML('beforeend', `<div style="color: ${color}; font-weight: bold; text-align: center;">Debug: ${message}</div>`);
    }

    logDebug('Modal script loaded');

    const modal = document.getElementById('story-modal');
    const modalBody = document.getElementById('modal-body');
    const closeBtn = document.querySelector('.modal-close');
    const triggers = document.querySelectorAll('.modal-trigger');
    logDebug('Found ' + triggers.length + ' modal triggers');

    function openModal(content) {
        modalBody.innerHTML = content;
        modal.style.display = 'block';
        modal.setAttribute('aria-hidden', 'false');
        closeBtn.focus();
        logDebug('Modal opened');
    }

    function closeModal() {
        modal.style.display = 'none';
        modal.setAttribute('aria-hidden', 'true');
        modalBody.innerHTML = '';
        logDebug('Modal closed');
    }

    triggers.forEach(trigger => {
        trigger.addEventListener('click', function(e) {
            e.preventDefault();
            const link = this.getAttribute('data-modal-link');
            logDebug('Trigger clicked, link: ' + link);

            if (!link || link === '#' || link.includes('index.php')) {
                openModal('<p>This link cannot be loaded in a modal to prevent recursive loading.</p>');
                return;
            }

            const basePath = window.location.origin + '/public/';
            const absoluteLink = new URL(link, basePath).href;
            logDebug('Fetching absolute link: ' + absoluteLink);

            openModal('<p>Loading...</p>');

            fetch(absoluteLink)
                .then(response => {
                    logDebug('Fetch response status: ' + response.status + ' ' + response.statusText);
                    if (!response.ok) {
                        throw new Error('Network response was not ok: ' + response.statusText);
                    }
                    return response.text();
                })
                .then(data => {
                    logDebug('Fetched HTML length: ' + data.length);
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(data, 'text/html');

                    let content = doc.querySelector('.section-hero__content') || doc.querySelector('.content__entry');
                    if (content) {
                        const buttons = content.querySelectorAll('.content__buttons');
                        buttons.forEach(button => button.remove());

                        content.removeAttribute('style');
                        const scripts = content.querySelectorAll('script');
                        scripts.forEach(script => script.remove());
                        const styles = content.querySelectorAll('style');
                        scripts.forEach(script => script.remove());
                        const head = content.querySelector('head');
                        if (head) head.remove();
                        const nestedModals = content.querySelectorAll('.modal');
                        nestedModals.forEach(modal => modal.remove());
                        const debugMessages = content.querySelectorAll('div[style*="color: blue"], div[style*="color: green"], div[style*="color: red"]');
                        debugMessages.forEach(msg => msg.remove());

                        const baseUrl = new URL(absoluteLink, window.location.origin).href;
                        const images = content.querySelectorAll('img');
                        images.forEach(img => {
                            const src = img.getAttribute('src');
                            if (src && !src.startsWith('http')) {
                                const absoluteSrc = new URL(src, baseUrl).href;
                                img.setAttribute('src', absoluteSrc);
                            }
                        });

                        const iframes = content.querySelectorAll('iframe');
                        iframes.forEach(iframe => {
                            iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
                            iframe.setAttribute('allowfullscreen', '');
                        });

                        const contentHtml = content.innerHTML.trim();
                        if (contentHtml) {
                            openModal(contentHtml);
                        } else {
                            openModal('<p>No content found in .section-hero__content or .content__entry.</p>');
                        }
                    } else {
                        openModal('<p>Content could not be parsed from the page.</p>');
                    }
                })
                .catch(error => {
                    logDebug('Fetch error: ' + error.message, 'red');
                    openModal('<p>Sorry, the content could not be loaded: ' + error.message + '</p>');
                });
        });
    });

    closeBtn.addEventListener('click', closeModal);

    window.addEventListener('click', function(event) {
        if (event.target === modal) {
            closeModal();
        }
    });

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape' && modal.style.display === 'block') {
            closeModal();
        }
    });
});
</script>

Updated custom.css

We need to update the CSS to remove the .section-hero__image and .section-hero__img styles (since we’re no longer using a separate element) and ensure .section-hero--full handles the background image correctly. Replace the relevant section at the end of custom.css:

css

/* Remove old hero image styles */
.section-hero__image,
.section-hero__img {
    display: none; /* No longer needed */
}

/* Update section-hero--full to handle background */
.section-hero--full {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff; /* Fallback if no background */
}

/* Ensure content is visible */
.section-hero__content {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    z-index: 1;
}

/* Adjust content styles for dark backgrounds */
.section-hero--full[style*="background-image"] h1,
.section-hero--full[style*="background-image"] .generic-content {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Ensure default text color for sections without background */
.section-hero--full h1,
.section-hero--full .generic-content {
    color: #333;
}

/* Responsiveness */
@media (max-width: 768px) {
    .section-hero--full {
        min-height: 300px;
    }
    .section-hero__content {
        padding: 10px;
    }
    .section-hero__content h1 {
        font-size: 1.5em;
        margin-bottom: 0.75em;
        padding-top: 0.75em;
    }
    .generic-content {
        font-size: 0.9em;
        max-width: 100%;
        padding: 0 10px;
    }
}

Changes Made

1. Reverted to Inline Background:

   • Removed the separate element and applied the background-image directly to .section-hero--full using an inline style, similar to the original approach.

   • Kept the /images/ absolute path since it works when accessed directly.

2. Updated CSS:

   • Removed .section-hero__image and .section-hero__img styles since they’re no longer needed.

   • Added background-size: cover, background-position: center, and background-repeat: no-repeat to .section-hero--full to match the original .content__entry behavior.

   • Ensured .section-hero__content has z-index: 1 to stay above the background.

3. Removed Debug Output:

   • Since we confirmed the image path is correct, I removed the debug messages for theme_img and the constructed URL to clean up the output.

Next Steps

1. Backup: Save copies of your current pull_contents.php and custom.css.

2. Replace Files:

   • Overwrite pull_contents.php with the updated version above.

   • Update custom.css by replacing the relevant section with the updated CSS above.

3. Test:

   • Load index.php and check if the background image now appears.

   • Verify that the text is white with a shadow (since the background image should be present).

   • Test on both PC and mobile to ensure the layout and responsiveness are correct.

Why This Should Work

• The inline background-image approach worked before we switched to the hero-style method, so reverting to it should resolve the visibility issue.

• The /images/ path is confirmed to work, so the background should load correctly.

• The CSS rules for .section-hero--full now mirror the original .content__entry styles, ensuring the background scales and positions correctly.

If the image still doesn’t show, we can add back the debug output or inspect the element in the browser to see if another style (e.g., from the Publii theme) is interfering. Let me know how it looks after this change!

Q: With the latest changes, both PC and mobile can show the background image again. But this time, even on mobile, the image is showing a margin on both sides.

A: I’m glad to hear that the background image is now displaying correctly on both PC and mobile! However, the issue of margins on both sides of the background image on mobile is something we can definitely fix. This is likely due to a CSS or layout issue where the .section-hero--full container isn’t stretching to the full viewport width on mobile, or there’s a parent container (possibly from the Publii theme) adding padding or margins.

Let’s analyze the problem and update the CSS to ensure the background image spans the full width on mobile, with no margins on either side.

Analysis of the Issue

Current Behavior

• The background image is showing on both PC and mobile, which is great.

• On mobile, there are margins on both sides of the background image, meaning the image doesn’t stretch edge-to-edge as expected.

Relevant CSS

The current styles for .section-hero--full in custom.css are:

css

.section-hero--full {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff; /* Fallback if no background */
}

And the media query for mobile:

css

@media (max-width: 768px) {
    .section-hero--full {
        min-height: 300px;
    }
    .section-hero__content {
        padding: 10px;
    }
    .section-hero__content h1 {
        font-size: 1.5em;
        margin-bottom: 0.75em;
        padding-top: 0.75em;
    }
    .generic-content {
        font-size: 0.9em;
        max-width: 100%;
        padding: 0 10px;
    }
}

• width: 100% should make .section-hero--full span the full width of its parent container.

• margin: 0 and padding: 0 ensure no extra space is added by the element itself.

• background-size: cover ensures the background image scales to cover the entire element.

Why Margins Are Appearing on Mobile

The margins on both sides of the background image on mobile are likely caused by one of the following:

1. Parent Container Constraints:

   • .section-hero--full is likely inside a parent container (e.g., .container or .post__content from the Publii theme) that has padding or a max-width applied. On mobile, this parent container might be adding padding (e.g., padding: 0 15px) or constraining the width, causing the background image to appear with margins.

2. Viewport Width Not Fully Utilized:

   • While width: 100% makes .section-hero--full span its parent, if the parent isn’t the full viewport width, there will be margins. We need to ensure .section-hero--full breaks out of any parent constraints and spans the full viewport width (100vw).

3. Body or HTML Margins:

   • The or elements might have default margins or padding applied by the browser or the Publii theme, which could cause the entire page to have margins on mobile.

4. CSS Specificity:

   • Another style from the Publii theme might be overriding our width: 100% or adding padding/margins to .section-hero--full on mobile.

Previous Behavior

Before we switched to the hero-style approach, we were using .content__entry with a similar background-image setup, and you mentioned it worked fine on mobile (no margins). The original .content__entry was inside a .section-wrapper that used a transform to break out of parent constraints:

css

.section-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
}

This approach ensured the background spanned the full viewport width by using 100vw and a transform to center it, bypassing any parent container’s padding or max-width. When we switched to .section-hero--full, we simplified to width: 100%, which might not be enough if a parent container is constraining the width.

Fix: Ensure Full-Width Background on Mobile

To fix the margins on mobile, we’ll update the CSS for .section-hero--full to use the same full-width technique as the original .section-wrapper. This will ensure the background image spans the entire viewport width, edge-to-edge, on both PC and mobile.

Updated custom.css

Here’s the complete custom.css with the updated styles for .section-hero--full to ensure full-width display:

css

/*
 * Custom CSS for NLT Chaplaincy CMS
 */

/* Ensure myButton overrides theme styles */
.content__buttons a.myButton {
    text-decoration: none !important;
}

a.myButtonBig {
    text-decoration: none !important;
}

/* Button Styles */
.myButtonBig {
    background: linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
    background-color: #44c767;
    border-radius: 28px;
    border: 1px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 21px;
    font-weight: bold;
    padding: 24px 42px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #2f6627;
    transition: all 0.3s ease;
}
.myButtonBig:hover {
    background: linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
    background-color: #5cbf2a;
    border-color: #137c21;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.myButtonBig:active {
    position: relative;
    top: 1px;
    background: linear-gradient(to bottom, #3ba052 5%, #4aa62b 100%);
    background-color: #3ba052;
    border-color: #0f5c18;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.myButton {
    background: linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
    background-color: #44c767;
    border-radius: 28px;
    border: 1px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 17px;
    font-weight: bold;
    padding: 16px 31px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #2f6627;
    transition: all 0.3s ease;
}
.myButton:hover {
    background: linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
    background-color: #5cbf2a;
    border-color: #137c21;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.myButton:active {
    position: relative;
    top: 1px;
    background: linear-gradient(to bottom, #3ba052 5%, #4aa62b 100%);
    background-color: #3ba052;
    border-color: #0f5c18;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dynamic Section Styles */
.content__entry {
    position: relative;
    padding: 20px;
    min-height: 200px;
    margin: 0 auto; /* Center the content */
    max-width: 1200px; /* Matches typical page width */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
}

/* Define align-center class to match PHP output */
.align-center {
    text-align: center;
}

/* Style debug messages for consistency */
div[style*="color: blue"],
div[style*="color: green"],
div[style*="color: red"] {
    text-align: center;
}

/* Title styles with HTML support */
.content__entry h1 {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.2;
    color: #333;
    margin-bottom: 1em; /* Increased for more spacing */
    padding-top: 1em; /* Adds space above */
    text-align: center;
    text-shadow: none;
}

/* Content styles with HTML support */
.generic-content {
    text-align: center;
    margin: 0 auto;
    max-width: 800px;
    font-size: 1em;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1em;
}

/* Fallback for dark backgrounds */
.content__entry[style*="background-image"] h1,
.content__entry[style*="background-image"] .generic-content {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Ensure HTML lists and paragraphs look good */
.generic-content p {
    margin: 0 0 1em 0;
}

/* Fix for hiding list bullets */
.generic-content ul,
.generic-content ol {
    margin: 0 0 1em 0;
    padding: 0 !important;
    list-style: none !important;
}

.generic-content li {
    margin-bottom: 0.5em;
    text-align: center;
    list-style: none !important;
}

/* Ensure no inline styles from HTML Editor override */
.generic-content ul[style*="list-style"],
.generic-content ol[style*="list-style"],
.generic-content li[style*="list-style"] {
    list-style: none !important;
}

/* Center buttons */
.content__buttons {
    text-align: center !important;
    margin: 2em 0 1em 0;
}

/* Ensure the button itself is centered */
.content__buttons a.myButton {
    display: inline-block;
    margin: 0 auto;
}

/* Override any parent container alignment */
.content__entry .content__buttons {
    text-align: center !important;
}

.welcome-image {
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    display: block;
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 1em auto;
    max-width: 800px;
    background: none;
}
.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.separator {
    text-align: center;
    margin: 20px 0;
}

.separator-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.separator img[src$="down_arrow.png"] {
    max-width: 256px;
}

/* Remove all <hr> styles */
hr {
    display: none !important;
    visibility: hidden !important;
}

/* More aggressive overrides for Publii */
.post__content hr,
.container hr,
.post__content hr[style],
.container hr[style] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide Publii dividers (pseudo-elements) */
.post__content::before,
.post__content::after,
.container::before,
.container::after,
.post__entry::before,
.post__entry::after,
.content__entry::before,
.content__entry::after,
.generic-content::before,
.generic-content::after {
    display: none !important;
    border: none !important;
    content: none !important;
}

/* Explicitly disable pseudo-elements on .separator */
.separator::before,
.separator::after {
    display: none !important;
    border: none !important;
    content: none !important;
}

/* Override Publii theme styles, excluding specific titles */
body, 
body p, 
body h2, 
body h3, 
body h4, 
body h5, 
body h6,
.post__content, 
.post__content p, 
.post__content h2, 
.post__content h3, 
.post__content h4, 
.post__content h5, 
.post__content h6,
.container, 
.container p, 
.container h2, 
.container h3, 
.container h4, 
.container h5, 
.container h6 {
    color: #333 !important;
}

/* Allow specific titles to stay white */
h1.post__title,
h1.hero__title,
h1.site__title {
    color: #fff !important;
}

/* Remove underlines from all buttons */
a.button, 
a.btn, 
a.post__button, 
.post__content a.button, 
.post__content a.btn, 
.post__content a.post__button, 
.container a.button, 
.container a.btn, 
.container a.post__button {
    text-decoration: none !important;
}

/* Custom Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    min-height: 200px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1001;
}

.modal-close:hover,
.modal-close:focus {
    color: #000;
    text-decoration: none;
}

#modal-body {
    font-size: 1em;
    line-height: 1.6;
    color: #333;
    max-width: 100%;
    box-sizing: border-box;
    padding-top: 40px;
}

#modal-body h1 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

#modal-body p {
    margin-bottom: 1em;
}

#modal-body * {
    max-width: 100%;
    box-sizing: border-box;
}

#modal-body img,
#modal-body div,
#modal-body table {
    max-width: 100%;
    height: auto;
}

.modal[aria-hidden="false"] {
    display: block;
}

.modal-close:focus {
    outline: 2px solid #44c767;
    outline-offset: 2px;
}

/* Updated styles for sections with inline background */
.section-hero--full {
    width: 100vw; /* Use viewport width to break out of parent constraints */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Center the element */
    margin: 0;
    padding: 0;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff; /* Fallback if no background */
}

/* Ensure content is visible */
.section-hero__content {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    z-index: 1;
}

/* Adjust content styles for dark backgrounds */
.section-hero--full[style*="background-image"] h1,
.section-hero--full[style*="background-image"] .generic-content {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Ensure default text color for sections without background */
.section-hero--full h1,
.section-hero--full .generic-content {
    color: #333;
}

/* Responsiveness */
@media (max-width: 768px) {
    .section-hero--full {
        min-height: 300px;
        width: 100vw; /* Ensure full viewport width on mobile */
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 0;
    }
    .section-hero__content {
        padding: 10px;
    }
    .section-hero__content h1 {
        font-size: 1.5em;
        margin-bottom: 0.75em;
        padding-top: 0.75em;
    }
    .generic-content {
        font-size: 0.9em;
        max-width: 100%;
        padding: 0 10px;
    }
}

Changes Made

1. Updated .section-hero--full:

   • Changed width: 100% to width: 100vw to ensure the element spans the full viewport width, bypassing any parent container constraints.

   • Added left: 50% and transform: translateX(-50%) to center the element, similar to the original .section-wrapper approach. This ensures the background image stretches edge-to-edge.

2. Updated Media Query:

   • Explicitly set width: 100vw, left: 50%, and transform: translateX(-50%) in the mobile media query to ensure the full-width behavior persists on smaller screens.

   • Kept margin: 0 and padding: 0 to prevent any extra space.

3. Preserved All Other Styles:

   • Kept all other styles unchanged to ensure no other functionality (e.g., modals, buttons, separators) is affected.

Why This Should Work

• The width: 100vw ensures the .section-hero--full element spans the full viewport width, ignoring any parent container’s padding or max-width.

• The left: 50% and transform: translateX(-50%) technique centers the element while maintaining the full-width background, which worked in the original .section-wrapper approach.

• The media query reinforces this behavior on mobile, ensuring the background image stretches edge-to-edge with no margins.

• • *

Next Steps

1. Backup: Save a copy of your current custom.css (e.g., as custom_backup.css).

2. Replace File:

   • Overwrite custom.css with the updated version above.

3. Test:

   • Load index.php on both PC and mobile.

   • Check if the background image now spans the full width on mobile, with no margins on either side.

   • Verify that the content (inside .section-hero__content) remains centered and readable.

4. Debug (if needed):

   • If there are still margins on mobile, open the browser’s dev tools (F12 in Edge):

     • Go to the Elements tab, find the

       element, and check its computed width. It should be the full viewport width (e.g., 100% of the screen width with no padding/margins).

     • Check the parent elements (e.g., .container or .post__content) to see if they’re adding padding or margins. If so, we can override them with more specific CSS.

Additional Notes

• Publii Theme Overrides: If the margins persist, it’s possible the Publii theme is adding padding to a parent container (e.g., .container). We can add a more specific rule to override this, such as:

  css

  .container .section-hero--full {
      margin-left: calc(-1 * var(--container-padding, 15px));
      margin-right: calc(-1 * var(--container-padding, 15px));
  }

  But let’s test the current changes first.

• Viewport Meta Tag: Ensure your index.php includes the viewport meta tag in the to prevent mobile browsers from scaling the page:

  html

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  This is likely already present in your Publii template, but it’s worth confirming.

Let me know how it looks after applying these changes! If there are still margins, a screenshot of the mobile view or the dev tools output would help us pinpoint the issue.

Q: Wow!! You made it!! Both screens are showing full-size background image now. And the modal is still working fine.

A: That’s fantastic news! I’m thrilled to hear that the background image is now displaying full-size on both PC and mobile screens, with no margins, and that the modal is still working perfectly. It sounds like we’ve successfully resolved the issue while maintaining all the other functionality.

Recap of the Solution

Here’s a quick summary of what we did to get here:

1. Background Image Display:

   • We reverted to using an inline background-image style on .section-hero--full (instead of a separate element), which was the approach that worked originally. This avoided the positioning and z-index issues we encountered with the hero-style method.

   • We confirmed the image path (/images/2b757015baddc2464.JPG) was correct and accessible.

2. Full-Width on Mobile:

   • We updated the CSS for .section-hero--full to use width: 100vw, left: 50%, and transform: translateX(-50%) to ensure the background image spans the full viewport width, bypassing any parent container constraints (e.g., from the Publii theme).

   • We applied the same rules in the mobile media query to ensure consistency across screen sizes.

3. Modal Functionality:

   • The modal continued to work because we didn’t alter its logic or styles during these changes. The fix for the strange characters (moving debug output to a separate container) remained intact.

Final Verification

Since everything is working as expected, here are a few final checks to ensure long-term stability:

1. Test Across Browsers:

   • You’ve tested on Edge, which is great. If possible, also test on other browsers like Chrome, Firefox, and Safari (especially on mobile) to ensure the full-width background and modal behave consistently.

2. Check Other Pages:

   • Test other pages that use pull_contents.php (e.g., task-map.php) to confirm the background image and layout work correctly there as well.

3. Viewport Meta Tag:

   • Double-check that your index.php (and other pages) includes the viewport meta tag in the :

     html

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     This ensures mobile browsers don’t scale the page unexpectedly, which could affect the layout.

Updated Files for Reference

For completeness, here are the final versions of the files we’ve been working with:

pull_contents.php

This is the version that applies the inline background-image and includes the modal logic:

php

<?php
// pull-contents.php

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$config_path = '../config.php';
if (!file_exists($config_path)) {
    die("Error: config.php not found at $config_path");
}
require_once $config_path;

if (!isset($dbServer) || !isset($dbUsername) || !isset($dbPassword) || !isset($dbDatabase)) {
    die("Error: AppGini database variables not defined in config.php");
}

$conn = new mysqli($dbServer, $dbUsername, $dbPassword, $dbDatabase, $dbPort ?: 3306);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Auto-detect page from calling file if $_GET['page'] not set
if (isset($_GET['page'])) {
    $current_page = $_GET['page'];
    echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Page set from GET: '$current_page'</div>";
} else {
    $calling_file = basename($_SERVER['SCRIPT_FILENAME']);
    $request_uri = $_SERVER['REQUEST_URI'];
    echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Calling file: '$calling_file'</div>";
    echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: REQUEST_URI: '$request_uri'</div>";
    $current_page = str_replace('.php', '', $calling_file);
    echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page after str_replace: '$current_page'</div>";
    if ($current_page === 'index') {
        $current_page = 'landing';
        echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page set to 'landing'</div>";
        // Fallback: Check REQUEST_URI if SCRIPT_FILENAME returns 'index'
        if (preg_match('/\/(task-map)\.php/', $request_uri, $matches)) {
            $current_page = $matches[1];
            echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page updated from REQUEST_URI: '$current_page'</div>";
        }
    }
}
$status = 'Show';

echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Final current page: '$current_page'</div>";

$sql = "SELECT title, content, image, video_embed, button_link, button_text, position, model, date_edited, theme_img, img_role, chk_divider FROM web_content WHERE page = ? AND status = ? ORDER BY position ASC, date_edited DESC";
$stmt = $conn->prepare($sql);
if (!$stmt) {
    die("Prepare failed: " . $conn->error);
}

$stmt->bind_param("ss", $current_page, $status);
$stmt->execute();
$result = $stmt->get_result();

$sections = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $pos = $row['position'];
        if (!isset($sections[$pos]) || $row['date_edited'] > $sections[$pos]['date_edited']) {
            $sections[$pos] = $row;
        }
    }
}

if (!empty($sections)) {
    ksort($sections);
    $current_index = 0;

    foreach ($sections as $position => $row) {
        $current_index++;
        if ($position < 1 || $position > 10) {
            continue;
        }

        $has_image = !empty($row['theme_img']);
        $img_role = trim($row['img_role'] ?? 'Background');
        $use_default_divider = $row['chk_divider'] == 1;

        // Add page-specific class if desired
        $extra_class = ($current_page === 'task-map') ? ' task-map-section' : '';

        // Use a hero-like structure for full-width, but apply background directly
        $background_style = ($has_image && $img_role === 'Background') ? " style=\"background-image: url('/images/" . htmlspecialchars($row['theme_img']) . "');\"" : '';
        echo "<div class=\"section-hero section-hero--full$extra_class\"$background_style>";
        echo "<div class=\"section-hero__content\">";
        echo "<h1 class=\"align-center\">" . $row['title'] . "</h1>";
        echo "<div class=\"generic-content align-center\">" . $row['content'] . "</div>";

        if ($row['model'] === 'title-text-image' && !empty($row['image'])) {
            $image_url = '/images/' . htmlspecialchars($row['image']);
            echo "<div class=\"content-image\"><img src=\"$image_url\" alt=\"Section Image\" class=\"welcome-image\"></div>";
        }

        if ($row['video_embed']) {
            $clean_embed = preg_replace('/sandbox(="[^"]*"|)/', '', $row['video_embed']);
            echo '<div class="video-embed">' . $clean_embed . '</div>';
        }

        if (!empty($row['button_text'])) {
            $button_link = htmlspecialchars($row['button_link'] ?: '');
            $button_text = htmlspecialchars($row['button_text']);
            echo "<div class=\"content__buttons\">";
            if (!empty($button_link) && $row['button_link'] !== '#') {
                echo "<a class=\"myButton modal-trigger\" href=\"#\" data-modal-link=\"$button_link\">$button_text</a>";
            } else {
                echo "<a class=\"myButton\" href=\"#\">$button_text</a>";
            }
            echo "</div>";
        }

        echo "</div>"; // Close section-hero__content
        echo "</div>"; // Close section-hero

        if ($current_index < count($sections)) {
            if ($use_default_divider) {
                echo "<div class=\"separator\"><img src=\"/public/down_arrow.png\" alt=\"Default Separator\" class=\"separator-image\"></div>";
            } elseif ($has_image && $img_role === 'Separator') {
                $image_url = '/images/' . htmlspecialchars($row['theme_img']);
                echo "<div class=\"separator\"><img src=\"$image_url\" alt=\"Custom Separator\" class=\"separator-image\"></div>";
            }
        }
    }
} else {
    echo "No sections found.";
}

echo '<div id="story-modal" class="modal">';
echo '<div class="modal-content">';
echo '<span class="modal-close">×</span>';
echo '<div id="modal-body"></div>';
echo '</div>';
echo '</div>';

$stmt->close();
$conn->close();
?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Create a debug log container
    const debugLog = document.createElement('div');
    debugLog.id = 'debug-log';
    document.body.appendChild(debugLog);

    function logDebug(message, color = 'green') {
        debugLog.insertAdjacentHTML('beforeend', `<div style="color: ${color}; font-weight: bold; text-align: center;">Debug: ${message}</div>`);
    }

    logDebug('Modal script loaded');

    const modal = document.getElementById('story-modal');
    const modalBody = document.getElementById('modal-body');
    const closeBtn = document.querySelector('.modal-close');
    const triggers = document.querySelectorAll('.modal-trigger');
    logDebug('Found ' + triggers.length + ' modal triggers');

    function openModal(content) {
        modalBody.innerHTML = content;
        modal.style.display = 'block';
        modal.setAttribute('aria-hidden', 'false');
        closeBtn.focus();
        logDebug('Modal opened');
    }

    function closeModal() {
        modal.style.display = 'none';
        modal.setAttribute('aria-hidden', 'true');
        modalBody.innerHTML = '';
        logDebug('Modal closed');
    }

    triggers.forEach(trigger => {
        trigger.addEventListener('click', function(e) {
            e.preventDefault();
            const link = this.getAttribute('data-modal-link');
            logDebug('Trigger clicked, link: ' + link);

            if (!link || link === '#' || link.includes('index.php')) {
                openModal('<p>This link cannot be loaded in a modal to prevent recursive loading.</p>');
                return;
            }

            const basePath = window.location.origin + '/public/';
            const absoluteLink = new URL(link, basePath).href;
            logDebug('Fetching absolute link: ' + absoluteLink);

            openModal('<p>Loading...</p>');

            fetch(absoluteLink)
                .then(response => {
                    logDebug('Fetch response status: ' + response.status + ' ' + response.statusText);
                    if (!response.ok) {
                        throw new Error('Network response was not ok: ' + response.statusText);
                    }
                    return response.text();
                })
                .then(data => {
                    logDebug('Fetched HTML length: ' + data.length);
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(data, 'text/html');

                    let content = doc.querySelector('.section-hero__content') || doc.querySelector('.content__entry');
                    if (content) {
                        const buttons = content.querySelectorAll('.content__buttons');
                        buttons.forEach(button => button.remove());

                        content.removeAttribute('style');
                        const scripts = content.querySelectorAll('script');
                        scripts.forEach(script => script.remove());
                        const styles = content.querySelectorAll('style');
                        scripts.forEach(script => script.remove());
                        const head = content.querySelector('head');
                        if (head) head.remove();
                        const nestedModals = content.querySelectorAll('.modal');
                        nestedModals.forEach(modal => modal.remove());
                        const debugMessages = content.querySelectorAll('div[style*="color: blue"], div[style*="color: green"], div[style*="color: red"]');
                        debugMessages.forEach(msg => msg.remove());

                        const baseUrl = new URL(absoluteLink, window.location.origin).href;
                        const images = content.querySelectorAll('img');
                        images.forEach(img => {
                            const src = img.getAttribute('src');
                            if (src && !src.startsWith('http')) {
                                const absoluteSrc = new URL(src, baseUrl).href;
                                img.setAttribute('src', absoluteSrc);
                            }
                        });

                        const iframes = content.querySelectorAll('iframe');
                        iframes.forEach(iframe => {
                            iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
                            iframe.setAttribute('allowfullscreen', '');
                        });

                        const contentHtml = content.innerHTML.trim();
                        if (contentHtml) {
                            openModal(contentHtml);
                        } else {
                            openModal('<p>No content found in .section-hero__content or .content__entry.</p>');
                        }
                    } else {
                        openModal('<p>Content could not be parsed from the page.</p>');
                    }
                })
                .catch(error => {
                    logDebug('Fetch error: ' + error.message, 'red');
                    openModal('<p>Sorry, the content could not be loaded: ' + error.message + '</p>');
                });
        });
    });

    closeBtn.addEventListener('click', closeModal);

    window.addEventListener('click', function(event) {
        if (event.target === modal) {
            closeModal();
        }
    });

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape' && modal.style.display === 'block') {
            closeModal();
        }
    });
});
</script>

custom.css

This is the final version that ensures the full-width background image on both PC and mobile:

css

/*
 * Custom CSS for NLT Chaplaincy CMS
 */

/* Ensure myButton overrides theme styles */
.content__buttons a.myButton {
    text-decoration: none !important;
}

a.myButtonBig {
    text-decoration: none !important;
}

/* Button Styles */
.myButtonBig {
    background: linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
    background-color: #44c767;
    border-radius: 28px;
    border: 1px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 21px;
    font-weight: bold;
    padding: 24px 42px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #2f6627;
    transition: all 0.3s ease;
}
.myButtonBig:hover {
    background: linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
    background-color: #5cbf2a;
    border-color: #137c21;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.myButtonBig:active {
    position: relative;
    top: 1px;
    background: linear-gradient(to bottom, #3ba052 5%, #4aa62b 100%);
    background-color: #3ba052;
    border-color: #0f5c18;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.myButton {
    background: linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
    background-color: #44c767;
    border-radius: 28px;
    border: 1px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 17px;
    font-weight: bold;
    padding: 16px 31px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #2f6627;
    transition: all 0.3s ease;
}
.myButton:hover {
    background: linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
    background-color: #5cbf2a;
    border-color: #137c21;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.myButton:active {
    position: relative;
    top: 1px;
    background: linear-gradient(to bottom, #3ba052 5%, #4aa62b 100%);
    background-color: #3ba052;
    border-color: #0f5c18;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dynamic Section Styles */
.content__entry {
    position: relative;
    padding: 20px;
    min-height: 200px;
    margin: 0 auto; /* Center the content */
    max-width: 1200px; /* Matches typical page width */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
}

/* Define align-center class to match PHP output */
.align-center {
    text-align: center;
}

/* Style debug messages for consistency */
div[style*="color: blue"],
div[style*="color: green"],
div[style*="color: red"] {
    text-align: center;
}

/* Title styles with HTML support */
.content__entry h1 {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.2;
    color: #333;
    margin-bottom: 1em; /* Increased for more spacing */
    padding-top: 1em; /* Adds space above */
    text-align: center;
    text-shadow: none;
}

/* Content styles with HTML support */
.generic-content {
    text-align: center;
    margin: 0 auto;
    max-width: 800px;
    font-size: 1em;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1em;
}

/* Fallback for dark backgrounds */
.content__entry[style*="background-image"] h1,
.content__entry[style*="background-image"] .generic-content {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Ensure HTML lists and paragraphs look good */
.generic-content p {
    margin: 0 0 1em 0;
}

/* Fix for hiding list bullets */
.generic-content ul,
.generic-content ol {
    margin: 0 0 1em 0;
    padding: 0 !important;
    list-style: none !important;
}

.generic-content li {
    margin-bottom: 0.5em;
    text-align: center;
    list-style: none !important;
}

/* Ensure no inline styles from HTML Editor override */
.generic-content ul[style*="list-style"],
.generic-content ol[style*="list-style"],
.generic-content li[style*="list-style"] {
    list-style: none !important;
}

/* Center buttons */
.content__buttons {
    text-align: center !important;
    margin: 2em 0 1em 0;
}

/* Ensure the button itself is centered */
.content__buttons a.myButton {
    display: inline-block;
    margin: 0 auto;
}

/* Override any parent container alignment */
.content__entry .content__buttons {
    text-align: center !important;
}

.welcome-image {
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    display: block;
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 1em auto;
    max-width: 800px;
    background: none;
}
.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.separator {
    text-align: center;
    margin: 20px 0;
}

.separator-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.separator img[src$="down_arrow.png"] {
    max-width: 256px;
}

/* Remove all <hr> styles */
hr {
    display: none !important;
    visibility: hidden !important;
}

/* More aggressive overrides for Publii */
.post__content hr,
.container hr,
.post__content hr[style],
.container hr[style] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide Publii dividers (pseudo-elements) */
.post__content::before,
.post__content::after,
.container::before,
.container::after,
.post__entry::before,
.post__entry::after,
.content__entry::before,
.content__entry::after,
.generic-content::before,
.generic-content::after {
    display: none !important;
    border: none !important;
    content: none !important;
}

/* Explicitly disable pseudo-elements on .separator */
.separator::before,
.separator::after {
    display: none !important;
    border: none !important;
    content: none !important;
}

/* Override Publii theme styles, excluding specific titles */
body, 
body p, 
body h2, 
body h3, 
body h4, 
body h5, 
body h6,
.post__content, 
.post__content p, 
.post__content h2, 
.post__content h3, 
.post__content h4, 
.post__content h5, 
.post__content h6,
.container, 
.container p, 
.container h2, 
.container h3, 
.container h4, 
.container h5, 
.container h6 {
    color: #333 !important;
}

/* Allow specific titles to stay white */
h1.post__title,
h1.hero__title,
h1.site__title {
    color: #fff !important;
}

/* Remove underlines from all buttons */
a.button, 
a.btn, 
a.post__button, 
.post__content a.button, 
.post__content a.btn, 
.post__content a.post__button, 
.container a.button, 
.container a.btn, 
.container a.post__button {
    text-decoration: none !important;
}

/* Custom Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    min-height: 200px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1001;
}

.modal-close:hover,
.modal-close:focus {
    color: #000;
    text-decoration: none;
}

#modal-body {
    font-size: 1em;
    line-height: 1.6;
    color: #333;
    max-width: 100%;
    box-sizing: border-box;
    padding-top: 40px;
}

#modal-body h1 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

#modal-body p {
    margin-bottom: 1em;
}

#modal-body * {
    max-width: 100%;
    box-sizing: border-box;
}

#modal-body img,
#modal-body div,
#modal-body table {
    max-width: 100%;
    height: auto;
}

.modal[aria-hidden="false"] {
    display: block;
}

.modal-close:focus {
    outline: 2px solid #44c767;
    outline-offset: 2px;
}

/* Updated styles for sections with inline background */
.section-hero--full {
    width: 100vw; /* Use viewport width to break out of parent constraints */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Center the element */
    margin: 0;
    padding: 0;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff; /* Fallback if no background */
}

/* Ensure content is visible */
.section-hero__content {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    z-index: 1;
}

/* Adjust content styles for dark backgrounds */
.section-hero--full[style*="background-image"] h1,
.section-hero--full[style*="background-image"] .generic-content {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Ensure default text color for sections without background */
.section-hero--full h1,
.section-hero--full .generic-content {
    color: #333;
}

/* Responsiveness */
@media (max-width: 768px) {
    .section-hero--full {
        min-height: 300px;
        width: 100vw; /* Ensure full viewport width on mobile */
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 0;
    }
    .section-hero__content {
        padding: 10px;
    }
    .section-hero__content h1 {
        font-size: 1.5em;
        margin-bottom: 0.75em;
        padding-top: 0.75em;
    }
    .generic-content {
        font-size: 0.9em;
        max-width: 100%;
        padding: 0 10px;
    }
}

Next Steps

• Keep Backups: You’ve already been great about keeping backups, but just as a reminder, keep copies of these final versions of pull_contents.php and custom.css in case you need to revert or reference them later.

• Monitor Performance: If you notice any performance issues (e.g., slow loading of background images), consider optimizing the images (e.g., compressing them or using modern formats like WebP).

• Future Enhancements: If you’d like to revisit the hero-style approach for more flexibility (e.g., to add parallax effects or overlays), we can explore that in the future with a more robust setup.

Thank you for your patience and collaboration throughout this process! I’m glad we got everything working as expected. If you have any more questions or need further adjustments, feel free to reach out.

Original Chat

<<Some more bug-fixes, like only one section is loaded for task-map, missing

Q: I've tested and things looks very good now! Since, I'm going to send open the CMS/Task-map hybrid for testing, how can I hide the debug msg.?

A: I’m thrilled to hear that everything is looking good with the three-dot separator and that the CMS/Task-map hybrid is ready for testing! Hiding the debug messages is a great idea to ensure a clean user experience for testers. Let’s go through how to disable the debug messages in both pull_contents.php and the modal JavaScript, while keeping the functionality intact.

Analysis of Debug Messages

Debug Messages in pull_contents.php

The debug messages in pull_contents.php are primarily used to log information about the page detection and section loading process. They are output as

echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Page set from GET: '$current_page'</div>";
echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Calling file: '$calling_file'</div>";
echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: REQUEST_URI: '$request_uri'</div>";
echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page after str_replace: '$current_page'</div>";
echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page set to 'landing'</div>";
echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page updated from REQUEST_URI: '$current_page'</div>";
echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Final current page: '$current_page'</div>";

logDebug('Modal script loaded');
logDebug('Found ' + triggers.length + ' modal triggers');
logDebug('Trigger clicked, link: ' + link);
logDebug('Fetching absolute link: ' + absoluteLink);
logDebug('Fetch response status: ' + response.status + ' ' + response.statusText);
logDebug('Fetched HTML length: ' + data.length);
logDebug('Modal opened');
logDebug('Modal closed');
logDebug('Fetch error: ' + error.message, 'red');

<?php
// pull-contents.php

// Debug toggle: Set to true to enable debug messages, false to disable
define('DEBUG', false);

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$config_path = '../config.php';
if (!file_exists($config_path)) {
    die("Error: config.php not found at $config_path");
}
require_once $config_path;

if (!isset($dbServer) || !isset($dbUsername) || !isset($dbPassword) || !isset($dbDatabase)) {
    die("Error: AppGini database variables not defined in config.php");
}

$conn = new mysqli($dbServer, $dbUsername, $dbPassword, $dbDatabase, $dbPort ?: 3306);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Auto-detect page from calling file if $_GET['page'] not set
if (isset($_GET['page'])) {
    $current_page = $_GET['page'];
    if (DEBUG) {
        echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Page set from GET: '$current_page'</div>";
    }
} else {
    $calling_file = basename($_SERVER['SCRIPT_FILENAME']);
    $request_uri = $_SERVER['REQUEST_URI'];
    if (DEBUG) {
        echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Calling file: '$calling_file'</div>";
        echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: REQUEST_URI: '$request_uri'</div>";
    }
    $current_page = str_replace('.php', '', $calling_file);
    if (DEBUG) {
        echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page after str_replace: '$current_page'</div>";
    }
    if ($current_page === 'index') {
        $current_page = 'landing';
        if (DEBUG) {
            echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page set to 'landing'</div>";
        }
        // Fallback: Check REQUEST_URI if SCRIPT_FILENAME returns 'index'
        if (preg_match('/\/(task-map)\.php/', $request_uri, $matches)) {
            $current_page = $matches[1];
            if (DEBUG) {
                echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Current page updated from REQUEST_URI: '$current_page'</div>";
            }
        }
    }
}
$status = 'Show';

if (DEBUG) {
    echo "<div style='color: blue; font-weight: bold; text-align: center;'>Debug: Final current page: '$current_page'</div>";
}

$sql = "SELECT title, content, image, video_embed, button_link, button_text, position, model, date_edited, theme_img, img_role, chk_divider FROM web_content WHERE page = ? AND status = ? ORDER BY position ASC, date_edited DESC";
$stmt = $conn->prepare($sql);
if (!$stmt) {
    die("Prepare failed: " . $conn->error);
}

$stmt->bind_param("ss", $current_page, $status);
$stmt->execute();
$result = $stmt->get_result();

$sections = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $pos = $row['position'];
        if (!isset($sections[$pos]) || $row['date_edited'] > $sections[$pos]['date_edited']) {
            $sections[$pos] = $row;
        }
    }
}

if (!empty($sections)) {
    ksort($sections);
    $current_index = 0;

    foreach ($sections as $position => $row) {
        $current_index++;
        if ($position < 1 || $position > 10) {
            continue;
        }

        $has_image = !empty($row['theme_img']);
        $img_role = trim($row['img_role'] ?? 'Background');
        $use_default_divider = $row['chk_divider'] == 1;

        // Add page-specific class if desired
        $extra_class = ($current_page === 'task-map') ? ' task-map-section' : '';

        // Use a hero-like structure for full-width, but apply background directly
        $background_style = ($has_image && $img_role === 'Background') ? " style=\"background-image: url('/images/" . htmlspecialchars($row['theme_img']) . "');\"" : '';
        echo "<div class=\"section-hero section-hero--full$extra_class\"$background_style>";
        echo "<div class=\"section-hero__content\">";
        echo "<h1 class=\"align-center\">" . $row['title'] . "</h1>";
        echo "<div class=\"generic-content align-center\">" . $row['content'] . "</div>";

        if ($row['model'] === 'title-text-image' && !empty($row['image'])) {
            $image_url = '/images/' . htmlspecialchars($row['image']);
            echo "<div class=\"content-image\"><img src=\"$image_url\" alt=\"Section Image\" class=\"welcome-image\"></div>";
        }

        if ($row['video_embed']) {
            $clean_embed = preg_replace('/sandbox(="[^"]*"|)/', '', $row['video_embed']);
            echo '<div class="video-embed">' . $clean_embed . '</div>';
        }

        if (!empty($row['button_text'])) {
            $button_link = htmlspecialchars($row['button_link'] ?: '');
            $button_text = htmlspecialchars($row['button_text']);
            echo "<div class=\"content__buttons\">";
            if (!empty($button_link) && $row['button_link'] !== '#') {
                echo "<a class=\"myButton modal-trigger\" href=\"#\" data-modal-link=\"$button_link\">$button_text</a>";
            } else {
                echo "<a class=\"myButton\" href=\"#\">$button_text</a>";
            }
            echo "</div>";
        }

        echo "</div>"; // Close section-hero__content
        echo "</div>"; // Close section-hero

        if ($current_index < count($sections)) {
            if ($use_default_divider) {
                echo "<div class=\"separator\"><img src=\"/public/down_arrow.png\" alt=\"Default Separator\" class=\"separator-image\"></div>";
            } elseif ($has_image && $img_role === 'Separator') {
                $image_url = '/images/' . htmlspecialchars($row['theme_img']);
                echo "<div class=\"separator\"><img src=\"$image_url\" alt=\"Custom Separator\" class=\"separator-image\"></div>";
            }
        }
    }
} else {
    echo "No sections found.";
}

echo '<div id="story-modal" class="modal">';
echo '<div class="modal-content">';
echo '<span class="modal-close">×</span>';
echo '<div id="modal-body"></div>';
echo '</div>';
echo '</div>';

$stmt->close();
$conn->close();
?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Debug toggle: Set to true to enable debug messages, false to disable
    const DEBUG = false;

    // Create a debug log container
    const debugLog = document.createElement('div');
    debugLog.id = 'debug-log';
    document.body.appendChild(debugLog);

    function logDebug(message, color = 'green') {
        if (DEBUG) {
            debugLog.insertAdjacentHTML('beforeend', `<div style="color: ${color}; font-weight: bold; text-align: center;">Debug: ${message}</div>`);
        }
    }

    if (DEBUG) logDebug('Modal script loaded');

    const modal = document.getElementById('story-modal');
    const modalBody = document.getElementById('modal-body');
    const closeBtn = document.querySelector('.modal-close');
    const triggers = document.querySelectorAll('.modal-trigger');
    if (DEBUG) logDebug('Found ' + triggers.length + ' modal triggers');

    function openModal(content) {
        modalBody.innerHTML = content;
        modal.style.display = 'block';
        modal.setAttribute('aria-hidden', 'false');
        closeBtn.focus();
        if (DEBUG) logDebug('Modal opened');
    }

    function closeModal() {
        modal.style.display = 'none';
        modal.setAttribute('aria-hidden', 'true');
        modalBody.innerHTML = '';
        if (DEBUG) logDebug('Modal closed');
    }

    triggers.forEach(trigger => {
        trigger.addEventListener('click', function(e) {
            e.preventDefault();
            const link = this.getAttribute('data-modal-link');
            if (DEBUG) logDebug('Trigger clicked, link: ' + link);

            if (!link || link === '#' || link.includes('index.php')) {
                openModal('<p>This link cannot be loaded in a modal to prevent recursive loading.</p>');
                return;
            }

            const basePath = window.location.origin + '/public/';
            const absoluteLink = new URL(link, basePath).href;
            if (DEBUG) logDebug('Fetching absolute link: ' + absoluteLink);

            openModal('<p>Loading...</p>');

            fetch(absoluteLink)
                .then(response => {
                    if (DEBUG) logDebug('Fetch response status: ' + response.status + ' ' + response.statusText);
                    if (!response.ok) {
                        throw new Error('Network response was not ok: ' + response.statusText);
                    }
                    return response.text();
                })
                .then(data => {
                    if (DEBUG) logDebug('Fetched HTML length: ' + data.length);
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(data, 'text/html');

                    // Use querySelectorAll to get all sections
                    const sections = doc.querySelectorAll('.section-hero__content');
                    if (sections.length > 0) {
                        let combinedContent = '';
                        sections.forEach((content, index) => {
                            // Remove buttons
                            const buttons = content.querySelectorAll('.content__buttons');
                            buttons.forEach(button => button.remove());

                            // Clean up the content
                            content.removeAttribute('style');
                            const scripts = content.querySelectorAll('script');
                            scripts.forEach(script => script.remove());
                            const styles = content.querySelectorAll('style');
                            styles.forEach(style => style.remove());
                            const head = content.querySelector('head');
                            if (head) head.remove();
                            const nestedModals = content.querySelectorAll('.modal');
                            nestedModals.forEach(modal => modal.remove());
                            const debugMessages = content.querySelectorAll('div[style*="color: blue"], div[style*="color: green"], div[style*="color: red"]');
                            debugMessages.forEach(msg => msg.remove());

                            // Fix relative image URLs
                            const baseUrl = new URL(absoluteLink, window.location.origin).href;
                            const images = content.querySelectorAll('img');
                            images.forEach(img => {
                                const src = img.getAttribute('src');
                                if (src && !src.startsWith('http')) {
                                    const absoluteSrc = new URL(src, baseUrl).href;
                                    img.setAttribute('src', absoluteSrc);
                                }
                            });

                            // Fix iframes
                            const iframes = content.querySelectorAll('iframe');
                            iframes.forEach(iframe => {
                                iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
                                iframe.setAttribute('allowfullscreen', '');
                            });

                            // Add the section content to the combined HTML
                            combinedContent += content.innerHTML.trim();
                            // Add a custom separator between sections
                            if (index < sections.length - 1) {
                                combinedContent += '<div class="modal-section-separator"></div>';
                            }
                        });

                        if (combinedContent) {
                            openModal(combinedContent);
                        } else {
                            openModal('<p>No content found in .section-hero__content.</p>');
                        }
                    } else {
                        // Fallback to .content__entry if no .section-hero__content is found
                        const legacyContent = doc.querySelector('.content__entry');
                        if (legacyContent) {
                            const buttons = legacyContent.querySelectorAll('.content__buttons');
                            buttons.forEach(button => button.remove());

                            legacyContent.removeAttribute('style');
                            const scripts = legacyContent.querySelectorAll('script');
                            scripts.forEach(script => script.remove());
                            const styles = legacyContent.querySelectorAll('style');
                            styles.forEach(style => style.remove());
                            const head = legacyContent.querySelector('head');
                            if (head) head.remove();
                            const nestedModals = legacyContent.querySelectorAll('.modal');
                            nestedModals.forEach(modal => modal.remove());
                            const debugMessages = legacyContent.querySelectorAll('div[style*="color: blue"], div[style*="color: green"], div[style*="color: red"]');
                            debugMessages.forEach(msg => msg.remove());

                            const baseUrl = new URL(absoluteLink, window.location.origin).href;
                            const images = legacyContent.querySelectorAll('img');
                            images.forEach(img => {
                                const src = img.getAttribute('src');
                                if (src && !src.startsWith('http')) {
                                    const absoluteSrc = new URL(src, baseUrl).href;
                                    img.setAttribute('src', absoluteSrc);
                                }
                            });

                            const iframes = legacyContent.querySelectorAll('iframe');
                            iframes.forEach(iframe => {
                                iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
                                iframe.setAttribute('allowfullscreen', '');
                            });

                            const contentHtml = legacyContent.innerHTML.trim();
                            if (contentHtml) {
                                openModal(contentHtml);
                            } else {
                                openModal('<p>No content found in .content__entry.</p>');
                            }
                        } else {
                            openModal('<p>Content could not be parsed from the page.</p>');
                        }
                    }
                })
                .catch(error => {
                    if (DEBUG) logDebug('Fetch error: ' + error.message, 'red');
                    openModal('<p>Sorry, the content could not be loaded: ' + error.message + '</p>');
                });
        });
    });

    closeBtn.addEventListener('click', closeModal);

    window.addEventListener('click', function(event) {
        if (event.target === modal) {
            closeModal();
        }
    });

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape' && modal.style.display === 'block') {
            closeModal();
        }
    });
});
</script>

if ($use_default_divider) {
    echo "<div class=\"separator\"><img src=\"/public/down_arrow.png\" alt=\"Default Separator\" class=\"separator-image\"></div>";
} elseif ($has_image && $img_role === 'Separator') {
    $image_url = '/images/' . htmlspecialchars($row['theme_img']);
    echo "<div class=\"separator\"><img src=\"$image_url\" alt=\"Custom Separator\" class=\"separator-image\"></div>";
}

.separator {
    text-align: center;
    margin: 40px 0;
}

/*
 * Custom CSS for NLT Chaplaincy CMS
 */

/* Ensure myButton overrides theme styles */
.content__buttons a.myButton {
    text-decoration: none !important;
}

a.myButtonBig {
    text-decoration: none !important;
}

/* Button Styles */
.myButtonBig {
    background: linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
    background-color: #44c767;
    border-radius: 28px;
    border: 1px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 21px;
    font-weight: bold;
    padding: 24px 42px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #2f6627;
    transition: all 0.3s ease;
}
.myButtonBig:hover {
    background: linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
    background-color: #5cbf2a;
    border-color: #137c21;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.myButtonBig:active {
    position: relative;
    top: 1px;
    background: linear-gradient(to bottom, #3ba052 5%, #4aa62b 100%);
    background-color: #3ba052;
    border-color: #0f5c18;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.myButton {
    background: linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
    background-color: #44c767;
    border-radius: 28px;
    border: 1px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 17px;
    font-weight: bold;
    padding: 16px 31px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #2f6627;
    transition: all 0.3s ease;
}
.myButton:hover {
    background: linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
    background-color: #5cbf2a;
    border-color: #137c21;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.myButton:active {
    position: relative;
    top: 1px;
    background: linear-gradient(to bottom, #3ba052 5%, #4aa62b 100%);
    background-color: #3ba052;
    border-color: #0f5c18;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dynamic Section Styles */
.content__entry {
    position: relative;
    padding: 20px;
    min-height: 200px;
    margin: 0 auto; /* Center the content */
    max-width: 1200px; /* Matches typical page width */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
}

/* Define align-center class to match PHP output */
.align-center {
    text-align: center;
}

/* Style debug messages for consistency */
div[style*="color: blue"],
div[style*="color: green"],
div[style*="color: red"] {
    text-align: center;
}

/* Title styles with HTML support */
.content__entry h1 {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.2;
    color: #333;
    margin-bottom: 1em; /* Increased for more spacing */
    padding-top: 1em; /* Adds space above */
    text-align: center;
    text-shadow: none;
}

/* Content styles with HTML support */
.generic-content {
    text-align: center;
    margin: 0 auto;
    max-width: 800px;
    font-size: 1em;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1em;
}

/* Fallback for dark backgrounds */
.content__entry[style*="background-image"] h1,
.content__entry[style*="background-image"] .generic-content {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Ensure HTML lists and paragraphs look good */
.generic-content p {
    margin: 0 0 1em 0;
}

/* Fix for hiding list bullets */
.generic-content ul,
.generic-content ol {
    margin: 0 0 1em 0;
    padding: 0 !important;
    list-style: none !important;
}

.generic-content li {
    margin-bottom: 0.5em;
    text-align: center;
    list-style: none !important;
}

/* Ensure no inline styles from HTML Editor override */
.generic-content ul[style*="list-style"],
.generic-content ol[style*="list-style"],
.generic-content li[style*="list-style"] {
    list-style: none !important;
}

/* Center buttons */
.content__buttons {
    text-align: center !important;
    margin: 2em 0 1em 0;
}

/* Ensure the button itself is centered */
.content__buttons a.myButton {
    display: inline-block;
    margin: 0 auto;
}

/* Override any parent container alignment */
.content__entry .content__buttons {
    text-align: center !important;
}

.welcome-image {
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    display: block;
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 1em auto;
    max-width: 800px;
    background: none;
}
.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.separator {
    text-align: center;
    margin: 60px 0 20px 0; /* Increased margin-top, reduced margin-bottom */
}

/* Adjust separator margin-top when following a section without a background image */
.section-hero--full:not([style*="background-image"]) + .separator {
    margin-top: 40px; /* Reduced from 60px to 40px for no-background case */
}

.separator-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.separator img[src$="down_arrow.png"] {
    max-width: 256px;
}

/* Remove all <hr> styles */
hr {
    display: none !important;
    visibility: hidden !important;
}

/* More aggressive overrides for Publii */
.post__content hr,
.container hr,
.post__content hr[style],
.container hr[style] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide Publii dividers (pseudo-elements) */
.post__content::before,
.post__content::after,
.container::before,
.container::after,
.post__entry::before,
.post__entry::after,
.content__entry::before,
.content__entry::after,
.generic-content::before,
.generic-content::after {
    display: none !important;
    border: none !important;
    content: none !important;
}

/* Explicitly disable pseudo-elements on .separator */
.separator::before,
.separator::after {
    display: none !important;
    border: none !important;
    content: none !important;
}

/* Override Publii theme styles, excluding specific titles */
body, 
body p, 
body h2, 
body h3, 
body h4, 
body h5, 
body h6,
.post__content, 
.post__content p, 
.post__content h2, 
.post__content h3, 
.post__content h4, 
.post__content h5, 
.post__content h6,
.container, 
.container p, 
.container h2, 
.container h3, 
.container h4, 
.container h5, 
.container h6 {
    color: #333 !important;
}

/* Allow specific titles to stay white */
h1.post__title,
h1.hero__title,
h1.site__title {
    color: #fff !important;
}

/* Remove underlines from all buttons */
a.button, 
a.btn, 
a.post__button, 
.post__content a.button, 
.post__content a.btn, 
.post__content a.post__button, 
.container a.button, 
.container a.btn, 
.container a.post__button {
    text-decoration: none !important;
}

/* Custom Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    min-height: 200px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1001;
}

.modal-close:hover,
.modal-close:focus {
    color: #000;
    text-decoration: none;
}

#modal-body {
    font-size: 1em;
    line-height: 1.6;
    color: #333;
    max-width: 100%;
    box-sizing: border-box;
    padding-top: 40px;
}

#modal-body h1 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

#modal-body p {
    margin-bottom: 1em;
}

#modal-body * {
    max-width: 100%;
    box-sizing: border-box;
}

#modal-body img,
#modal-body div,
#modal-body table {
    max-width: 100%;
    height: auto;
}

.modal[aria-hidden="false"] {
    display: block;
}

.modal-close:focus {
    outline: 2px solid #44c767;
    outline-offset: 2px;
}

/* Updated styles for sections with inline background */
.section-hero--full {
    width: 100vw; /* Use viewport width to break out of parent constraints */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Center the element */
    margin: 0;
    padding: 0;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff; /* Fallback if no background */
}

/* Ensure content is visible */
.section-hero__content {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    z-index: 1;
}

/* Adjust content styles for dark backgrounds */
.section-hero--full[style*="background-image"] h1,
.section-hero--full[style*="background-image"] .generic-content {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Ensure default text color for sections without background */
.section-hero--full h1,
.section-hero--full .generic-content {
    color: #333;
}

/* Custom separator for modal sections (three-dot style) */
.modal-section-separator {
    text-align: center;
    margin: 20px 0;
    font-size: 24px;
    line-height: 1;
    color: #666;
}
.modal-section-separator::before {
    content: "···";
}

/* Responsiveness */
@media (max-width: 768px) {
    .section-hero--full {
        min-height: 300px;
        width: 100vw; /* Ensure full viewport width on mobile */
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding: 0;
    }
    .section-hero__content {
        padding: 10px;
    }
    .section-hero__content h1 {
        font-size: 1.5em;
        margin-bottom: 0.75em;
        padding-top: 0.75em;
    }
    .generic-content {
        font-size: 0.9em;
        max-width: 100%;
        padding: 0 10px;
    }
}

Claudio
liclaudio38@gmail.com
Claudio

About Me

Li

系統開發 AppGini/內容管理 Grok