Sitedown File Update #5530

Kanonimpresor · 2025-07-07T15:40:43Z

Kanonimpresor
Jul 7, 2025

I need your help. Can someone help me organize it?

I'm updating the sitedown file (it was already placed in the templates folder).
Now, the social icons don't work.

{XURL_ICONS: type=facebook,twitter,instagram,youtube,flickr,vimeo,github,linkedin&size=3x&tip-pos=bottom}

There are three .css file references (do they need to be created? Do they go in the theme's CSS folder?)

<link rel="stylesheet" href="{SITEDOWN_SOCIAL_CSS}" type="text/css" media="all" />
<link rel="stylesheet" href="{SITEDOWN_E107_CSS}" type="text/css" media="all" />
<link rel="stylesheet" href="{SITEDOWN_THEME_CSS}" type="text/css" media="all" />

and the file (bootstrap.min.css) refers to the class (sitedown) was it next to style.css or in the folder?

and finally, I updated bootstrap but I couldn't get font-awesome

<link rel="stylesheet" media="all" property="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /> 
<link rel="stylesheet" media="all" property="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

Thank you!

{
	$SITEDOWN_TABLE = (defined("STANDARDS_MODE") ? "" : "<?xml version='1.0' encoding='utf-8' "."?".">")."<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">
	";
	$SITEDOWN_TABLE .= '
    <html xmlns="http://www.w3.org/1999/xhtml"'.(defined('TEXTDIRECTION') ? ' dir="'.TEXTDIRECTION.'"' : '').(defined('CORE_LC') ? ' xml:lang=\''.CORE_LC.'\'' : '').'>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="content-style-type" content="text/css" />
		
		<link rel="icon" href="{SITEDOWN_FAVICON}" type="image/x-icon" />
		<link rel="shortcut icon" href="{SITEDOWN_FAVICON}" type="image/xicon" />
		<link rel="stylesheet" media="all" property="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" media="all" property="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
		
		<link rel="stylesheet" href="{SITEDOWN_SOCIAL_CSS}" type="text/css" media="all" />
		<link rel="stylesheet" href="{SITEDOWN_E107_CSS}" type="text/css" media="all" />
		<link rel="stylesheet" href="{SITEDOWN_THEME_CSS}" type="text/css" media="all" />
		
		<title>{SITEDOWN_TABLE_PAGENAME}</title>
		
		<style>
			.img-responsive { display: inline }
		</style>
	</head>
	
	<body class="sitedown" style="background-image: url({THEME}images/fondo_sitedown.jpg)">
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
		<div style="text-align:center">{LOGO: h=300}</div>
			<hr />
			<br />
		</div>
	</div>
	<div class="row">
		<div class="col-md-6">
			<div style="text-align:center ">
			{SITEDOWN_TABLE_MAINTAINANCETEXT}
			</div>
		</div>
		<div class="col-md-6">
			<form role="form">
				<div class="form-group">
					 
					<label for="exampleInputEmail1">
						Email address
					</label>
					<input type="email" class="form-control" id="exampleInputEmail1" />
				</div>
				<div class="form-group">
					 
					<label for="exampleInputPassword1">
						Password
					</label>
					<input type="password" class="form-control" id="exampleInputPassword1" />
				</div>
				<div class="form-group">
					 
					<label for="exampleInputFile">
						File input
					</label>
					<input type="file" class="form-control-file" id="exampleInputFile" />
					<p class="help-block">
						Example block-level help text here.
					</p>
				</div>
				<div class="checkbox">
					 
					<label>
						<input type="checkbox" /> Check me out
					</label>
				</div> 
				<button type="submit" class="btn btn-primary">
					Submit
				</button>
			</form>
		</div>
					<div style="margin-top:100px; text-align:center">
			{XURL_ICONS: type=facebook,twitter,instagram,youtube,flickr,vimeo,github,linkedin&size=3x&tip-pos=bottom}
			</div>
	</div>
</div>
	</body>
	</html>';```

Kanonimpresor · 2025-07-14T17:40:45Z

Kanonimpresor
Jul 14, 2025
Author

What possibility do we have for the (template)sitedown.php file to be rendered to update this page style? A page that isn't just for a maintenance announcement, but has countless uses.

Currently, the contact form, social icons, etc. don't render.

11 replies

rica-carv Jul 18, 2025

@tgtje I can't tell you if that icons problems is solved in my template, i don't use them anywhere...

By the way, my template is a copy of the current core template, with some modifications, so as far i see it, mine is the correct one....

tgtje Jul 19, 2025

@rica-carv (@Kanonimpresor ) i did some checking why you claim to see it, i and Norberto not.
Made some changes to sitedown and affiliates > icons (crippled appear after adding (older) fontello css, present no longer in git.
Having noticed that; went for changes (a commit by you was latest changing issue).
Things were altered. Those changes checked/added > still a no go.
AFTER changing the sitedown-shortcode to use style css they appear..
Who, where it is wrong or forgotten or... ????

added for history:
2021 commit : d7ef419
fontello css added

2023 commit: rica-carv@cab361e
(refer e_module; shortcode not changed )

rica-carv Jul 19, 2025

@tgtje

a commit by you was latest changing issue

Comit by me???

Those files are not changed since 2021, and all with commits by cameron....
https://github.com/e107inc/e107/commits/d7ef419553f060c347e210fa5a178741aa20ed61/e107_core/shortcodes/batch/sitedown_shortcodes.php
https://github.com/e107inc/e107/commits/d7ef419553f060c347e210fa5a178741aa20ed61/e107_core/templates/sitedown_template.php

i did some checking why you claim to see it, i and Norberto not.

I never said i see it, i said i don't use them.
Anyway i've tested at the begining this year and the icons showed up in sitedown template rendering....
That's why i removed them from my template
I've tested today and they don't render, indeed...

tgtje Jul 19, 2025

Sorry my mistake, thought commit, but reference..(can not point to it)

Kanonimpresor Aug 2, 2025
Author

After analyzing and searching for solutions with my friend AI (Windsurf - VSCode clone) we made some updates to the markup (.html) and adapted (sitedown_template) to something more modern.

If you want to use it, it's below.

<?php
/*
 * e107 website system
 *
 * Copyright (C) 2008-2009 e107 Inc (e107.org)
 * Released under the terms and conditions of the
 * GNU General Public License (http://www.gnu.org/licenses/gpl.txt)
 */

if (!defined('e107_INIT')) { exit; }

// ##### SITEDOWN TABLE -----------------------------------------------------------------
if(!isset($SITEDOWN_TABLE))
{
	// Use modern HTML5 doctype.
	$SITEDOWN_TABLE = "<!DOCTYPE html>";
	$SITEDOWN_TABLE .= '
    <html lang="'.CORE_LC.'"'.(defined('TEXTDIRECTION') ? ' dir="'.TEXTDIRECTION.'"' : '').'>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{SITEDOWN_TABLE_PAGENAME}</title>
        <link rel="icon" href="{SITEDOWN_FAVICON}" type="image/x-icon" />
        <!-- Bootstrap 5.3.2 -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Font Awesome 6.4.2 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
        <!-- Google Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

    <style>
        body.sitedown {
            padding: 0;
            margin: 0;
            height: 100vh;
            overflow: hidden;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
        }
        .sitedown-left {
            background-color: #272C30;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            padding: 20px;
            overflow-y: auto;
            overflow-x: hidden;
            text-align: center;
        }
        .sitedown-right {
            background-image: url({THEME}images/sitedown.jpg);
            background-size: cover;
            background-position: center;
            height: 100vh;
        }
        .content-wrapper {
            max-width: 420px;
        }
        .logo-container img {
            max-height: 80px;
            margin-bottom: 40px;
        }
        .text-content h1 {
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        .text-content p {
            color: #ccc;
            line-height: 1.6;
        }
        .countdown-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 40px 0;
        }
        .countdown-item {
            background-color: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: 8px;
            width: 90px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .countdown-item span {
            font-size: 2.5rem;
            font-weight: 700;
            display: block;
        }
        .countdown-item .label {
            font-size: 0.75rem;
            text-transform: uppercase;
            color: #ccc;
        }
        .social-icons {
            margin-top: 40px;
        }
        .social-icons a {
            color: #fff;
            margin: 0 12px;
            font-size: 1.5rem;
            transition: color 0.3s ease;
        }
        .social-icons a:hover {
            color: #aaa;
        }
    </style>
    </head>
    <body class="sitedown">
        <div class="container-fluid g-0">
            <div class="row g-0">
                <!-- Left Side (Content) -->
                <div class="col-lg-5 col-md-6 sitedown-left">
                    <div class="content-wrapper">
                        <div class="logo-container">{LOGO: h=150}</div>
                        <div class="text-content">
                            <h1>Coming Soon</h1>
                            <div>{SITEDOWN_TABLE_MAINTAINANCETEXT}</div>
                        </div>
                        <div id="countdown" class="countdown-container">
                            <div class="countdown-item"><span id="days">00</span><div class="label">Dias</div></div>
                            <div class="countdown-item"><span id="hours">00</span><div class="label">Horas</div></div>
                            <div class="countdown-item"><span id="minutes">00</span><div class="label">Minutos</div></div>
                            <div class="countdown-item"><span id="seconds">00</span><div class="label">Segundos</div></div>
                        </div>
                        <div class="social-icons">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
                <!-- Right Side (Image) -->
                <div class="col-lg-7 col-md-6 d-none d-md-block sitedown-right"></div>
            </div>
        </div>

        <script>
            // ATENÇÃO: Altere a data de término da contagem regressiva aqui.
            const countDownDate = new Date("Dec 31, 2025 23:59:59").getTime();

            const x = setInterval(function() {
                const now = new Date().getTime();
                const distance = countDownDate - now;

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                document.getElementById("days").innerText = days.toString().padStart(2, \'0\');
                document.getElementById("hours").innerText = hours.toString().padStart(2, \'0\');
                document.getElementById("minutes").innerText = minutes.toString().padStart(2, \'0\');
                document.getElementById("seconds").innerText = seconds.toString().padStart(2, \'0\');

                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("countdown").innerHTML = "<h2>Estamos de volta!</h2>";
                }
            }, 1000);
        </script>
    </body>
    </html>';
}
````

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Sitedown File Update #5530

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 11 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Sitedown File Update #5530

Uh oh!

Kanonimpresor Jul 7, 2025

Replies: 1 comment · 11 replies

Uh oh!

Kanonimpresor Jul 14, 2025 Author

Uh oh!

Uh oh!

rica-carv Jul 18, 2025

Uh oh!

Uh oh!

tgtje Jul 19, 2025

Uh oh!

rica-carv Jul 19, 2025

Uh oh!

tgtje Jul 19, 2025

Uh oh!

Kanonimpresor Aug 2, 2025 Author

Kanonimpresor
Jul 7, 2025

Replies: 1 comment 11 replies

Kanonimpresor
Jul 14, 2025
Author

Kanonimpresor Aug 2, 2025
Author