Nightwing

CMS Contao 4.11.x

Hier findest Du einige von mir geänderte Templates, die ich unter anderem auf dieser Seite verwende. Viele dieser Templates habe ich schon in Version 2.11.17 genutzt, allerdings poste ich nur noch die aktuelleren ab Version 4.9.x, die anderen sind einfach zu alt... Einige Ideen und Anregungen hab ich dem Contao Community Forum entnommen. Viel Hilfe habe ich auch vom Kellerkind erhalten, an dieser Stelle nochmals vielen Dank dafür! Manch Eintrag ist von Version 4.7.x / 4.8.x und mit dem Update auf 4.9.x weggefallen, allerdings lass ich es (noch) drin, da es noch jung ist...

« Letzter Eintrag Nächster Eintrag »

Backendseite mit ganzseitigem Hintergrundbild

Schon bevor mit Version 4.10 / 4.11 die Individualisierung des Backends Einzug erhalten hat, hatte ich mir ein paar Gedanken gemacht, wie ich eine Arbeitsumgebung von der produktiven unterscheiden könnte. Die Lösung ist recht einfach: man benötigt etwas CSS und bastelt sich im Template be_login.html5 ein weiteres div um den gesamten Container:


Backend produktive Umgebung Backend Entwicklungsumgebung


Und hier die benötigten Änderungen im Detail:

be_login.html5

<?php $this->endblock(); ?>
</head>
<body class="<?= $this->ua ?>"<?= $this->attributes ?>>

  <div id="background" class="login">
  
    <?php $this->block('container'); ?>
	  <div id="container">
        <main id="main">
          <form class="tl_login_form" method="post">

backend.css

Code eingefügt. 
/* Variables */
:root {
	/* #0f0 / rgba(0, 255, 0, 0.8); - grün (prod) */
	/* #f00 / rgba(255, 0, 0, 0.8); - rot (dev) */
	--border-color: rgba(0, 255, 0, 0.8);
	--background-color: #424242;
}

/* Layout - Scrollbar invisible */
html,
body {
    min-height:100vh;
    font: 0.95em Ubuntu,Arial,sans-serif;
    scrollbar-width: none;
    -ms-overflow-style: none; 
	-webkit-scrollbar: none; 
}

/* Login */
#background.login {
    min-height:100vh;
	margin: -15em auto;
    background: var(--background-color) url("../background.png");
    background: var(--background-color) url("../background.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

.tl_login_form {
	margin: 25em auto;
	background: url(../../../system/themes/flexible/icons/contao.svg) top 1em center no-repeat;
	background-size: 64px;
	-webkit-box-shadow: inset 0.5em 0.5em 0em 0em var(--border-color);
	-moz-box-shadow: inset 0.5em 0.5em 0em 0em var(--border-color);
	box-shadow: inset 0.5em 0.5em 0em 0em var(--border-color);
}

Achtung:

Bitte die Templates im Backend unter Templates auswählen und speichern und dann dort editieren! Ansonsten sind die Änderungen nicht updatesicher.

Zurück