Joomla Templates
Templates
Standard Stil definieren
Erweiterungen / Templates / Stile
Beez3 - default als Standardstil setzen
Modulpositionen anpassen
position-7
Im Template Manager kann man einstellen, dass die Module links oder rechts vom Content positioniert werden.
Position of Navigation: before content
CSS Definitionen
In der Datei user.css kann man Stile definierten, die bei einem Update des Templates nicht überschrieben werden
templates/beez3/css/user.css
- Hintergrundbild im Header ändern
Das gewünschte Hintergrundbild speichern
templates/beez3/images/header.png
CSS Definitionen:
#header { padding-top: 0;
.logoheader {
background: #FFFFFF URL(../images/header.png) no-repeat
min-height: ... (wegen Hintergrundbild)
...
}
CSS Styles im Editor
Die Erweiterung JCE Editor downloaden und installieren
Komponenten / JCE Editor / Global Configuration
Pfad zur user.css angeben
Editor Styles / Custom CSS File # Joomla 3 templates/$template/css/user.css # Joomla 4 media/templates/site/$template/css/user.css
Overrides
Will man Komponenten und Module ändern, sollte man einen Output Override erstellen, damit die Änderungen nicht beim nächsten Update überschrieben werden.
- Im Backend
Erweiterungen / Templates / Templates / Beez3 Details und Dateien Overrides erstellen
Die erstellten Overrides befinden sich dann im Verzeichnis
templates/beez3/html
Man kann die Dateien mit einem beliebigen Editor oder gleich im Joomla Backend bearbeiten.
Eigene CSS Klassen
Globale CSS Styles definieren
- Eigene CSS Datei
Eigene Klassen können in jeder CSS Datei des Templates definiert werden. Am besten aber in folgender Datei definieren
css/user.css
CSS Klassen für eine bestimmte Seite
- Eine neue CSS Klasse definieren
In der CSS Datei des Templates eine eigene Klasse für ein bestimmtes Element definieren
# Beispiel für einen Tabellenstil
table.content_table {
border-collapse:collapse;
width:100%;
}
.content_table td {
border:1px solid #CCC;
padding: 4px;
}
- Die CSS Klasse im Backend zuweisen
Im Backend einen Menülink bearbeiten, der den Artikel aufruft, in dem die neue CSS Klasse angewendet werden soll.
In das Feld Seitenklasse den Namen der Klasse mit einem führenden Leerzeichen eingeben.
Einstellungen der Seitenanzeige / Seitenklasse Seitenklasse: content_table
Overrides
Die Änderungen, die man im Code durchführt, sollten möglichst gut kommentiert werden.
Hat man von einer Komponente ein Override im Template angelegt, so wird das nicht überschrieben bei einem Update der Core Komponenten, was ja der Sinn von Overrides ist. Das hat aber auch zur Folge, dass Verbesserungen im Core nicht wirksam werden im Override.
Falls man einmal Overrides nach Core-Updates ändern muss, ist es hilfreich, wenn man das Override sauber mit Kommentaren versehen hat.
Offline Seite
Die Offline Seite kann man durch eigenen Code ersetzen bzw ergänzen.
- Folgende Datei in den Ordner
template/mein_templatekopieren und bearbeiten:
template/system/offline.php
oder gleich eine eigene Offline-Seite mit PHP erstellen.
- Joomla verwendet dann nicht diese Standardseite im system Verzeichnis, sondern den Override im aktuell verwendeten Template.
Das ist ein Beispiel meiner Offline Seite(n):
<?php
defined('_JEXEC') or die; ?>
<head>
</head>
<body>
<style>
.offline-container {
max-width:100%;
margin-top:4px;
padding: 10px;
background: #DDD;
border: solid thin #999;
}
@media only screen and (min-width: 721px) {
.offline-container {
position: absolute;
left: 50%;
width: 600px;
margin-left: -300px;
}
}
</style>
<div class="offline-container"> <?php
require_once("/srv/www/include/php/application.php");
define ("DEVELOP",false);
define ("PROJ_NAME","abendmusik.at");
define ("APP_NAME","Abendmusik in der Magdalenabergkirche");
echo application::render_offlinePage(array(
"referer" => "joomla",
"offline" => true,
"days" => 1,
"hours" => 2
)); ?>
</div>
</body>
</html>
Die in obigem Code aufgerufene Funktion application::renderOfflinePagezeigt an, wie lang die Seite offline ist.
Hier der Code meiner Offline Funktion:
static function renderOfflinePage($params=array()) {
date_default_timezone_set('Europe/Vienna');
foreach ( $params as $key => $value ) $$key = $value;
$start = mktime(date('H'), 0, 0, date("m"), date("d") , date("Y"));
$sec = ($days * 24 + $hours) * 60 * 60;
$ende_timestamp = $start + $sec;
$Uhrzeit = strftime ("%H:00",$ende_timestamp);
if ( $days == 0 ) {
$Datum = "heute";
} else {
$Datum = strftime ("%d. %B %Y",$ende_timestamp);
}
$return = "<h1>Wartung</h1>";
$return .= "<h2>".$caption."</h2>";
$return .= "<p>Diese Seite ist voraussichtlich bis <strong>".$Datum." ".$Uhrzeit."</strong> nicht verfügbar.</p>";
$return .= "<p>Bitte um Verständnis.</p>";
$return .= "<a href='mail@example.com'>Mail</a>an Webmaster.";
return $return;
}
Template umbenennen
Ordner umbenennen
Folgende Ordner umbenennen
templates/name_des_templates