Docs > Contao > Themes > MATE Theme > Anpassungen > FAQ

FAQ

Bilder

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?

Warum werden manche Bilder nicht angezeigt? (WEBP-Unterstützung)

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.

Mögliche Lösungen:

#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>

Content Elemente

Wie kann ich Akkordeons verschachteln?

Dupliziere dazu das Template j_accordion mit folgendem Inhalt:

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
      }
    });
    
    $('.toggler-inner').parent().accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler-inner',
      collapsible: true,
      active: false,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler-inner').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler-inner').attr('tabindex', 0);
      }
    });
    
    $('.toggler-outer').parent().accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler-outer',
      collapsible: true,
      //active: false,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler-outer').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler-outer').attr('tabindex', 0);
      }
    });
  });
</script>

Durch active: false oder active: true kann man beeinflussen ob die Akkordeons standardmäßig geschlossen oder geöffnet sein sollen.

Füge den äußeren Akkordeons unter Klassennamen die Klasse toggler-outer hinzu, den inneren Akkordeons die Klasse toggler-inner.

Äußere Akkordeons:

Innere Akkordeons:

Beispiel:

Wie kann kann ich alle Akkordeons geschlossen halten?

Wechsle zum Menüpunkt Templates und dupliziere das Template j_accordion.html5. Bei den Parametern fügst du folgende Zeile hinzu:

active: false,

So sollte das Template anschließend aussehen:


<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
      active: false,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
      }
    });
  });
</script>

Wie kann ich im News-Slider auf der Startseite den Button "Mehr" dazu ausblenden, wenn es für die News keinen Inhalt gibt?

Passe dazu das Template news_mate_slider.html5 an.

Ersetze den Code in Zeile 16, wo die Überschrift gesetzt wird, durch folgende Code-Zeile:

<h2><?php if($this->hasText) { echo $this->linkHeadline; } else { echo $this->headline; } ?></h2>

In Zeile 22 entfernst du folgenden Teil: || $this->hasTeaser.

Damit die Überschrift auch in weißer Schrift angezeigt wird, kannst du folgende Zeilen in der custom.scss hinzufügen:

.slider.mod_newslist h2 {
  color: #fff;
}

Wie kann ich im News-Slider die Schriftgrößen in der Navigation ändern?

Dies ist über eine Anpassung in der custom.scss möglich:

#wrapper .slider.mod_newslist .indicators .indicator-item .subheadline {
  font-size: 16px;
}

#wrapper .slider.mod_newslist .indicators .indicator-item .headline {
  font-size: 16px;
}

Wie kann ich im News-Slider das Bild verlinken?

Bearbeite dazu das Template news_mate_slider.html5 und ersetze folgende Zeile (Zeile 2) …

<div class="img" <?php if ($this->addImage): ?>style="background-image:url('<?= $this->picture['img']['src'] ?>');"<?php endif; ?>></div>`

… durch folgende Zeilen:

<a href="<?= $this->link ?>" class="img">
  <div <?php if ($this->addImage): ?>style="background-image:url('<?= $this->picture['img']['src'] ?>');"<?php endif; ?>></div>
</a>

Zusätzlich fügst du noch etwas CSS in der custom.scss ein.

#wrapper .slider.mod_newslist .img {
  position: relative;
}

#wrapper .slider.mod_newslist .img div {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   left: 0;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

Wie kann ich die Icons bei einer unnummerierten Liste entfernen oder ändern?

Dies ist über eine Anpassung in der custom.scss möglich.

Icons entfernen:

.ce_list ul:not(.browser-default) li:before,
.ce_text ul:not(.browser-default) li:before {
  display: none;
}

Icons ändern:

.ce_list ul:not(.browser-default) li:before,
.ce_text ul:not(.browser-default) li:before {
  content: "+";
}

Formulare

Wie kann ich den Datepicker anpassen?

Den Datepicker kannst du mit etwas JavaScript anpassen. Lege dazu z. B. eine JS-Datei in der Dateiverwaltung an und binde sie über das Seitenlayout ein.

Beispiel:

jQuery(document).ready(function ($) {
    $('input.datepicker').datepicker({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: '150', // Creates a dropdown of 15 years to control year,
        maxDate: new Date(new Date().getFullYear() + 30, new Date().getMonth(), new Date().getDate()),
        autoClose: true, // Close upon selecting a date,
        format: 'dd.mm.yyyy',
        container: 'div.datepicker',
        firstDay: 1,
        yearRange: [1900, new Date().getFullYear() + 30],
        i18n: {
            nextMonth: 'Nächster Monat',
            previousMonth: 'Vorheriger Monat',
            labelMonthSelect: 'Monat wählen',
            labelYearSelect: 'Jahr wählen',
            months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
            weekdaysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
            weekdaysAbbrev: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
            today: 'Heute',
            clear: 'Löschen',
            done: 'OK',
            cancel: 'Abbrechen',
            format: 'dd.mm.yyyy'
        },
    });
});

Alle Optionen findest du in der Materialize Dokumentation.

Nur Samstag und Sonntag auswählbar

Mit der Funktion disableDayFn() kann man anpassen welche Tage auswählbar sein sollen. Mit dem folgenden Beispiel werden nur Samstage und Sonntage auswählbar sein.

disableDayFn(date) {
    if(date.getDay() === 0 || date.getDay() === 6)
        return false
    else
        return true
}

Kompletter JavaScript-Code:

jQuery(document).ready(function ($) {
	$('input.datepicker').datepicker({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: '150', // Creates a dropdown of 15 years to control year,
        maxDate: new Date(new Date().getFullYear() + 30, new Date().getMonth(), new Date().getDate()),
        autoClose: true, // Close upon selecting a date,
        format: 'dd.mm.yyyy',
        container: 'div.datepicker',
        firstDay: 1,
        yearRange: [1900, new Date().getFullYear() + 30],
        i18n: {
            nextMonth: 'Nächster Monat',
            previousMonth: 'Vorheriger Monat',
            labelMonthSelect: 'Monat wählen',
            labelYearSelect: 'Jahr wählen',
            months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
            weekdaysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
            weekdaysAbbrev: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
            today: 'Heute',
            clear: 'Löschen',
            done: 'OK',
            cancel: 'Abbrechen',
            format: 'dd.mm.yyyy'
        },
        disableDayFn(date) {
            if(date.getDay() === 0 || date.getDay() === 6)
                return false
            else
                return true
        },
    });
});

Nur Wochentage auswählbar

Damit nur Wochentage auswählbar sind, reicht es die Option disableWeekends auf true zu setzen.

disableWeekends: true

Wie kann ich die oberste Leiste im Header in der mobilen Ansicht anzeigen?

Mittels etwas CSS in der custom.scss lässt sich die Leiste in der mobilen Ansicht anzeigen.

@media (max-width: 767px) {
  .sectionTop {
    display: block;
   
    .inside {
       height: inherit;
       overflow: hidden;
    }
  }
}

Layout

Wie kann ich mitten im Inhalt einen vollflächigen Inhaltsbereich darstellen?

Um einen vollflächigen Inhaltsbereich (z. B. ein vollflächiges Bild) darzustellen, sind ein paar Templateanpassungen notwendig.

fe_page_mate.html5 anpassen

Bearbeite das Template fe_page_mate.html5 und entferne innerhalb von <?php $this->block('container'); ?> die Zeilen <div class="container"> und das schließende </div>.

<?php $this->block('container'); ?>
    <?php $this->parent(); ?>
<?php $this->endblock(); ?>

mod_article.html5 anpassen

Bearbeite das Template mod_article.html5 und füge ungefähr in Zeile 24 nach dem startenden <div> folgende Zeile ein: <div class="container">. Vor dem letzten schließenden </div> fügst du noch ein weiteres </div> ein. In der Zeile davor kannst du noch die Klasse fullwidth hinzufügen, um mit eigenem CSS etwas Abstand nach oben und unten zu setzen.

<div class="<?= $this->class ?> block fullwidth"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
    <div class="container">
    ...
    </div>
</div>

Angepasstes mod_article-Template anlegen

Dupliziere nun das Template mod_article und nenne es z. B. mod_article_without_container.html5. Entferne nun einfach die zwei eben hinzugefügten Zeilen.

Anpassungen, wenn mehrspaltige Layouts verwendet werden

Wenn mehrspaltige Layouts verwenden werden (mit linker/rechter Spalte), müssen noch die entsprechenden Templates angepasst werden.

Füge in den Templates fe_page_mate_left.html5, fe_page_mate_leftright.html5 und fe_page_mate_right.html5 innerhalb von <?php $this->block('container'); ?> die Zeilen <div class="container"> und das schließende </div> ein.

<?php $this->block('container'); ?>
    <div class="container">
        <?php $this->parent(); ?>
    </div>
<?php $this->endblock(); ?>

Templates in Artikeln zuweisen

Wenn ein Inhalt nun über die ganze Breite dargestellt werden soll, müssen die Artikeleinstellungen (das Werkzeug-Icon nach dem Stift) bearbeitet und in den Template-Einstellungen das Artikel-Template mod_article_without_container zugewiesen werden.

So müsste man auch den ganzen Artikeln mit dem Kopfbild das Template mod_article_without_container zuweisen.

Zusätzlich muss allen Artikeln unter MATE Elements - 01 Header, 02 Modules und 03 Footer das Template mod_article_without_container zugewiesen werden.

Eigenes CSS

Um etwas mehr Abstand nach oben und unten zu erreichen, kann die custom.scss bearbeitet werden:

#main .mod_article.fullwidth {
	margin-top: 50px;
	margin-bottom: 50px;
}

Beispiel

Ist es möglich, dass die Unterverzeichnisse der Unterseitennavigation alle automatisch ausgeklappt sind?

Du kannst das über folgende Anpassung in der custom.scss erreichen.

.subnav .dropdown-content {
    display: block;
    visibility: visible;
    height: inherit;
    position: relative;
}

Wie kann ich die Großschreibung in der Navigation deaktivieren?

Du kannst das über folgende Anpassung in der custom.scss erreichen.

#header .nav-wrapper ul li {
  text-transform: none;
}

Sonstiges

Wie kann ich verhindern, dass die Theme-CSS-Datei gecacht wird?

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_mate.html5.

Damit die CSS-Datei nicht gecacht 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();

if (strtoupper(substr(PHP_OS, 0, 3)) === 'WIN') {
  $combiner->add('bundles/matetheme/sass/mate_win.scss');
} else {
  $combiner->add('bundles/matetheme/sass/mate.scss');
}

echo $combiner->getCombinedFile(); ?>?date=<?= time() ?>">