Differences

This shows you the differences between two versions of the page.

--- de:2.0:admidio_customization [2024/01/12 21:31] – [Texte aus Sprachdateien verwenden] fasse
+++ de:2.0:admidio_customization [2024/11/15 18:56] (current) – [Wie verändere ich Icons ?] greno
@@ Line 1: / Line 1: @@
 ====== Layout-Anpassungen ======
 ===== Wie erstelle ich ein eigenes Theme? =====
-Admidio wird mit einem zeitgemäßen Layout ausgeliefert. Dieses könnt ihr natürlich auch für eure Webseite nutzen. In vielen Fällen besteht allerdings der Wunsch das Layout von Admidio an das Layout eurer Seite anzupassen. Das kann von einfachen Farbänderungen bis hin zu einem eigenen Kopf und Fuß der Seite gehen. Manch einer will vielleicht sogar den Aufbau ändern und ggf. Inhalte in Formularen oder Listen anpassen.
+Admidio wird mit einem zeitgemäßen Layout ausgeliefert. Dieses kannst du natürlich auch für eure Webseite nutzen. In vielen Fällen besteht allerdings der Wunsch das Layout von Admidio an das Layout eurer Seite anzupassen. Das kann von einfachen Farbänderungen bis hin zu einem eigenen Kopf und Fuß der Seite gehen. Vielleicht willst du sogar den Aufbau ändern und ggf. Inhalte in Formularen oder Listen anpassen.
-Diese Seite beschreibt die Möglichkeiten, die ihr habt das vorgegebene Layout anzupassen. Die hier beschriebenen Anpassungen beziehen sich auf Admidio 4.0 oder eine aktuellere Version. Vieles ist möglich, aber leider nicht alles. Admidio hat historisch bedingt eine enge Verzahnung von Layout und Logik. Diese versuchen wir immer weiter zu trennen. Die relevanten Layoutdateien werden im Ordner **adm_themes** hinterlegt. Dort gibt es für jedes Theme einen Unterordner. Wenn ihr nur Kleinigkeiten ändern wollt, dann könnt ihr das im bestehenden Theme **Simple** machen. Bei größeren Änderungen empfehlen wir euch eine Kopie von **Simple** unter einem neuen Namen z.B. **myNewTheme** zu erstellen. Ihr könnt beliebig viele Themes erstellen. Das gewünschte Theme kann später in den Einstellungen unter //Einstellungen > Allgemein > Admidio-Theme// ausgewählt werden.\\
+Diese Seite beschreibt die Möglichkeiten, die du hast um das vorgegebene Layout anzupassen. Die hier beschriebenen Anpassungen beziehen sich auf Admidio 4.0 oder eine aktuellere Version. Vieles ist möglich, aber leider nicht alles. Admidio hat historisch bedingt eine enge Verzahnung von Layout und Logik. Diese versuchen wir immer weiter zu trennen. Die relevanten Layoutdateien werden im Ordner **adm_themes** hinterlegt. Dort gibt es für jedes Theme einen Unterordner. Wenn du nur Kleinigkeiten ändern willst, dann kannst du das im bestehenden Theme **Simple** machen. Bei größeren Änderungen empfehlen wir dir eine Kopie von **Simple** unter einem neuen Namen z.B. **myNewTheme** zu erstellen. Du kannst beliebig viele Themes erstellen. Das gewünschte Theme kann später in den Einstellungen unter //Einstellungen > Allgemein > Admidio-Theme// ausgewählt werden.\\
 {{:de:2.0:documentation:layout:theme_change.png?400|Theme auswählen}}
 ===== Wie passe ich das Layout mit CSS an? =====
-Viele Layoutanpassungen können bereits über CSS umgesetzt werden. Dazu steht euch die folgende Datei im Theme-Ordner zur Verfügung ''adm_themes/simple/css/admidio.css''. Dort könnt ihr bestehende Anpassungen zu Klassen oder Ids verändern oder auch neue hinzufügen. Diese Datei wird in jede Seite als letzte CSS-Datei eingebunden und überschreibt somit alle vorherigen gesetzten Werte.\\
+Viele Layoutanpassungen können bereits über CSS umgesetzt werden. Dazu steht dir die folgende Datei im Theme-Ordner zur Verfügung ''adm_themes/simple/css/admidio.css''. Dort kannst du bestehende Anpassungen zu Klassen oder Ids verändern oder auch neue hinzufügen. Diese Datei wird in jede Seite als letzte CSS-Datei eingebunden und überschreibt somit alle vorherigen gesetzten Werte.\\
-Markiert eure Änderungen in der CSS Datei am Besten mit einem eindeutigen Kürzel. Dies hilft euch später, falls ihr nach einem Update eure Anpassungen in der admidio.css wieder hinterlegen wollt.
+Markiere deine Änderungen in der CSS Datei am Besten mit einem eindeutigen Kürzel. Dies hilft dir später, falls du nach einem Update deine Anpassungen in der admidio.css wieder hinterlegen willst.
 <code css>.admidio-icon-link {
     margin-left: 0px;
@@ Line 25: / Line 25: @@
 /* my code end */</code>\\
-Das Admidio Layout basiert auf [[https://getbootstrap.com/|Bootstrap]], welches die grundlegenden Layoutelemente vorgibt. Für Bootstrap gibt es bereits viele vorgefertigte alternative Layouts. Ihr könnt die integrierten Bootstrap CSS und Javascript-Dateien austauschen. Öffnet dazu einfach die Datei ''adm_themes/simple/templates/js_css_files.tpl'' und ersetzt dort die Url der folgenden Zeilen auf eure neuen Bootstrap Dateien.
+Das Admidio Layout basiert auf [[https://getbootstrap.com/|Bootstrap]], welches die grundlegenden Layoutelemente vorgibt. Für Bootstrap gibt es bereits viele vorgefertigte alternative Layouts. Du kannst die integrierten Bootstrap CSS und Javascript-Dateien austauschen. Öffne dazu einfach die Datei ''adm_themes/simple/templates/js_css_files.tpl'' und ersetze dort die Url der folgenden Zeilen auf deine neuen Bootstrap Dateien.
 <code html>  <script type="text/javascript" src="{$urlAdmidio}/adm_program/libs/client/bootstrap/js/bootstrap.bundle.min.js">
   <link rel="stylesheet" type="text/css" href="{$urlAdmidio}/adm_program/libs/client/bootstrap/css/bootstrap.min.css" />
 </script>
 </code>
-Achtet darauf, dass die Dateien 2x leicht abgewandelt eingebunden werden. Einmal im $debug Modus in voller Länge und einmal als minified-Dateien für den produktiven Betrieb. Ihr solltet die Dateien an beiden Stellen austauschen.
+Achte darauf, dass die Dateien 2x leicht abgewandelt eingebunden werden. Einmal im $debug Modus in voller Länge und einmal als minified-Dateien für den produktiven Betrieb. Du solltest die Dateien an beiden Stellen austauschen.
 ===== Wie bearbeite ich das Layout mit der Template Engine? =====
-Admidio nutzt zur Darstellung der Html-Seite die [[https://www.smarty.net/|Smarty Template Engine]]. Mit ihr erzeugen wir die allgemeinen Layout-Elemente wie z.B. den Seitenkopf mit dem Menü und den Seitenfuß. Der eigentliche Inhalt, die Dialoge oder Listen werden momentan noch aus den einzelnen Scripten erzeugt und können nicht über spezielle Templatedateien verändert werden. Schaut euch aber mal an, was bereits alles über die Hauptseite bereits möglich ist.
+Admidio nutzt zur Darstellung der Html-Seite die [[https://www.smarty.net/|Smarty Template Engine]]. Mit ihr erzeugen wir die allgemeinen Layout-Elemente wie z.B. den Seitenkopf mit dem Menü und den Seitenfuß. Der eigentliche Inhalt, die Dialoge oder Listen werden momentan noch aus den einzelnen Scripten erzeugt und können nicht über spezielle Templatedateien verändert werden. Schau dir aber mal an, was bereits alles über die Hauptseite möglich ist.
-Ihr findet die Template-Dateien im Ordner ''adm_themes/simple/templates'' und könnt diese dort anpassen. Anbei findet ihr einen kurzen Überblick, was welche Datei inhaltlich abbildet:
+Du findest die Template-Dateien im Ordner ''adm_themes/simple/templates'' und kannst diese dort anpassen. Anbei findest du einen kurzen Überblick, was welche Datei inhaltlich abbildet:
 ^ Templatedatei      ^ Beschreibung         ^
-| cookie_note.tpl    | Stellt das Script für das Cookie-Popup bereit und sollte nur angepasst werden, wenn ihr das Verhalten oder Aussehen von diesem kleinen Popup ändern wollt. Schaut euch dazu den dazugehörigen [[https://www.osano.com/cookieconsent/download/|Script-Konfigurator]] an.         |
+| cookie_note.tpl    | Stellt das Script für das Cookie-Popup bereit und sollte nur angepasst werden, wenn du das Verhalten oder Aussehen von diesem kleinen Popup ändern willst. Schaue dir dazu den dazugehörigen [[https://www.osano.com/cookieconsent/download/|Script-Konfigurator]] an.         |
 | index_reduced.tpl    | Stark Layout reduzierte Seite, welche nur den Seitentitel, einen Zurück-Button und den eigentlichen Inhalt anzeigt. Seitenkopf, das Navigationsmenü und der Seitenfuß werden nicht angezeigt. Diese Seite wird z.B. bei der Druckvorschau genutzt. |
-| **index.tpl**    | Die Hauptseite Layout Seite von Admidio, welche den Seitenkopf, das Navigationmenü, sowie den Seitenfuß darstellt und den eigentlichen Seiteninhalt einbettet. In diese Seite könnt ihr euren Seitenaufbau einbauen.        |
+| **index.tpl**    | Die Hauptseite Layout Seite von Admidio, welche den Seitenkopf, das Navigationmenü, sowie den Seitenfuß darstellt und den eigentlichen Seiteninhalt einbettet. In diese Seite kannst du euren Seitenaufbau einbauen.        |
-| js_css_files.tpl    | Diese Seite integriert alle CSS oder Javascript-Dateien und sollte nur angepasst werden, falls ihr z.B. für [[https://getbootstrap.com/|Bootstrap]] ein anderes Layout einbinden wollt. |
+| js_css_files.tpl    | Diese Seite integriert alle CSS oder Javascript-Dateien und sollte nur angepasst werden, falls du z.B. für [[https://getbootstrap.com/|Bootstrap]] ein anderes Layout einbinden willst. |
 | message_modal.tpl   | Seiteninhalt für eine Admidio-Nachricht in einem modalen Dialog z.B. bei der E-Card-Vorschau oder beim Löschen von Inhalten. |
 | message.tpl    | Seiteninhalt für eine Admidio-Nachricht z.B. "Daten wurden gespeichert" oder "Feld ist nicht gefüllt". |
@@ Line 50: / Line 50: @@
 Mit Hilfe von Smarty können Variablen in Template-Dateien eingebunden werden, welche zur Laufzeit von Admidio gefüllt werden und somit einen dynamischen Inhalt haben. Variablen werden mit einer geschweiften Klammer eingeschlossen und beginnen immer mit einem $ Zeichen. Mit dieser Syntax können sie direkt in Html-Code eingebaut werden.
-Wollt Ihr zum Beispiel eine Überschrift mit dem Namen eurer Organisation hinterlegen, so ist dies wie folgt möglich: <code html><h1>{$organizationName}</h1></code>
+Willst du zum Beispiel eine Überschrift mit dem Namen eurer Organisation hinterlegen, so ist dies wie folgt möglich: <code html><h1>{$organizationName}</h1></code>
-Die folgenden Variablen stehen auf jeder Admidio-Seite zur Verfügung und können von euch in den Template-Dateien genutzt werden, falls ihr diese umgestalten wollt:
+Die folgenden Variablen stehen auf jeder Admidio-Seite zur Verfügung und können von dir in den Template-Dateien genutzt werden, falls du diese umgestalten willst:
 ^ Variable      ^ Beispielinhalt         ^ Beschreibung         ^
 | {$additionalHeaderData} | <meta charset="utf-8">    | Weitere Html-Tags für den Seitenkopf. |
@@ Line 81: / Line 81: @@
 ==== Daten des/der angemeldeten Benutzer:in verwenden ====
-Mit Smarty habt ihr in den Template-Dateien Zugriff auf alle Profildaten und die UUID des/ der angemeldeten Benutzer:in. Es steht euch dazu das Objekt ''currentUser'' zur Verfügung, welches ihr an beliebigen Stellen integrieren könnt. Für die Profildaten benötigt ihr den internen Namen des Profilfelds, welches ihr in den Einstellungen des jeweiligen Profilfelds in Admidio findet. Wollt ihr nun z.B. Vor- und Nachname des/der Benutzer:in ausgeben, könnt ihr dies wiefolgt machen: <code html>{$currentUser->getValue('FIRST_NAME')} {$currentUser->getValue('LAST_NAME')}</code> Die UUID könnt ihr mit folgendem Code ausgeben:<code html>{$currentUser->getValue('usr_uuid')}</code> Den Anmeldenamen könnt ihr mit diesem Code ausgeben:<code html>{$currentUser->getValue('usr_login_name')}</code>
+Mit Smarty hast du in den Template-Dateien Zugriff auf alle Profildaten und die UUID des/ der angemeldeten Benutzer:in. Es steht dir dazu das Objekt ''currentUser'' zur Verfügung, welches du an beliebigen Stellen integrieren kannst. Für die Profildaten benötigst du den internen Namen des Profilfelds, welches du in den Einstellungen des jeweiligen Profilfelds in Admidio findest. Willst du nun z.B. Vor- und Nachname des/der Benutzer:in ausgeben, kannst du dieses wie folgt machen: <code html>{$currentUser->getValue('FIRST_NAME')} {$currentUser->getValue('LAST_NAME')}</code> Die UUID kannst du mit folgendem Code ausgeben:<code html>{$currentUser->getValue('usr_uuid')}</code> Den Anmeldenamen kannst du mit diesem Code ausgeben:<code html>{$currentUser->getValue('usr_login_name')}</code>
 ==== Texte aus Sprachdateien verwenden ====
-Mit Smarty habt ihr in den Template-Dateien auch Zugriff auf die Texte aus den Sprachdateien (adm_program/languages) und könnt diese an beliebigen Stellen integrieren. Dazu steht euch das Objekt ''l10n'' zur Verfügung. Ihr benötigt lediglich das individuellen Kürzel des Textes z.B. SYS_FILE_EXTENSION_INVALID und könnt dieses dann über die folgende Syntax im Html-Code einbinden:
+Mit Smarty hast du in den Template-Dateien auch Zugriff auf die Texte aus den Sprachdateien (adm_program/languages) und kannst diese an beliebigen Stellen integrieren. Dazu steht dir das Objekt ''l10n'' zur Verfügung. Du benötigst lediglich das individuellen Kürzel des Textes z.B. SYS_FILE_EXTENSION_INVALID und kannst dieses dann über die folgende Syntax im Html-Code einbinden:
 <code html><b>{$l10n->get('SYS_FILE_EXTENSION_INVALID')}</b></code>
 Die geschweiften Klammern mit dem l10n->get, sowie den normalen Klammern mit den Hochkommata müssen immer hinterlegt werden. Dazwischen kommt dann das Text-Kürzel, welches bei der Anzeige der Seite durch den Text in der eingestellten Sprache ersetzt wird.\\
@@ Line 92: / Line 92: @@
 ===== Wie verändere ich Icons ? =====
-Admidio nutzt zur Darstellung von Icons die Schriftbibliothek [[https://fontawesome.com/|Font Awesome]], genauer gesagt das [[https://fontawesome.com/icons?d=gallery&s=solid&m=free|kostenlose Solid Theme]] dieser Bibliothek. Die Icons könnt ihr ziemlich einfach integrieren. Sucht auf der oben genannten Webseite nach eurem gewünschten Icon, merkt euch den Namen und baut folgenden Codeschnipsel ein: <code html><i class="fas fa-chevron-circle-down"></i></code> Bei diesem Beispiel heißt das Icon //chevron-circle-down//. Ihr müsst dann noch ein //fa-// davor setzen.\\
+Admidio nutzt zur Darstellung von Icons die Schriftbibliothek [[https://fontawesome.com/|Font Awesome]], genauer gesagt das [[https://fontawesome.com/icons?d=gallery&s=solid&m=free|kostenlose Solid Theme]] dieser Bibliothek. Die Icons kannst du ziemlich einfach integrieren. Suche auf der oben genannten Webseite nach deinem gewünschten Icon, merke dir den Namen und baue folgenden Codeschnipsel ein: <code html><i class="fas fa-chevron-circle-down"></i></code> Bei diesem Beispiel heißt das Icon //chevron-circle-down//. Du musst dann noch ein //fa-// davor setzen.\\
-Ihr könnt alle eingebauten Icons mittels CSS leicht verändern. Dazu müsst ihr nur die Klasse //fas// mittels CSS ansprechen und könnt dort alle Attribute für Schriften anwenden: <code css>.fas {
+Du kannst alle eingebauten Icons mittels CSS leicht verändern. Dazu musst du nur die Klasse //fas// mittels CSS ansprechen und kannst dort alle Attribute für Schriften anwenden: <code css>.fas {
    color: #0000ff;
    font-size: 120%;