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

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 Provides the script for the cookie popup and should only be adjusted if you want to change the behavior or appearance of this little popup. Have a look at the corresponding Script-Configurator.
index_reduced.tpl Strongly reduced layout page, which only shows the page title, a back button and the actual content. Page header, the navigation menu and the page footer are not displayed. This page is used e.g. for the print preview.
index.tpl The main page layout page of Admidio, which displays the page header, the navigation menu, the page footer and embeds the actual page content. In this page you can embed your page layout.
js_css_files.tpl This page integrates all CSS or Javascript files and should only be adjusted if you want to use a different layout for Bootstrap.
message_modal.tpl Page content for an Admidio message in a modal dialog, e.g. during e-card preview or when deleting content.
message.tpl Page content for an Admidio message e.g. “Data was saved” or “Field is not filled”.
overview.tpl Page content of the Admidio homepage with an overview of the content of all modules. On this page different plugins are integrated. If certain modules or plugins should not be used, they can be removed here. You can also add more plugins.

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:

<h1>{$organizationName}</h1>

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 of the html page, which is created separately for each page and stored as id in the <body>.
{$title} Demo Organization - My Sample Page Title of the html page for the tag <title>.
{$headline} My Sample Page Headline for the page.
{$hasPreviousUrl} true Indicates whether there is a URL from which this page was called. In the default theme, a back button is then displayed.
{$organizationName} Demo-Organization Name of your organization from the settings.
{$urlAdmidio} https://www.admidio.org/demo URL of the Admidio installation.
{$urlTheme} https://www.admidio.org/demo/adm_themes/simple URL to the used theme of the Admidio installation.
{$userId} 4711 Id of the logged in user.
{$validLogin} true With valid registration in Admidio true, otherwise false.
{$debug} false Normally false unless debug mode has been turned on in config.php
{$registrationEnabled} true If registration is enabled true, otherwise false.
{$printView} false For a print preview true, otherwise false.
{$urlImprint} https://www.admidio.org/imprint.php URL to the imprint, which is stored in the settings.
{$urlDataProtection} https://www.admidio.org/data_protection.php URL for data protection, which is stored in the settings.
{$content} <html>… The actual content of the called page e.g. a dialog or a list.
{$templateFile} message.tpl Another template file to be included in the current template file.
{$menuSidebar} <html>… Html code for the navigation menu.
{$additionalHeaderData} <meta charset=“utf-8”> More html tags for the page header.
{$javascriptContent} if(javascript = 1) {} Additional Javascript code of the respective page.
{$javascriptContentExecuteAtPageLoad} if(javascript = 1) {} Additional Javascript code of the respective page to be executed when the page is called up.

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:

<b>{$l10n->get('SYS_FILE_EXTENSION_INVALID')}</b>

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.

Admidio uses the font library Font Awesome, more precisely the free Solid Theme of this library to display icons. You can integrate the icons quite easily. Search for your desired icon on the website mentioned above, remember the name and include the following code snippet:

<i class="fas fa-chevron-circle-down"></i>

In this example, the icon is called chevron-circle-down. You have to put a fa- in front of it.

You can easily change all built-in icons using CSS. You only have to address the class fas via CSS and can apply all font attributes there:

.fas {
   color: #0000ff;
   font-size: 120%;
}

Admidio normally displays an overview page with various plugins when called and after a successful login, such as the latest announcements, the latest files and documents or upcoming birthdays.
Admidio overview page
If you don't want to see some of the already stored plugins or if you want to add more, you can do this in the corresponding template file. This is located at http://www.your-webpage.com/admidio/adm_themes/simple/templates/overview.tpl. In this file you find now different HTML blocks, which have the following structure:

<div class="col-sm-6 col-lg-4 col-xl-3" id="admidio-card-plugin-birthday">
    <div class="card admidio-roles">
        <div class="card-body">
            {load_admidio_plugin plugin="birthday" file="birthday.php"}
        </div>
    </div>
</div>

Search there for your no longer wanted plugin plugin=“birthday” and then remove this block completely.

If you want to add another plugin, you can duplicate such a block and deposit the plugin. We now create a simple HTML page that should be included in the overview. For this we create a new subfolder test in the folder adm_plugins. In this subfolder we now create a file output.html with the following content:

<h3>Test</h3>
This is the content of <b>any html file</b> from a subfolder of adm_plugins.

You can now integrate the content of this file as another block in the overview with the following code:

<div class="col-sm-6 col-lg-4 col-xl-3" id="admidio-card-plugin-test">
    <div class="card admidio-roles">
        <div class="card-body">
            {load_admidio_plugin plugin="test" file="output.html"}
        </div>
    </div>
</div>

The result together with a few plugins that have been removed may then look like this:
Customized overview

  • en/2.0/admidio_customization.txt
  • Last modified: 2021/01/24 06:35
  • by fasse