FAQ
Bilder
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.
Lege dazu in dem Artikel 01/02 Top Navbar (ganz unten bei ODD Elements - 01/Kopfzeile) innerhalb des Inhaltscontainers ein neues Element vom Typ Bild an (siehe Screenshot 1).
In den Elementeinstellungen setzt du eine Bildgröße, z. B. An Rahmen anpassen / 40px. Aktiviere
Metadaten überschreiben und setze einen Link unter Bildlink-Adresse. In den Experteneinstellungen setzt du
noch die Klasse icon (siehe Screenshot 2).
Zum Schluss fügst du noch folgenden CSS-Code in die custom.scss ein.
Am Ende sollte es wie im dritten Screenshot aussehen.
Screenshot 1:
Screenshot 2:
Screenshot 3:
Füge dazu im Artikel 01/01 Logo (unter ODD Elemente - 01 / Kopfzeile) ein zweites Bildelement ein und gebe diesem
Element z. B. die Klasse stuck-logo (unter Experteneinstellungen das zweite Eingabefeld).
Füge nun folgendes CSS in die custom.scss ein:
.stuck-logo {
display: none;
}
.stuck .stuck-logo {
display: block;
}
.stuck .navbar-brand .ce_image:not(.stuck-logo) {
display: none;
}
Danach sollte ein anderes Logo angezeigt werden, wenn man von oben herunterscrollt und die schmale Navigationsleiste angezeigt wird.
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>
Bezeichnungen & Übersetzungen
Du kannst entweder direkt das Template event_list_odd.html5 oder event_teaser_odd.html5 bearbeiten oder es über die
langconfig.php überschreiben (erst ab ODD Theme Version 1.4.2).
Bearbeite dazu die Datei langconfig.php unter system/config bzw. lege die Datei an, wenn sie noch nicht existiert.
Du kannst den Text mit Hilfe folgender Zeile überschrieben:
<?php
$GLOBALS['TL_LANG']['odd']['event_more_link'] = "Details";
Oder wie folgt um es z. B. in einer bestimmten Sprache zu überschrieben:
<?php
if ($GLOBALS['TL_LANGUAGE'] == 'en') {
$GLOBALS['TL_LANG']['odd']['event_more_link'] = "Details";
}
Darstellung
Schrägen im Header entfernen
Es sind bereits einige Layouts angelegt um zwischen einem geraden und schrägen Header zu wechseln. Bei den Modulen gibt es auch jeweils ein Navigationsmodul mit und ohne Schräge, was man beim Layout unter den eingebundenen Modulen auswählen kann.
Schrägen bei Inhaltselementen entfernen
Auf der Seite Elemente mit Schrägen siehst du wie du
die Schrägen bei Inhaltselementen anpassen kannst. Es müssten lediglich die Klassen skw-** entfernt werden.
Schrägen im Footer entfernen
Bearbeite das Modul Footer / Main und entferne die Klasse skw-tr.
Schrägen beim Newsletter-Bereich entfernen
Beim Newsletter-Bereich über dem Footer musst du das Modul Newsletter / Abonnieren / Startseite bearbeiten
und unter den Experteneinstellungen die Klasse skw-tl entfernen.
Füge dazu folgendes CSS in die custom.scss ein und lade die Seite anschließend mit Strg + F5 neu:
h1, h2, h3, h4, h5, h6 {
text-transform: inherit;
}
Du kannst den Newsletter-Bereich im entsprechenden Seiten-Layout unter Eingebundene Module mit dem Auge deaktivieren oder über das Kreuz entfernen.
Sonstiges
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.
Den API-Key kannst du in den Einstellungen unter Google Maps eintragen.
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_bootstrap_odd.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/pdirthemeodd/bootstrap/dist/css/bootstrap.min.css');
if (strtoupper(substr(PHP_OS, 0, 3)) === 'WIN') {
$combiner->add('bundles/pdirthemeodd/scss/odd_win.scss');
} else {
$combiner->add('bundles/pdirthemeodd/scss/odd.scss');
}
echo $combiner->getCombinedFile(); ?>?date=<?= time() ?>">
