Einfaches Template erstellen und saubere Trennung von HTML und CSS

Hanekawa · 25. Januar 2018

Guten Tag.

Ich steige gerade auf Joomla um.
Natürlich brauchen die Projekte auch eigene Templates.
Darum erstelle ich gerade für eines ein einfaches Joomla-Template:

PHP

<?php/** * SLSR backward compatible board template */// No direct access.defined('_JEXEC') or die('Restricted access');// Output as HTML5$this->setHtml5(true);?><!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8"/>        <title>SLSR</title>        <link rel="stylesheet" href="<?= $this->baseurl.'/templates/'.$this->template ?>/css/screen.css" media="screen"/>        <script src="js/responsive.js"></script>    </head>    <body>        <header>            <a href="#">                <img src="<?= $this->baseurl.'/templates/'.$this->template ?>/images/logo.png" alt="Red hachiman torii as logo" id="logo">                <h1>Second Life Shrine register</h1>            </a>        </header>        <nav>            <ul>                <jdoc:include type="modules" name="position-7" />            </ul>        </nav>        <main>            <jdoc:include type="component" />        </main>        <footer>            <p>&copy; 2018 Second Life Shrine register</p>        </footer>    </body></html>

Allerdings habe ich keinen Einfluss auf den HTML-Code des Inhalts und der Menü-Struktur.
Außerdem enthält der ausgegebene HTML-Code zusätzlich CSS, anstatt dies sauber zu trennen:

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title>SLSR</title>
		<link rel="stylesheet" href="/joomla/templates/slsr/css/screen.css" media="screen"/>
		<script src="/joomla/js/responsive.js"></script>
	</head>
	<body>
		<header>
			<a href="#">
				<img src="/joomla/templates/slsr/images/logo.png" alt="Red hachiman torii as logo" id="logo">
				<h1>Second Life Shrine register</h1>
			</a>
		</header>
		<nav>
			<ul>
				<ul class="nav menu">
<li class="item-109 default"><a href="/joomla/de/" >Über uns</a></li><li class="item-113 current active"><a href="/joomla/de/imprint" >Impressum</a></li><li class="item-117 parent"><a href="/joomla/de/shrines" >Schreine</a></li></ul>
			</ul>
		</nav>
		<main>
			<div class="item-page" itemscope itemtype="https://schema.org/Article">
	<meta itemprop="inLanguage" content="de-DE" />
			<div class="page-header">
					<h2 itemprop="headline">
				Impressum			</h2>
									</div>
							<div itemprop="articleBody">
		<h4><strong>Anbieter</strong></h4>
<table style="border-color: #000000;" border="0">
<tbody>
<tr>
<td><strong>Name:</strong></td>
<td>Vivien Richter</td>
</tr>
<tr>
<td><strong>Second Life Name:</strong></td>
<td><a title="Second Life Profil von Vivien Lyne" href="secondlife://localhost/app/agent/3729f60f-73a4-4b6d-ae59-06136d1eade1/about" target="_blank" rel="noopener noreferrer">Vivien Lyne</a></td>
</tr>
<tr>
<td><strong>Adresse:</strong></td>
<td>Städtelner Straße 28a<br />D-04416 Markkleeberg, Deutschland</td>
</tr>
<tr>
<td><strong>Telefon:</strong></td>
<td>+49 163 7037245</td>
</tr>
<tr>
<td><strong>E-Mail:</strong></td>
<td><span id="cloakaccf1a89798f57b492d6abff91c81ba5">Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!</span><script type='text/javascript'>
				document.getElementById('cloakaccf1a89798f57b492d6abff91c81ba5').innerHTML = '';
				var prefix = 'ma' + 'il' + 'to';
				var path = 'hr' + 'ef' + '=';
				var addyaccf1a89798f57b492d6abff91c81ba5 = 'webmaster' + '@';
				addyaccf1a89798f57b492d6abff91c81ba5 = addyaccf1a89798f57b492d6abff91c81ba5 + 'slsr' + '.' + 'org';
				var addy_textaccf1a89798f57b492d6abff91c81ba5 = 'webmaster' + '@' + 'slsr' + '.' + 'org';document.getElementById('cloakaccf1a89798f57b492d6abff91c81ba5').innerHTML += '<a ' + path + '\'' + prefix + ':' + addyaccf1a89798f57b492d6abff91c81ba5 + '\'>'+addy_textaccf1a89798f57b492d6abff91c81ba5+'<\/a>';
		</script></td>
</tr>
</tbody>
</table>
<p> </p>	</div>
									</div>
			<article>
				<h2>Welcome</h2>
				<p>Test page.</p>
			</article>
		</main>
		<footer>
			<p>&copy; 2018 Second Life Shrine register</p>
		</footer>
	</body>
</html>

Alles anzeigen

Wie erhalte ich vollen Einfluss auf den HTML-Code der Ausgaben von Joomla?

Schonmal vielen Dank im Voraus.

- Hanekawa

chr-hl · 25. Januar 2018

Moin,
ich bin ziemlich sicher, dass Joomla standardmäßig direkt kein Inline-CSS erzeugt.
Das was ich bei der Tabelle entdeckt habe, dürfte m.E. durch Formatierung im Editor erzeugt worden sein.
Ansonsten muss ich gestehen, dass ich Deine Frage nicht verstanden hätte.
Christian

Indigo66 · 25. Januar 2018

Zitat von Hanekawa

Allerdings habe ich keinen Einfluss auf den HTML-Code des Inhalts und der Menü-Struktur.

Selbstverständlicxh kannst Du das. Der Output von Joomla ist zwar schon sehr clean, aber wenn Du Veränderungen willst, kannst Du die Views durch ein Templateoverride ändern.
Alles was Du zu dem Thema wissen musst, findest Du hier: https://www.j-over.de/de/ und https://docs.joomla.org/How_to…_from_the_Joomla!_core/de

BTW: Warum nimmst du nicht einfach das Standardtemplate Protostar?

chr-hl · 25. Januar 2018

Zitat von Indigo66

BTW: Warum nimmst du nicht einfach das Standardtemplate Protostar?

Die Frage stelle ich mir auch immer, wenn ich von "Einsteigern" lese.
Warum gleich mit dem Schwierigsten anfangen, es gibt doch so viele Templates, die häufig dann auch die reponsive Darstellung mitbringen.

Christian

Hanekawa · 25. Januar 2018

Guten Tag.

Vielen Dank für eure schnellen Antworten.

@chr-hl Das Inline-CSS hat sich geklärt. Da habe ich tatsächlich etwas übersehen.
Und ein Standard-Template kann ich für eine öffentlich zugängliche Seite nicht nehmen. Das sollte sich von selbst erklären.

@Indigo66 Vielen Dank! Das Überschreiben der Views per Template war genau das, was ich gesucht habe

Damit sehe ich das Thema als gelöst an.

- Hanekawa

wolfstar · 25. Januar 2018

Nur mal interessehalber:

Zitat von Hanekawa

Und ein Standard-Template kann ich für eine öffentlich zugängliche Seite nicht nehmen. Das sollte sich von selbst erklären.

Vielleicht kannst du das mal bitte erklären, denn mir erklärt es sich nicht von selbst.

chr-hl · 25. Januar 2018

Das würde mich auch sehr interessieren.

Christian

Tags