Admidio ins eigene Layout integrieren

Mit der Version 2.0 unterstützt Admidio Themes. Diese findest du im Ordner adm_themes. Von Haus aus kommt Admidio schon mit 2 grundverschiedenen Themes daher. Dies ist zum einensyste das Classic-Theme von Admidio 1.0, sowie das Modern-Theme welches mit Admidio 2.0 ausgeliefert wird und das neue Standard-Theme geworden ist.

Themes sollen dir helfen Admidio deinem Homepage-Layout anzupassen. In einem Themeordner sind alle Grafiken, Icons und CSS-Dateien abgelegt, welche du alle für deine Homepage anpassen kannst. Auch die Haupt-Html-Dateien, welche den Seitenaufbau vorgibt, befinden sich hier und können angepasst werden. Themes können zwischen gleichen Admidio-Versionen beliebig ausgetauscht werden und somit das Aussehen deiner Seite in Sekundenschnelle ändern.

Bevor du anfängst Admidio an deine Seite anzupassen, solltest du dir eins der beiden Standard-Themes aussuchen, welches eher dem Layout deiner Seite entspricht, so musst du später weniger Anpassungen machen. Von diesem Theme erstellst du dann eine Kopie im Themeordner adm_themes und benennst diese um. Du solltest niemals direkt Änderungen in den Standard-Themes machen, damit du bei späteren Updates diese Ordner auch aktualisieren kannst und dir diese Themes immer als Vorlage dienen können.

Die wichtigsten Dateien zur individuellen Anpassungen sind die CSS-Dateien im Theme-Ordner css und die 3 Dateien my_header.php, my_body_top.php und my_body_bottom.php direkt aus dem Theme-Ordner. Mit Hilfe dieser 3 Dateien kannst du allen Admidio-Seiten deine eigenen Inhalte (Seitenkopf, Menü, Seitenleisten usw.) hinzufügen.

Schematisch ist diese Aufteilung über das folgende Bild dargestellt und kann inhaltlich im Admidio-Theme modern nachvollzogen werden:

Aufteilung der Layoutbereiche

  • Der mittlere gelbe Bereich ist der Seiteninhalt vom jeweiligen Admidio-Script und ist fest vorgegeben.
  • Der obere rote Bereich stellt die allgemeinen Seiteninformationen dar, welche über die Datei my_header.php von dir auf deine Seite angepasst werden können. Hier kannst du weitere Meta-Tags eingeben, zusätzliche Javascripte einbinden oder eigene Stylesheet-Dateien.
  • Der blaue Bereich stellt in unserem Beispiel den Seitenkopf dar und kann auch den linken Rand mit einem Menü oder einer Seitenleiste füllen. Dies erreicht man, indem man div Tags nebeneinander anordnet oder mit einer Tabelle arbeitet. Gepflegt wird dieser Teil über die Datei my_body_top.php.
  • Der grüne Bereich wird nach dem entsprechenden Admidio-Script integriert und stellt somit den Seitenfuß, sowie den rechten Seitenbereich dar. Gepflegt wird dieser Bereich über die Datei my_body_bottom.php

Layoutanpassungen innerhalb des gelbem Admidio-Bereich können über verschiedene CSS-Dateien aus dem css Ordner im Theme getätigt werden. Die wichtiste Datei ist die admidio.css, welche sämtliche CSS-Klassen beinhaltet, die in Admidio genutzt werden. Um die Textfarbe, -größe und -ausrichtung, Hintergrundfarbe und -bilder, Rahmendicke, -art und -farbe, sowie vieles mehr anzupassen erstelle eine custom.css mit der man die Eigenschaften der admidio.css überschreiben kann.

Bei einem Versionsupdate von Admidio stellt sich natürlich auch die Frage, wie man sein angepasstes Theme auf den neuesten Stand bekommt. Da hier eigene Anpassungen gemacht wurden, kann man nicht direkt den kompletten Ordner überspielen. Hierzu ist leider etwas mehr Arbeit notwendig.

  • Als erstes solltest du die Admidio-Standard-Themes updaten. Sofern du keine eigenen Anpassungen in diesen gemacht hast, kannst du einfach die Ordner überspielen. Diese Themes können später auch als Anpassungshilfe dienen, falls du Probleme mit dem Update deines Themes bekommst.
  • Im nächsten Schritt stellt sich die Frage, ob du Icons und Grafiken verändert hast. Ist dies nicht der Fall, dann können die Ordner icons und images einfach aktualisiert werden. Im anderen Fall können nur die Bilder aktualisiert werden, die nicht von dir verändert wurden.
  • Die Dateien my_header.php, my_body_top.php und my_body_bottom.php** müssen normalerweise nicht aktualisiert werden, da hier nur deine Änderungen enthalten sind.
  • Im CSS-Ordner wird es etwas schwieriger. Dateien die du nicht angepasst hast, kannst du einfach aktualisieren. Veränderte Dateien solltest du am Besten erst einmal so belassen und nur bei Problemen die Original-Dateien in den Standard-Themes anschauen und gezielt Bereiche aktualisieren.

Um dir die Arbeit bei der Themeaktualisierung etwas zu erleichtern haben wir eine eigene Änderungshistorie für Themes in Version 2.0 erstellt, welche die wichtigsten Änderungen enthält.

  • de/2.0/admidio_ins_eigene_layout_integrieren.txt
  • Last modified: 2018/03/26 15:09
  • by ximex