HTML HTML in Joomla Template konvertieren

magic.dave · 5. Februar 2015

Hi, ich habe ein responsive statische HTML-Website und möchte diese in ein Joomla 3 Template konvertieren. Ich hab eigentlich alles hinbekommen, nur scheint die Mobile-Funktion kaputt zu sein.

Der <head>-Tag der ursprünglichen index.html sieht so aus:

HTML:

<head>
		<title>Verti by HTML5 UP</title>
		<meta ***********="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,800" rel="stylesheet" type="text/css" />
		<link href="http://fonts.googleapis.com/css?family=Oleo+Script:400" rel="stylesheet" type="text/css" />
		<script src="js/jquery.min.js"></script>
		<script src="js/config.js"></script>
		<script src="js/skel.min.js"></script>
		<script src="js/skel-panels.min.js"></script>
		<noscript>
			<link rel="stylesheet" href="css/skel-noscript.css" />
			<link rel="stylesheet" href="css/style.css" />
			<link rel="stylesheet" href="css/style-desktop.css" />
		</noscript>
		<!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
		<!--[if lte IE 7]><link rel="stylesheet" href="css/ie7.css" /><![endif]-->
	</head>

Im css-Ordner befinden sich folgende Dateien und Ordner:

font
->FontAwesome.otf
->fontawesome-webfont.eot
->fontawesome-webfont.svg
->fontawesome-webfont.ttf
->fontawesome-webfont.woff
images
->...verschiedene Bilder...

ie7.css
ie8.css
skel-noscript.css
style.css
style-1000px.css
style-desktop.css
style-mobile.css

Im js Ordner befinden sich folgende Dateien:
config.js
html5shiv.js
jquery.min.js
skel.min.js
skel-panels.min.js

Und so sieht der relevante Teil der index.php aus:

Code:

<?php

$doc = JFactory::getDocument();

$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/jquery.min.js', 'text/javascript');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/config.js', 'text/javascript');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/skel-panels.min.js', 'text/javascript');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/skel.min.js', 'text/javascript');
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" slick-uniqueid="3">

<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/skel-noscript.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/style.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/style-desktop.css" type="text/css" />
</head>

Das Problem ist wieder oben schon erwähnt, dass die Seite beim Joomla Template nicht in die mobile Ansicht wechselt, obwohl sie es in der HTML-Version tut. Außerdem sind einige Schriftarten teils komplett, teils etwas anders als in der HTML-Version. Daher habe ich die Vermutung, dass irgendeine Datei oder Script nicht berücksichtigt wird. Da ich mich noch nicht so lange mit dem Thema beschäftige und nach mehrstündiger Suche den Fehler nicht eigenhändig beheben konnte, suche ich hier mal nach Experten, die mir weiterhelfen können. Falls noch Infos fehlen, liefer ich die gerne noch ab.

Greetz
magic.dave

Speedy. · 5. Februar 2015

Zunächst fehlt dir ein wichtiger Tag im Head:

Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Wenn deine Seite responsiv sein soll, dann darf dieser Tag nicht fehlen.

Zu deinem Problem: ich kenne mich mit Joomla nicht aus, aber in einem solchen Fall liegt die Vermutung nahe, dass Dateien nicht geladen wurden. Wenn du Chrome hast, dann drücke auf deiner Seite mal F12 und gehe in die Console, dort werden Fehler angezeigt, konnten Dateien nicht geladen werden (404). Dann siehst du auch gleich, was fehlt. Alternativ kannst du auch unter dem Reiter Network nachschauen, dazu musst du aber die Seite mit dem geöffneten Tab neu laden.

magic.dave · 5. Februar 2015

Ich sehe schon wo das Problem liegt. In der Console stehen folgende Fehlermeldungen:

- Failed to load resource: the server responded with a status of 404 (Kategorie nicht gefunden) [.../css/style.css]
- Uncaught ReferenceError: skel is not defined [skel-panels.min.js:2]
- Failed to load resource: the server responded with a status of 404 (Kategorie nicht gefunden) [.../css/style-desktop.css]
- Failed to load resource: the server responded with a status of 404 (Kategorie nicht gefunden) [.../css/style.css]
- Failed to load resource: the server responded with a status of 404 (Kategorie nicht gefunden) [.../css/style-desktop.css]

Das ist merkwürdig weil die css-Dateien korrekt eingebunden sind, da ja auch die meisten Styles richtig geladen werden.

Ciraxis · 5. Februar 2015

wirklich richtig eingebunden? schreibzugriff? Was ist mit dem javascript fehler?

Speedy. · 6. Februar 2015

Wenn diese Fehler in der Konsole auftauchen, dann sind die Dateien vielleicht korrekt eingebunden, aber der Pfad stimmt nicht. Alternativ kannst du mal den Cache deines Browsers löschen (oder Strg + F5 auf der Seite drücken) und schauen ob es dann besser geht.

Was genau am Pfad nicht stimmt kann man nicht sagen, wenn man die Seite nicht live sieht. Daher wird es schwierig hier etwas zu erraten. Gehe den Pfad am besten Schritt für Schritt von der TLD bis zur Datei durch und vergleiche ihn mit dem Dateisystem. Wenn dort etwas abweicht, dann hast du den Fehler.

Daaron · 6. Februar 2015

Da die Pfade für CSS & JS im Kopf relativ angegeben wurden, gehe ich hier schlichtweg davon aus, dass du nicht nur den <viewport> eingebüßt hast, sondern auch noch den <base>-Tag. Ergänze selbigen, und es könnte alles etwas hübscher werden.

Suche

HTML HTML in Joomla Template konvertieren

magic.dave

Lt. Junior Grade

Speedy.

Gast

magic.dave

Lt. Junior Grade

Ciraxis

Lieutenant

Speedy.

Gast

Daaron

Fleet Admiral

Ähnliche Themen