Individuelle Anpassungen/Probleme :: Themes und Erweiterungen / pdir Docs

Warum wird mir ein Bild nicht angezeigt?

Warum funktioniert die Großansicht eines Bildes in einer Lightbox nicht, wenn ich darauf klicke?

Warum werden keine animierten GIFs angezeigt?

Wie kann ich in der mobilen Navigation die Icons anpassen?

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

Wie kann ich erreichen, dass die Navigation am oberen Bildschirmrand kleben bleibt, wenn man herunterscrollt?

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');
        }
    }
});

Wie kann ich im Header eine Suche einbinden?

Modul anlegen

Lege ein Modul vom Typ Suchmaschine an, wähle eine Weiterleitungsseite und das Modul-Template mod_search_nature aus.

Template anpassen

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; ?>

Styling

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

Individuelle Anpassungen/Probleme

Bilder

Header / Navigation

Modul anlegen

Template anpassen

Styling

So würde es aussehen