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.
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;
}
}