| Both sides previous revision Previous revision Next revision | Previous revision |
| en:2.0:admidio_customization [2022/01/24 17:30] – fasse | en:2.0:admidio_customization [2024/01/12 21:31] (current) – [Use texts from language files] fasse |
|---|
| |
| ===== How do I customize the layout with CSS? ===== | ===== How do I customize the layout with CSS? ===== |
| 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.\\ | Many layout adjustments can already be implemented via CSS. To do this, you can use the following file in the theme folder ''adm_themes/simple/css/admidio.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. | 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. |
| /* my code end */</code>\\ | /* my code end */</code>\\ |
| |
| The Admidio Layout is based on [[https://getbootstrap.com/|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. | The Admidio Layout is based on [[https://getbootstrap.com/|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. |
| <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" /> |
| Admidio uses the [[https://www.smarty.net/|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. | Admidio uses the [[https://www.smarty.net/|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: | 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 ^ | ^ 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 [[https://www.osano.com/cookieconsent/download/|Script-Configurator]]. | | | 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 [[https://www.osano.com/cookieconsent/download/|Script-Configurator]]. | |
| | {$additionalHeaderData} | <meta charset="utf-8"> | More html tags for the page header. | | | {$additionalHeaderData} | <meta charset="utf-8"> | More html tags for the page header. | |
| | {$content} | <html>... | The actual content of the called page e.g. a dialog or a list. | | | {$content} | <html>... | The actual content of the called page e.g. a dialog or a list. | |
| | | {$currentUser} | Smith | Object of the logged-in user. All profile data can be queried via this object. ([[en:2.0:admidio_customization#use_data_of_the_logged-in_user|Detailed documentation]]) //(from version 4.3)//| |
| | {$debug} | false | Normally //false// unless debug mode has been turned on in config.php | | | {$debug} | false | Normally //false// unless debug mode has been turned on in config.php | |
| | {$hasPreviousUrl} | true | Indicates whether there is a URL from which this page was called. In the default theme, a back button is then displayed. | | | {$hasPreviousUrl} | true | Indicates whether there is a URL from which this page was called. In the default theme, a back button is then displayed. | |
| | {$javascriptContent} | if(javascript = 1) {} | Additional Javascript code of the respective page. | | | {$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. | | | {$javascriptContentExecuteAtPageLoad} | if(javascript = 1) {} | Additional Javascript code of the respective page to be executed when the page is called up. | |
| | {$languageIsoCode} | en | ISO code of the current selected language e.g. 'de' or 'en'. (from version 4.1.6) | | | {$languageIsoCode} | en | ISO code of the current selected language e.g. 'de' or 'en'. //(from version 4.1.6)// | |
| | | {$l10n} | All language texts | Object to access all language texts from Admidio. ([[en:2.0:admidio_customization#use_texts_from_language_files|Detailed documentation]]) | |
| | {$menuSidebar} | <html>... | Html code for the navigation menu. | | | {$menuSidebar} | <html>... | Html code for the navigation menu. | |
| | {$organizationName} | Demo-Organization | Name of your organization from the settings. | | | {$organizationName} | Demo-Organization | Name of your organization from the settings. | |
| | {$urlImprint} | https://www.admidio.org/imprint.php | URL to the imprint, which is stored in the settings. | | | {$urlImprint} | https://www.admidio.org/imprint.php | URL to the imprint, which is stored in the settings. | |
| | {$urlTheme} | https://www.admidio.org/demo/adm_themes/simple | URL to the used theme 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. (deprecated, is no longer available as of version 4.2) | | | {$userId} | 4711 | Id of the logged in user. **(deprecated, is no longer available as of version 4.2)** | |
| | {$userUuid} | 97f8346c-ca53-40de-857a-459d26d9df40 | Uuid of the logged in user. (from version 4.1) | | | {$userUuid} | 97f8346c-ca53-40de-857a-459d26d9df40 | Uuid of the logged in user. **(obsolete, from version 4.3 please use {$currentUser->getValue('usr_uuid')})** | |
| | {$validLogin} | true | With valid registration in Admidio //true//, otherwise //false//. | | | {$validLogin} | true | With valid registration in Admidio //true//, otherwise //false//. | |
| | |
| | ==== Use data of the logged-in user ==== |
| | With Smarty you have access to all profile data and the UUID of the logged-in user in the template files. The ''currentUser'' object is available for this purpose, which you can integrate anywhere. For the profile data, you need the internal name of the profile field, which you can find in the settings of the respective profile field in Admidio. If you now want to display the first and last name of the user, for example, you can do this as follows:<code html>{$currentUser->getValue('FIRST_NAME')} {$currentUser->getValue('LAST_NAME')}</code> You can output the UUID with the following code:<code html>{$currentUser->getValue('usr_uuid')}</code> You can output the login name with this code:<code html>{$currentUser->getValue('usr_login_name')}</code> |
| |
| ==== Use texts from language files ==== | ==== Use texts from language files ==== |
| 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: | With Smarty you also have access to the texts from the language files (adm_program/languages) in the template files and can integrate these at any point. The ''l10n'' object is available for this purpose. All you need is the individual abbreviation of the text, e.g. SYS_FILE_EXTENSION_INVALID, and you can then integrate this into the HTML code using the following syntax: |
| <code html><b>{$l10n->get('SYS_FILE_EXTENSION_INVALID')}</b></code> | <code html><b>{$l10n->get('SYS_FILE_EXTENSION_INVALID')}</b></code> |
| 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 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. |
| 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 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.\\ |
| {{:en:2.0:documentation:layout:overview.png?400|Admidio overview page}}\\ | {{:en:2.0:documentation:layout:overview.png?400|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: <code html><div class="col-sm-6 col-lg-4 col-xl-3" id="admidio-card-plugin-birthday"> | 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: <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"> | <div class="card admidio-card"> |
| <div class="card-body"> | <div class="card-body"> |
| {load_admidio_plugin plugin="birthday" file="birthday.php"} | {load_admidio_plugin plugin="birthday" file="birthday.php"} |
| 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: <code html><h3>Test</h3> | 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: <code html><h3>Test</h3> |
| This is the content of <b>any html file</b> from a subfolder of adm_plugins.</code> You can now integrate the content of this file as another block in the overview with the following code: | This is the content of <b>any html file</b> from a subfolder of adm_plugins.</code> You can now integrate the content of this file as another block in the overview with the following code: |
| <code html><div class="col-sm-6 col-lg-4 col-xl-3" id="admidio-card-plugin-test"> | <code html><div class="admidio-overview-plugin col-sm-6 col-lg-4 col-xl-3" id="admidio-card-plugin-test"> |
| <div class="card admidio-roles"> | <div class="card admidio-card"> |
| <div class="card-body"> | <div class="card-body"> |
| {load_admidio_plugin plugin="test" file="output.html"} | {load_admidio_plugin plugin="test" file="output.html"} |
