Füge dazu folgendes CSS in die custom.scss ein.
.hero .hero-body {
min-height: inherit;
padding-bottom: 50px;
}
Füge folgendes CSS in die custom.scss ein, um das Hintergrundbild zu ändern.
.hero .hero-body {
background-image: url(/files/zeroOne/img/quote.svg);
}
Natürlich kann das Hintergrundbild auch entfernt werden.
.hero .hero-body {
background-image: none;
}
Möglicherweise ist der Ordner in der Dateiverwaltung nicht auf Öffentlich gestellt. Du kannst das prüfen, indem du den entsprechenden Ordner bearbeitest. Das Häkchen bei Öffentlich muss gesetzt sein, ansonsten wird das Bild nicht im Frontend angezeigt.
Dazu muss im Theme jQuery und das jQuery-Template j_colorbox geladen werden. Das Layout kann im Backend unter Themes und über das drittletzte Icon Seitenlayouts des Theme ID 1 bearbeiten bearbeitet werden.
Bei animierten GIFs darf bei den Bildeinstellungen keine Bildgröße gesetzt werden, ansonsten bleibt die Animation nicht erhalten.
Wenn neuere Browser versuchen ein WEBP-Bild zu laden und es nicht unterstützt wird, kann es zu einer Fehlermeldung kommen.
Die Fehlermeldung kann dann in etwa so aussehen:
request.CRITICAL: Uncaught PHP Exception RuntimeException: "Image format "webp" is not supported in Imagine\Imagick\Imagine on this environment. Consider removing this format from contao.image.valid_extensions or switch the contao.image.imagine_service to an implementation that supports it.
#1 Imagine updaten oder vom Hoster machen lassen (neueste Version nutzen)
#2 Alternative Bildbearbeitungsmöglichkeit nutzen
Über die config.yml kannst du einen anderen Bildbearbeitungsservice angeben, anschließend muss der Cache geleert werden. Oftmals hilft dieser Punkt bereits. Wenn WEBP unterstützt wird, solltest du es bei den Bildgrößen auch auswählen können.
contao:
image:
imagine_service: 'contao.image.imagine.gd'
oder
contao:
image:
imagine_service: 'contao.image.imagine.gmagick'
#3 Entfernen von WEBP aus den erlaubten Dateiendungen
Füge folgendes in der config.yml hinzu und leere anschließend den Cache neu.
contao:
image:
valid_extensions:
- jpg
- jpeg
- gif
- png
- tif
- tiff
- bmp
- svg
- svgz
#4 Anpassung der .htaccess
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
Wenn kein Bild bei dem News-/Events-Element ausgewählt wurde, wird die linke Spalte nicht angezeigt. Ansonsten kannst du beim Modul des Eventleser/Nachrichtenleser das Template event_full_zeroone_without_image bzw. news_full_zeroone_without_image auswählen.
Die SVG-Grafik findest du in der Dateiverwaltung unter dem Ordner zeroOne/img/files/zeroOne/img/navbar_level_2.svg. Du kannst diese einfach mit einer anderen Grafik ersetzen (der Dateiname muss gleich bleiben).
Wenn du nur die Hintergrundfarbe anpassen möchtest, kannst du in der Dateiverwaltung auch den Quelltext der Datei
bearbeiten (das vorletzte Icon). Nach dem startenden <g
fügst du folgenden Code fill="#015b7e"
ein und ersetzt den
Farbcode durch deinen gewünschten Farbcode (siehe folgenden Screenshot).
Du kannst das über die Variable $zeroOneColor_1 in der _custom_variables.scss anpassen. Alternativ kannst du auch folgendes CSS in die custom.scss einfügen.
.form-label, .form-group label:not(.form-checkbox):not(.form-radio),
.ce_form .widget:not(.widget-checkbox):not(.widget-radio) label:not(.form-checkbox):not(.form-radio) {
background: #d23b3b;
}
Du kannst das über die Variable $body-font-color in der _custom_variables.scss anpassen. Alternativ kannst du auch folgendes CSS in die custom.scss einfügen.
.form-input, .form-select, .checkbox_container > div, .radio_container .form-group > div, textarea {
color: #333;
}
Du kannst das über die Variable $boxes-background in der _custom_variables.scss anpassen. Alternativ kannst du auch folgendes CSS in die custom.scss einfügen.
.table.table-striped tbody tr:nth-of-type(odd) {
background: #cceaff;
}