Joomla Templates: Unterschied zwischen den Versionen
| Zeile 34: | Zeile 34: | ||
Mit der <tt>@Import</tt> Regel kann man eine andere CSS Datei in die <tt>user.css</tt> importieren. Das kann sinnvoll sein, wenn man einige Stile definiert hat, die man in jedem Projekt verwenden möchte. | Mit der <tt>@Import</tt> Regel kann man eine andere CSS Datei in die <tt>user.css</tt> importieren. Das kann sinnvoll sein, wenn man einige Stile definiert hat, die man in jedem Projekt verwenden möchte. | ||
@import "/joomla_user.css" | @import "/joomla_user.css" | ||
Falls die Datei nicht im Basisverzeichnis des Joomla-Projekts liegt, kann man einen Symlink machen, | Falls die Datei nicht im Basisverzeichnis des Joomla-Projekts liegt, kann man einen Symlink machen, der auf die Datei verweist. | ||
ln -s ../../include/css/joomla_user.css | ln -s ../../include/css/joomla_user.css | ||
Version vom 3. Januar 2025, 20:46 Uhr
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
CSS Datei einbinden
Mit der @Import Regel kann man eine andere CSS Datei in die user.css importieren. Das kann sinnvoll sein, wenn man einige Stile definiert hat, die man in jedem Projekt verwenden möchte.
@import "/joomla_user.css"
Falls die Datei nicht im Basisverzeichnis des Joomla-Projekts liegt, kann man einen Symlink machen, der auf die Datei verweist.
ln -s ../../include/css/joomla_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/site/name_des_templates media/templates/site/name_des_templates
Folgende Datei bearbeiten und den alten Namen durch den neuen ersetzen
templates/site/name_des_templates/templateDetails.xml
In der Datenbank in folgenden Tabellen alle Vorkommen des alten Namens ersetzen.
extensions template_styles