Probleme mit YAML 4

**Mary** · 24.07.2012, 15:11

Ich versuche gerade eine neue Site mit contao 2.11.4 und YAML 4 (aktuelle release) zu erstellen und stehe vor dem Problem, dass diverse Extensions, die jquery oder mootools verwenden - z. B. Galleria, pk_noobslide - nicht oder nicht richtig funktionieren. Wenn ich das Template wechsle oder diese Extensions (auch parallel!) im Standard-Contao-Template (Music Academy) installiere und laufen lasse, gibt es überhaupt keine Probleme. Ich vermute daher, dass es an YAML liegt - woran auch immer. Ich verwende das screen-FULLPAGE-layout mit header, zwei spalten und footer - also keine verschachtelten grids. Beispiellink kann ich leider nicht schicken, weil ich noch lokal arbeite. Kennt' noch jemand dieses Problem? Eine Idee, was es sein könnte?
Danke!

**RedWise** · 24.07.2012, 15:56

Wir arbeiten seit längeren mit YAML 4, bisher hatte wir noch keine Problem.

Um das Problem einzuschätzen,müsste man sich das mal anschauen.

Was ist genau dein Problem?

**Mary** · 25.07.2012, 08:05

Ich habe die betreffende Site nun online gestellt: http://kuehtrk5.bplaced.net/gallister2/
Unter "Home" findet sich das YAML 4-Template mit einem Slider (links) und einer Einbindung von YouTube-Videos (rechts), beides mit Galleria erstellt, das jquery benutzt (http://www.contao.org/de/extension-l...070009.de.html).

Das Problem ist, dass ich mit dem YAML-Template den Slider nicht bedienen kann, heißt ich kann weder ein Bild via Thumbnails anwählen noch nach rück- oder vorwärts blättern. Die Youtube-Videos lassen sich überhaupt nicht öffnen.
Unter der "Media-Seite" findet sich das Ganze mit dem Standard-contao-Template und da lassen sich Slider und Videos einwandfrei bedienen.

Das Problem gibt es im Übrigen im IE7 bis IE9 nicht! Da läuft die Sache normal. Firefox, Safari, Chrome und Opera verweigern aber allesamt.

An einem Inkombatibilitätsproblem dürfte es prinzipiell nicht liegen, weil ich z. B. in der Standard-Contao-Site (Music Academy) Galleria, Videobox, pk_noobslide und dropdown parallel laufen ließ und alle haben zusammen problemlos funktioniert. Es liegt also an meinem YAML4-Template.

Hier der Code zum Template

HTML-Code:

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">
<head>
<meta charset="<?php echo $this->charset; ?>">
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<base href="<?php echo $this->base; ?>">
<meta name="robots" content="<?php echo $this->robots; ?>">
<meta name="description" content="<?php echo $this->description; ?>">
<meta name="keywords" content="<?php echo $this->keywords; ?>">
<?php echo $this->framework; ?>
<?php echo $this->stylesheets; ?>
<?php echo $this->mooScripts; ?>
<?php echo $this->head; ?>

	<link href="tl_files/theme/css/central.css" rel="stylesheet" type="text/css"/>
	<!--[if lte IE 7]>
	<link href="../yaml/core/iehacks.css" rel="stylesheet" type="text/css" />
	<![endif]-->
	
	<!--[if IE 8]>
	<link href="../css/screen/iehacks_mod.css" rel="stylesheet" type="text/css" />
	<![endif]-->

<!--[if lt IE 9]><script src="<?php echo TL_PLUGINS_URL; ?>plugins/html5shim/html5-<?php echo HTML5SHIM; ?>.js"></script><![endif]-->
</head>
<body>
<ul class="ym-skiplinks">
	<li><a class="ym-skip" href="#nav">Skip to navigation (Press Enter)</a></li>
	<li><a class="ym-skip" href="#main">Skip to main content (Press Enter)</a></li>
</ul>

<?php if ($this->header): ?>
<header>
	<div class="ym-wrapper">
		<div class="ym-wbox">
			<?php echo $this->header; ?>
			</div>
	</div>
</header>
<?php endif; ?>

<?php if ($this->sections['top_navigation']): ?>
<nav id="nav">
	<div class="ym-wrapper">
		<div class="ym-hlist">
			<?php echo $this->sections['top_navigation']; ?>
			<?php endif; ?>
		</div>
	</div>
</nav>
<div id="main">
	<div class="ym-wrapper">
		<div class="ym-wbox">
			<section class="ym-grid linearize-level-1">
				<article class="ym-g50 ym-gl content">
					<div class="ym-gbox-left ym-clearfix">
						<?php echo $this->left; ?>
					</div>
				</article>
				<article class="ym-g50 ym-gr">
					<div class="ym-gbox-right ym-clearfix">
						<?php echo $this->main; ?>
					</div>
				</article>
			</section>
		</div>
	</div>
</div>

<?php if ($this->footer): ?>
<footer>


	<div class="ym-wrapper">
		<div class="ym-wbox">
			<?php echo $this->footer; ?>
		</div>
	</div>
</footer>
<?php endif; ?>

<!-- full skip link functionality in webkit browsers -->
<script src="tl_files/theme/yaml/core/js/yaml-focusfix.js"></script>
</body>
</html>

Was habe ich falsch gemacht? Eine Skript-Datei von YAML falsch eingebunden?
Danke!

**Thomas** · 25.07.2012, 09:22

Ich nutze für YAML mittlerweile die Erweiterungen theme+!

Damit kannst Du CSS-Dateien und Javascript einbinden, wie und wo Du es gerade benötigst.
Feine Sache, man kann YAML ohne das Korsett einbinden und gleichzeitig die Möglichkeiten von Contao verwenden.

Das sollte nur ein kurzer Tipp sein.

Zum Thema!

Hast Du die Galerie mit einem Inserttag eingebunden?
Wenn ja, benötigst Du, laut Extensionbeschreibung eine weitere Erweiterung: inserttags_js_support

Der Slider reagiert etwas komisch.
Wenn Du mit gedrückter Maustaste auf einem Thumbnail verweilst, nimmt er die Hand als Mauszeiger an und färbt das Thumb ein, ist aber weiterhin nicht anklickbar.

Versucht die Erweiterung eine eigene JQuery-Datei einzubinden?
Wenn ja, welche Version?

Vieleicht ist die Erweiterung noch nicht mit jquery 1.7.2 kompatibel.
Probier es doch mal mit älteren Versionen.

Ich habe mir gerade mal den Quelltext des Sliders angesehen!
Hier findet sich ein DIV-Container, der mit notouch deklariert ist:

Code:

<div class="galleria-container notouch" style="width: 400px; height: 300px;">

Ich kenne die Erweiterung jetzt nicht so genau, vielleicht liegt es schon daran.

Dann werden die Thumbs überhaupt nicht mit einem Link versehen.
Das dürfte der Grund sein, dass diese nicht wählbar sind.

**Mary** · 25.07.2012, 11:24

Mit theme+ habe ich mich noch nicht beschäftigt und muss auch gestehen, dass ich kein Programmierprofi bin ...

Nein, ich habe die Galerie nicht via insert-tag eingebunden, sondern ganz normal als Inhaltselement in einem Artikel.

Die Gallery benötigt die jquery-Erweiterung, die auch mitinstalliert wird und verwendet jquery 1.7.2. Ich habe auch ältere query-Versionen getestet, keine Änderung.

Auch das Deaktvieren des "notouch" ändert nichts und wird laut Doku für die Bedienung von touch devices benötigt. Wie gesagt unter dem IE funktioniert ja alles.

Es liegt an meinem YAML-Template: Ich habe nun abermals eine neue Site mit einem YAML4-Template angelegt, ohne aber irgendwelche Änderungen am Design vorzunehmen und sowohl die Gallery als auch die Erweiterung Videobox funktionieren. Ich muss also irgendetwas an meinem Template verhunzt haben. Falls ich dahinterkomme, was es ist, lasse ich es wissen.
Danke!

**Mary** · 25.07.2012, 12:57

Problem gelöst! Schuld war ein saublöder Fehler meinerseits, nämlich ein negativer z-index im #main-Bereich, den ich aus Gründen der Darstellung der Hintergrundes gesetzt hatte ... Jetzt funkt. alles, wie es sein soll und YAML4 ist voll rehabilitiert!!!
Danke jedenfalls für Eure Rückmeldungen!

**RedWise** · 25.07.2012, 19:43

Jo..

#main {
background-color: #040507;
opacity: 0.7;
z-index: -100;
}

besser...
#main {
background-color: #040507;
opacity: 0.7;
}

**Thomas** · 26.07.2012, 09:39

Hehe, schön!

Und ich hatte meinen Hinweis auf z-index wieder raus genommen, da YAML ja kaum welche verwendet.

Ich muss gestehen, nicht genauer in Deine CSS-Anweisungen geschaut zu haben.

Theme+ wollte ich auch erst nicht verwenden. Ich habe aber die Vorzüge mittlerweile kennen gelernt und kann es Dir nur vorschlagen.
Es erleichtert die Arbeit mit vielen CSS- und Javascript-Dateien erheblich. Man kann quasi für jede Reset-Situation eigene CSS anlegen, respektive Javascript, und dann in der entsprechenden Seite laden lassen, ohne ein dauerhaftes Mitladen auf anderen Seiten. Sehr praktisch, vor allem kannst Du bei YAML die CSS-Datei entfernen, die für das Includen der vielen anderen Dateien zuständig ist.

Thema: Probleme mit YAML 4

Themen-Optionen

Thema durchsuchen

Probleme mit YAML 4

Aktive Benutzer

Aktive Benutzer

Lesezeichen

Lesezeichen

Berechtigungen

Contao

Empfohlene Webdesign-Bücher