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>
Um andere Icons (Plus- und Minus-Zeichen) in der mobilen Navigation anzuzeigen, kannst du das Template nav_default_nature.html5 anpassen. Die Icons werden mit Font Awesome eingebunden und können durch das Ändern der Klassennamen angepasst werden.
Suche im Template nach folgenden Stellen:
<i class="fas fa-plus-sqare"></i>
<i class="fas fa-minus-square"></i>
Um z. B. ein einfaches Plus ohne Hintergrund anzuzeigen, ersetzt du die Klasse fa-plus-square
durch fa-plus
.
Soll noch die Farbe angepasst werden, kannst du das über eine CSS-Anweisung in der custom.scss lösen.
.mod_navigation.navbar .navbar-menu.is-active {
.toggle-less i, .toggle-more i {
color: #000;
}
}
Füge dazu folgendes CSS in der custom.scss ein. Möglicherweise ist es danach nötig die Seite mit Strg + F5 neuzuladen (Cache).
.mod_navigation.navbar {
position: fixed;
transition: all .3s;
&.stuck {
height: 70px;
.navbar-brand img {
max-height: 40px;
}
.navbar-start {
padding: 0 70px;
}
}
}
Nun wird noch etwas jQuery-Code benötigt. Lege dazu entweder eine neue Javascript-Datei (z. B. custom.js) an und binde
sie im Layout ein (unter JavaScript -> Externe JavaScripts) oder füge den Code direkt im Layout im Feld Eigener
JavaScript-Code (unter JavaScript) ein (in dem Fall mit einem öffnenden <script>
und schließenden </script>
).
jQuery(document).ready(function($) {
stuckNavbar();
$(window).scroll(function () {
stuckNavbar();
});
function stuckNavbar() {
var scrollPos = $(window).scrollTop();
if (scrollPos > 0) {
$('.mod_navigation.navbar').addClass('stuck');
} else {
$('.mod_navigation.navbar').removeClass('stuck');
}
}
});
Lege ein Modul vom Typ Suchmaschine an, wähle eine Weiterleitungsseite und das Modul-Template mod_search_nature aus.
Dupliziere nun das Template nav_default_nature.html5 und benenne es um (z. B. in nav_default_nature_custom.html5
).
Das Template muss im Modul der Hauptnavigation (NAV / Hauptnavigation) in den Template-Einstellungen unter
Navigations-Template ausgewählt werden.
Bearbeite das Template und füge vor dem schließenden </div>
folgende Zeile ein. Ersetze ID durch die ID des
Suchmaschinen-Moduls.
<?php if($this->level == "level_1"): ?>{{insert_module::ID}}<?php endif; ?>
Zum Schluss muss noch etwas SCSS für das Aussehen definiert werden. Bearbeite dazu in der Dateiverwaltung unter naturetheme/scss die custom.scss und füge folgenden Code ein:
header .mod_search {
margin-left: 20px;
.control {
height: 100%;
}
.formbody {
display: flex;
}
.widget-submit {
margin: 0;
}
.widget:not(:last-child) {
margin-bottom: 0;
}
.widget-text {
margin-right: 10px;
input {
height: 100%;
border: none;
}
}
}
@media (max-width: 1023px) {
header .mod_search {
margin: 10px 0 0 10px;
}
}
Lege dazu unter Nature Theme Elemente - 01_Header einen neuen Artikel an.
Bearbeite die Artikeleinstellungen, wähle unter Template-Einstellungen bei Theme Helper Tag NATURE01/02 aus
und füge unter Experteneinstellungen die Klasse header-top
hinzu.
Um Kontakt- und Adressdaten anzuzeigen kannst du das Element Text und Icon (unter Contao Themes zu finden) anlegen und einen Text angeben sowie ein Font-Awesome-Icon auswählen.
Wechsle zu Themes, bearbeite die Frontend-Module des Theme (Zahnrad-Icon) und lege ein neues Modul vom Typ Eigener HTML-Code an. Füge dort folgenden Inserttag ein:
{{theme::content::NATURE01/02}}
Bearbeite nun die Seitenlayouts des Theme (direkt nach dem Zahnrad-Icon) und bearbeite das Layout, wo die Headerleiste angezeigt werden soll. Unter Frontend-Module - Eingebundene Module fügst du ganz oben das eben angelegte Modul an und wählst bei Layoutbereich Kopfzeile aus.
Zum Schluss fügst du in der custom.scss noch folgenden SCSS-Code ein, damit die Headerleiste entsprechend dargestellt wird.
$headerTopSize: 35px;
body:not(.home):not(.contact) #header .inside {
padding-top: 140px;
}
.header-top {
position: absolute;
top: 0;
width: 100%;
height: $headerTopSize;
background: darken($navbar-background-color,10%);
left: 0;
z-index: 2;
color: $navbar-item-color;
font-size: .8em;
.block:not(:last-child) {
margin-bottom: 0;
}
.ce_ct_featureElement {
.icon {
width: inherit;
margin-right: 10px;
padding-bottom: 0;
}
.feature-text {
width: inherit;
}
&:not(:last-child) {
margin-right: 30px;
}
}
.content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
+ .mod_navigation {
top: $headerTopSize;
}
}
@media (max-width: 1023px) {
.full-width-height-slider .text {
padding-top: 160px;
}
}
@media (max-width: 992px) {
.header-top {
display: none;
+ .mod_navigation {
top: 0;
}
}
}
Lege in der Seitenstruktur einen Ordner “Shortlinks” und darin die Seiten (z. B. als interne Weiterleitungen) an. Mittels der Font Awesome Inserttags im Seitennamen kannst du Icons anzeigen lassen.
Lege ein Modul vom Typ Individuelle Navigation an und vergebe die Klasse shortlinks
.
Das Modul bindest du im Layout in der Fußzeile ein.
Zum Schluss benötigen wir noch etwas CSS für das Styling, was du in der custom.scss einfügen kannst.
.shortlinks {
position: fixed;
top: 0;
right: 0;
z-index: 100;
height: 100%;
display: flex;
align-items: center;
@media (max-width: 1023px) {
display: none;
}
a {
background: $link;
display: block;
color: #fff;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
margin: 25px 0;
padding: 10px;
&:hover {
background: $link-hover;
}
i {
color: #fff;
font-size: 2rem;
}
}
}
So sollte es am Ende aussehen:
Den Effekt kannst du über das Skript Headroom.js einbinden, herunterladen kannst du es unter wicky.nillia.ms/headroom.js.
Binde die headroom.min.js über das Seitenlayout bei Externe JavaScripts ein und füge das folgende JavaScript ebenfalls im Seitenlayout bei Eigener JavaScript-Code ein. Alternativ kannst es natürlich auch in eine eigene JavaScript-Datei auslagern.
<script>
var myElement = document.querySelector(".mod_navigation.navbar");
var headroom = new Headroom(myElement, {
"offset": 600
});
headroom.init();
</script>
Zu guter letzt fügst du noch folgendes CSS in der custom.scss ein.
.headroom {
will-change: transform;
transition: transform 200ms linear;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}
.mod_navigation.navbar {
position: fixed;
transition: all .3s;
&.stuck {
height: 70px;
.navbar-brand img {
max-height: 40px;
}
.navbar-start {
padding: 0 70px;
}
}
}
Füge dazu in der custom.scss folgendes CSS ein:
.full-width-height-slider .text img {
border: none;
}
Installiere dazu die Erweiterung Google Maps. Im Backend findest du dann einen Menüpunkt Google Maps, wo du deine Karte anlegen kannst.
Mittels eines Inhaltselements (Media-Elemente -> Google Map) bindest du die Karte an der gewünschten Stelle in einem Artikel ein. Um sie z. B. auf der Kontakt-Seite im Header anzuzeigen, bindest du sie im Artikel Header ein.
Den API-Key kannst du in den Einstellungen unter Google Maps eintragen.
Damit die Karte ohne Abstand nach unten dargestellt wird, ist noch etwas CSS in der custom.scss nötig.
.dlh_googlemap.block:not(:last-child) {
margin-bottom: 0;
}
So könnte es dann aussehen:
Normalerweise bekommen Besucher, die die Webseite bereits besucht haben, eine „gecachte“ Datei ausgeliefert. Möchte man das verhindern kann man dies über eine Anpassung im fe_page-Template erreichen.
Passe dazu folgendes Template an: fe_page_nature.html5.
Damit die CSS-Datei nicht gecached wird, kann man z. B. einen Timestamp an den Dateinamen anhängen. Füge dazu bei der
Zeile echo $combiner->getCombinedFile(); ?>">
vor den Anführungszeichen folgendes ein:
?date=<?= time() ?>
So sollte es aussehen:
<link rel="stylesheet" type="text/css" media="all" href="<?php
// add stylesheets
$combiner = new Combiner();
$combiner->add('bundles/contaothemesnetnaturetheme/fonts/fontawesome/css/all.min.css');
if (strtoupper(substr(PHP_OS, 0, 3)) === 'WIN') {
$combiner->add('bundles/contaothemesnetnaturetheme/scss/nature_win.scss');
} else {
$combiner->add('bundles/contaothemesnetnaturetheme/scss/nature.scss');
}
echo $combiner->getCombinedFile(); ?>?date=<?= time() ?>">