Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
de:2.0:admidio_customization [2021/01/22 07:04] – [Wie kann ich die Übersichtsseite anpassen ?] fassede:2.0:admidio_customization [2024/01/12 21:31] (current) – [Texte aus Sprachdateien verwenden] fasse
Line 4: Line 4:
  
 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 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.\\ 
-{{:de:themes:theme_change.png?400|Theme auswählen}}+{{:de:2.0:documentation:layout:theme_change.png?400|Theme auswählen}}
  
 ===== Wie passe ich das Layout mit CSS an? ===== ===== Wie passe ich das Layout mit CSS an? =====
-Viele Layoutanpassungen können bereits über CSS umgesetzt werden. Dazu steht euch im Theme-Ordner //adm_themes/simple/css// die **admidio.css** Datei zur Verfügung. 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 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.\\ 
  
 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. 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.
Line 25: Line 25:
 /* my code end */</code>\\  /* 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. 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.
 <code html>  <script type="text/javascript" src="{$urlAdmidio}/adm_program/libs/client/bootstrap/js/bootstrap.bundle.min.js"> <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" />   <link rel="stylesheet" type="text/css" href="{$urlAdmidio}/adm_program/libs/client/bootstrap/css/bootstrap.min.css" />
Line 35: Line 35:
 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. Schaut euch aber mal an, was bereits alles über die Hauptseite bereits 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:+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:
 ^ Templatedatei      ^ Beschreibung         ^ ^ 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 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.         |
Line 54: Line 54:
 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 euch in den Template-Dateien genutzt werden, falls ihr diese umgestalten wollt:
 ^ Variable      ^ Beispielinhalt         ^ Beschreibung         ^ ^ Variable      ^ Beispielinhalt         ^ Beschreibung         ^
-| {$id} | admidio-announcements    Id der Html-Seite, welche für jede Seite separat erstellt wird und im <bodyals id hinterlegt wird. | +| {$additionalHeaderData} | <meta charset="utf-8">    Weitere Html-Tags für den Seitenkopf. | 
-| {$title} | Demo-Organisation - Meine Beispielseite    Titel der Html-Seite für das Tag <title>. |+| {$content} | <html>...    | Der eigentliche Inhalt der aufgerufenen Seite z.B. ein Dialog oder eine Liste. | 
 +| {$currentUser} | Müller    Objekt des angemeldeten Benutzers. Darüber können sämtliche Profildaten abgefragt werden. ([[de:2.0:admidio_customization#daten_des_der_angemeldeten_benutzerin_verwenden|Ausführliche Dokumentation]]) //(ab Version 4.3)//| 
 +| {$debug} | false    | Normalerweise //false// außer der Debug-Modus wurde in der config.php angeschaltet. | 
 +| {$hasPreviousUrl} | true    | Gibt an, ob es eine URL gibt, von der diese Seite aufgerufen wurde. Im Standardtheme wird dann ein Zurück-Button angezeigt. | 
 | {$headline} | Meine Beispielseite    | Überschrift für die Seite. | | {$headline} | Meine Beispielseite    | Überschrift für die Seite. |
-| {$hasPreviousUrl} | true    Gibt anob es eine URL gibt, von der diese Seite aufgerufen wurdeIm Standardtheme wird dann ein Zurück-Button angezeigt. |+| {$id} | admidio-announcements    Id der Html-Seitewelche für jede Seite separat erstellt wird und im <body> als id hinterlegt wird. | 
 +| {$javascriptContent} | if(javascript = 1) {}    | Weiterer Javascript-Code der jeweiligen Seite. 
 +| {$javascriptContentExecuteAtPageLoad} | if(javascript = 1) {}     | Weiterer Javascript-Code der jeweiligen Seite, der beim Seitenaufruf ausgeführt werden soll. | 
 +| {$languageIsoCode} | de    | Iso-Code der aktuell ausgewählten Sprache z.B. 'de' oder 'en'. //(ab Version 4.1.6)// | 
 +| {$l10n} | Alle Sprachtexte    | Objekt um auf alle Sprachtexte von Admidio zu zugreifen. ([[de:2.0:admidio_customization#texte_aus_sprachdateien_verwenden|Ausführliche Dokumentation]]) | 
 +| {$menuSidebar} | <html>...    | Html-Code für das Navigationsmenü. |
 | {$organizationName} | Demo-Organisation   | Name eurer Organisation aus den Einstellungen. | | {$organizationName} | Demo-Organisation   | Name eurer Organisation aus den Einstellungen. |
 +| {$printView} | false    | Bei einer Druckvorschau //true//, ansonsten //false//. |
 +| {$registrationEnabled} | true    | Bei aktivierter Registrierung //true//, ansonsten //false//. |
 +| {$templateFile} | message.tpl    | Eine andere Template-Datei, welche in der aktuellen Template-Datei eingebunden werden soll. |
 +| {$title} | Demo-Organisation - Meine Beispielseite    | Titel der Html-Seite für das Tag <title>. |
 | {$urlAdmidio} | https://www.admidio.org/demo    | URL der Admidio-Installation. | | {$urlAdmidio} | https://www.admidio.org/demo    | URL der Admidio-Installation. |
 +| {$urlImprint} | https://www.admidio.org/imprint.php    | URL zum Impressum, welche in den Einstellungen hinterlegt wurde. |
 +| {$urlDataProtection} | https://www.admidio.org/data_protection.php    | URL zum Datenschutz, welche in den Einstellungen hinterlegt wurde |
 | {$urlTheme} | https://www.admidio.org/demo/adm_themes/simple    | URL zum verwendeten Theme der Admidio-Installation. | | {$urlTheme} | https://www.admidio.org/demo/adm_themes/simple    | URL zum verwendeten Theme der Admidio-Installation. |
-| {$userId} | 4711    | Id des angemeldeten Benutzers. |+| {$userId} | 4711    | Id des angemeldeten Benutzers. **(veraltet, steht ab Version 4.2 nicht mehr zur Verfügung)** | 
 +| {$userUuid} | 97f8346c-ca53-40de-857a-459d26d9df40    | Uuid des angemeldeten Benutzers. **(veraltet, ab Version 4.3 bitte {$currentUser->getValue('usr_uuid')} verwenden)** |
 | {$validLogin} | true    | Bei gültiger Anmeldung in Admidio //true//, ansonsten //false//. | | {$validLogin} | true    | Bei gültiger Anmeldung in Admidio //true//, ansonsten //false//. |
-| {$debug} | false    | Normalerweise //false// außer der Debug-Modus wurde in der config.php angeschaltet. | +hinterlegt wurde. | 
-| {$registrationEnabled} | true    | Bei aktivierter Registrierung //true//, ansonsten //false//. | + 
-| {$printView} | false    | Bei einer Druckvorschau //true//, ansonsten //false//. | +==== Daten des/der angemeldeten Benutzer:in verwenden ==== 
-| {$urlImprint} | https://www.admidio.org/imprint.php    | URL zum Impressumwelche in den Einstellungen hinterlegt wurde+Mit Smarty habt ihr in den Template-Dateien Zugriff auf alle Profildaten und die UUID desder angemeldeten Benutzer:inEs steht euch dazu das Objekt ''currentUser'' zur Verfügung, welches ihr an beliebigen Stellen integrieren könntFür die Profildaten benötigt ihr den internen Namen des Profilfeldswelches ihr in den Einstellungen des jeweiligen Profilfelds in Admidio findetWollt ihr nun z.BVor- und Nachname des/der Benutzer:in ausgebenkö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> 
-| {$urlDataProtection} | https://www.admidio.org/data_protection.php    | URL zum Datenschutzwelche in den Einstellungen hinterlegt wurde. | +
-| {$content} | <html>...    | Der eigentliche Inhalt der aufgerufenen Seite z.B. ein Dialog oder eine Liste. | +
-{$templateFile| message.tpl    | Eine andere Template-Datei, welche in der aktuellen Template-Datei eingebunden werden soll. | +
-{$menuSidebar<html>...    | Html-Code für das Navigationsmenü. | +
-{$additionalHeaderData} | <meta charset="utf-8"   | Weitere Html-Tags für den Seitenkopf. | +
-| {$javascriptContent} | if(javascript = 1{   | Weiterer Javascript-Code der jeweiligen Seite. | +
-{$javascriptContentExecuteAtPageLoad} | if(javascript = 1{    | Weiterer Javascript-Code der jeweiligen Seite, der beim Seitenaufruf ausgeführt werden soll. |+
  
 ==== Texte aus Sprachdateien verwenden ==== ==== 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 benötigt ihr 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 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:
 <code html><b>{$l10n->get('SYS_FILE_EXTENSION_INVALID')}</b></code> <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.\\  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 94: Line 102:
 Admidio zeigt normalerweise beim Aufruf und nach einer erfolgreichen Anmeldung eine Übersichtsseite mit verschiedenen Plugins an, wie zum Beispiel die letzten Ankündigungen, die letzten Dateien und Dokumente oder die anstehenden Geburtstage.\\  Admidio zeigt normalerweise beim Aufruf und nach einer erfolgreichen Anmeldung eine Übersichtsseite mit verschiedenen Plugins an, wie zum Beispiel die letzten Ankündigungen, die letzten Dateien und Dokumente oder die anstehenden Geburtstage.\\ 
 {{:de:2.0:documentation:layout:overview.png?400|Admidio Übersichtsseite}}\\  {{:de:2.0:documentation:layout:overview.png?400|Admidio Übersichtsseite}}\\ 
-Möchte man nun einige der bereits hinterlegten Plugins nicht sehen oder weitere hinzufügen, so kann man dies in der dazugehörigen Template-Datei machen. Diese liegt unter ''www.deine-webseite.de/admidio/adm_themes/simple/templates/overview.tpl''. In dieser Datei findest du jetzt verschiedene HTML-Blöcke, welche die folgende Struktur haben: <code html><div class="col-sm-6 col-lg-4 col-xl-3"> +Möchte man nun einige der bereits hinterlegten Plugins nicht sehen oder weitere hinzufügen, so kann man dies in der dazugehörigen Template-Datei machen. Diese liegt unter ''www.deine-webseite.de/admidio/adm_themes/simple/templates/overview.tpl''. In dieser Datei findest du jetzt verschiedene HTML-Blöcke, welche die folgende Struktur haben: <code html><div class="admidio-overview-plugin col-sm-6 col-lg-4 col-xl-3" id="admidio-plugin-birthday"> 
-    <div class="card admidio-roles" id="role_details_panel_'.$rolId.'"> +    <div class="card admidio-card"> 
-        <div class="card-body" id="admRoleDetails'.$rolId.'">+        <div class="card-body">
             {load_admidio_plugin plugin="birthday" file="birthday.php"}             {load_admidio_plugin plugin="birthday" file="birthday.php"}
         </div>         </div>
     </div>     </div>
 </div></code> Suche dort nach deinem nicht mehr gewünschten Plugin ''plugin="birthday"'' und entferne anschließend diesen Block komplett.\\ \\  </div></code> Suche dort nach deinem nicht mehr gewünschten Plugin ''plugin="birthday"'' und entferne anschließend diesen Block komplett.\\ \\ 
-Willst du ein weiteres Plugin hinzufügen, so kannst du so einen Block duplizieren. Wichtig ist hier der Eintrag bei **Plugin** und **File**. Dies ist der Ordnername und die HTML oder PHP-Datei, welche angezeigt werden soll. Das Plugin muss dabei im Ordner adm_plugins liegen. Möchstest du zum Beispiel die Datei unter ''adm_plugins/kontaktformular/index.html'' anzeigen, dann sähe der Codeblock so aus: <code html>    <div class="col-sm-6 col-lg-4 col-xl-3"> +Willst du ein weiteres Plugin hinzufügen, so kannst du so einen Block duplizieren und das Plugin hinterlegenWir erstellen jetzt eine einfache HTML-Seite die in der Übersicht eingebunden werden soll. Dazu legen wir im Ordner **adm_plugins** einen neuen Unterordner **test** anIn diesem Unterordner erstellen wir nun eine Datei ''ausgabe.html'' mit folgendem Inhalt: <code html><h3>Test</h3> 
-        <div class="card admidio-roles" id="role_details_panel_'.$rolId.'"> +Dies ist der Inhalt <b>einer beliebigen Html-Datei</b> aus einem Unterordner von adm_plugins.</code> Den Inhalt dieser Datei kannst du nun als weiteren Block in der Übersicht mit folgendem Code integrieren: <code html><div class="admidio-overview-plugin col-sm-6 col-lg-4 col-xl-3" id="admidio-card-plugin-test"> 
-            <div class="card-body" id="admRoleDetails'.$rolId.'"> +    <div class="card admidio-card"> 
-                {load_admidio_plugin plugin="kontaktformular" file="index.html"} +        <div class="card-body"> 
-            </div>+            {load_admidio_plugin plugin="test" file="ausgabe.html"}
         </div>         </div>
-    </div></code>+    </div> 
 +</div></code>Das Ergebnis zusammen mit ein paar Plugins, die entfernt wurden, kann dann so aussehen:\\  
 +{{:de:2.0:documentation:layout:overview_customized.png?400|Angepasste Übersicht}}
  
  • de/2.0/admidio_customization.1611295484.txt.gz
  • Last modified: 2021/01/22 07:04
  • by fasse