This translation is older than the original page and might be outdated. See what has changed.

This is an old revision of the document!

Layout adjustments

Admidio is delivered with a contemporary layout. Of course you can also use it for your website. But in many cases you might want to adapt the layout of Admidio to the layout of your website. This can range from simple color changes up to an own header and footer of the page. Some of you might even want to change the layout and adjust the content in forms or lists.

This page describes the options you have to customize the given layout. The adjustments described here refer to Admidio 4.0 or a more recent version. Many things are possible, but unfortunately not everything. Admidio has historically a close connection between layout and logic. We try to separate these more and more. The relevant layout files are stored in the folder adm_themes. There is a subfolder for each theme. If you only want to change small things, you can do this in the existing Simple theme. For bigger changes we recommend to create a copy of Simple with a new name, e.g. myNewTheme. You can create as many themes as you like. The desired theme can be selected later in the settings under Settings > General > Admidio-Theme.
Select Theme}

Many layout adjustments can already be implemented via CSS. For this you can use the admidio.css file in the theme folder adm_themes/simple/css. There you can change existing adjustments to classes or id's or add new ones. This file will be included in every page as the last CSS file and overwrites all previous set values.

Mark your changes in the CSS file with a unique identifier. This will help you later, if you want to save your changes in admidio.css after an update.

.admidio-icon-link {
    margin-left: 0px;
    padding-left: 0px;
    color: #00ffff; /* my code line */
    text-align: left;
/* my code start */
.admidio {
   color: #00ffff;
   padding-left: 15px;
   text-align: right;
/* my code end */

The Admidio Layout is based on Bootstrap, which defines the basic layout elements. For Bootstrap there are already many ready-made alternative layouts. You can exchange the integrated Bootstrap CSS and Javascript files. Just open the file adm_themes/simple/templates/js_css_files.tpl and replace the url of the following lines on your new bootstrap files.

  <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" />

Make sure that the files are included 2x slightly modified. Once in $debug mode in full length and once as minified files for productive use. You should exchange the files at both places.

Admidio uses the Smarty Template Engine to display the Html page. With it we create the general layout elements like the page header with the menu and the page footer. The actual content, the dialogs or lists are currently still generated from the individual scripts and cannot be changed using special template files. But take a look at what is already possible via the main page.

You will find the template files in the folder adm_themes/simple/templates and can customize them there. Enclosed you will find a short overview of the content of each file:

Template file Description
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 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.
js_css_files.tpl Diese Seite integriert alle CSS oder Javascript-Dateien und sollte nur angepasst werden, falls ihr z.B. für Bootstrap ein anderes Layout einbinden wollt.
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”.
overview.tpl Seiteninhalt der Startseite von Admidio mit dem Überblick über den Inhalt aller Module. Auf dieser Seite werden verschiedene Plugins eingebunden. Falls bestimmte Module oder Plugins nicht genutzt werden sollen, können diese hier entfernt werden. Es können auch weitere Plugins hinzugefügt werden.

The syntax of Smarty is actually very easy to learn and is usually already apparent when looking at our delivered template files. Additionally, there is a documentation which describes the many possibilities of Smarty. Some important points for us are described in the following.

With the help of Smarty variables can be included in template files, which are filled by Admidio at runtime and therefore have a dynamic content. Variables are enclosed with a curly bracket and always start with a $ sign. With this syntax they can be integrated directly into Html code.

For example, if you want to store a heading with the name of your organization, you can do so as follows:


The following variables are available on every Admidio page and can be used by you in the template files if you want to redesign them:

Variable Example content Description
{$id} admidio-announcements Id der Html-Seite, welche für jede Seite separat erstellt wird und im <body> als id hinterlegt wird.
{$title} Demo-Organisation - Meine Beispielseite Titel der Html-Seite für das Tag <title>.
{$headline} Meine Beispielseite Überschrift für die Seite.
{$urlPreviousPage} URL der zuletzt aufgerufen Admidio-Seite.
{$organizationName} Demo-Organisation Name eurer Organisation aus den Einstellungen.
{$urlAdmidio} URL der Admidio-Installation.
{$urlTheme} URL zum verwendeten Theme der Admidio-Installation.
{$userId} 4711 Id des angemeldeten Benutzers.
{$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.
{$registrationEnabled} true Bei aktivierter Registrierung true, ansonsten false.
{$printView} false Bei einer Druckvorschau true, ansonsten false.
{$urlImprint} URL zum Impressum, welche in den Einstellungen hinterlegt wurde.
{$urlDataProtection} URL zum Datenschutz, welche 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.

With Smarty you also have access to the texts from the language files (adm_program/languages) in the template files and can integrate them at any place. For this purpose you need the individual abbreviation of the text e.g. SYS_FILE_EXTENSION_INVALID and you can integrate it into the html code using the following syntax:


The curly brackets with the l10n→get, as well as the normal brackets with the quotation marks must always be deposited. In between there is the text abbreviation, which is replaced by the text in the selected language when the page is displayed.

The example above looks like this:
Files of this file type are not allowed on the server.

  • en/2.0/admidio_customization.1603217544.txt.gz
  • Last modified: 2020/10/20 20:12
  • by fasse