Wartungsmodus-Template in Contao 4 anpassen
Wenn der Wartungsmodus aktiviert ist oder auf der Contao-Webseite ein Fehler auftritt, erscheint immer das Standard-Wartungsmodus-Template von Contao. Doch wie kann man das anpassen?
Für Contao 4.9+:
Um das Template für den Wartungsmodus und Fehlermeldungen anzupassen, musst du lediglich das Template layout.html.twig anpassen. Dazu legst du das Template unter folgender Ordnerstruktur an: templates/bundles/ContaoCoreBundle/Error/layout.html.twig.
Ab Contao 4.11 ist es auch möglich das Template direkt im Backend unter Templates zu bearbeiten. In der aktuellen LTS Version Contao 4.13 kann das Wartungsmodus Template ebanfasslls so angepasst werden.
Nach Anlegen der Datei ist es noch nötig den Produktions-Cache im Contao Manager zu leeren.
Texte anpassen:
Um die Texte für den Wartungsmodus anzupassen, bearbeitest du unter system/config die Datei langconfig.php. Wenn die Datei noch nicht existierst legst du sie einfach an. Füge dort folgenden Inhalt ein, anschließend muss im Contao Manager wieder der Produktions-Cache geleert werden.
$GLOBALS['TL_LANG']['XPT']['unavailable'] = 'Webseite in Wartung';
$GLOBALS['TL_LANG']['XPT']['maintenance'] = 'Aktuell werden an der Webseite Wartungsarbeiten durchgeführt. Die Seite sollte bald wieder erreichbar sein, schaue gern wieder zu einem späteren Zeitpunkt vorbei.';
layout.html.twig
{% trans_default_domain 'contao_exception' %}
<!DOCTYPE html>
<html lang="{{ language }}">
<head>
{% block head %}
<meta charset="utf-8">
<title>{% block title %}{{ statusCode }} Error{% endblock %}</title>
<meta name="generator" content="Contao Open Source CMS">
<meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no">
<link rel="stylesheet" href="{{ asset('system/themes/flexible/fonts.min.css') }}">
{% block style %}
<style>
html {
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
font-weight: 400;
font-size: 1em;
color: #000;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f4f8f0;
}
h1, h2, h3 {
font-weight: 600;
color: #86af49;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body {
color: #222;
font-weight: 300;
}
h1, h2, h3, strong, b, th {
font-weight: 500;
}
}
a, a:visited {
text-decoration: none;
color: #e4790f;
}
a:hover {
text-decoration: underline;
}
h1 {
margin: 0;
padding-bottom: 2%;
font-size: 3em;
text-align: center;
}
h2, h3 {
font-size: 1.5em;
}
pre, code {
font: 300 .75rem/1.25 "Roboto Mono", monospace;
}
table {
margin: 1.25em 0 1em;
border-collapse: collapse;
border-spacing: 0;
}
th, td {
text-align: left;
padding: 2px 10px 4px;
border: solid #ccc;
border-width: 1px 0;
}
th {
background: #f3f3f3;
}
#header {
padding: 12px 0 10px;
width: 100%;
text-align: center;
}
#content {
width: 100%;
}
#footer {
font-size: 0.75em;
text-align: center;
padding: .5em 0;
color: #808080;
}
.wrap {
width: 60%;
margin: 0 auto;
padding: 1em;
overflow: hidden;
}
.header-logo {
display: inline-block;
}
.block-error {
margin-bottom: 20px;
background-color: #fff;
padding: 15px 30px 24px;
word-wrap: break-word;
overflow: hidden;
border: 1px solid #f2f2f2;
}
.block-error:before {
float: left;
content: "</";
font-size: 5em;
color: #ccc;
}
.block-error .inner {
padding-left: 7em;
}
.container {
width: 100%;
}
.header-logo img {
max-width: 300px;
height: auto;
}
</style>
{% endblock %}
{% endblock %}
</head>
<body>
<div class="container">
<div id="header">
<div class="wrap">
<div class="header-logo">
<img src="files/mate/img/mate_logo.png">
</div>
</div>
</div>
<div id="content">
<div class="wrap">
<div class="error">
{% block message %}<h1>{{ block('title') }}</h1>{% endblock %}
<div class="block-error">
<div class="inner">
<div class="text-error">
{% block main %}
{% if block('matter') is defined %}
{% set _block = block('matter') %}
{% if _block|trim is not empty %}
<h2>{{ 'XPT.matter'|trans }}</h2>
{{ _block|raw }}
{% endif %}
{% endif %}
{% if block('howToFix') is defined %}
{% set _block = block('howToFix') %}
{% if _block|trim is not empty %}
<h2>{{ 'XPT.howToFix'|trans }}</h2>
{{ _block|raw }}
{% endif %}
{% endif %}
{% if block('explain') is defined %}
{% set _block = block('explain') %}
{% if _block|trim is not empty %}
<h3>{{ 'XPT.more'|trans }}</h3>
{{ _block|raw }}
{% endif %}
{% endif %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
