| Both sides previous revision Previous revision Next revision | Previous revision |
| en:2.0:admidio_customization [2021/01/22 07:05] – [How can I customize the overview page ?] fasse | en:2.0:admidio_customization [2024/01/12 21:31] (current) – [Use texts from language files] fasse |
|---|
| ====== Layout adjustments ====== | ====== Layout adjustments ====== |
| ===== How do I create my own theme? ===== | ===== How do I create my own theme? ===== |
| 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. | 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//.\\ | 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//.\\ |
| {{:en:themes:theme_change.png?400|Select Theme}}} | {{:en:2.0:documentation:layout:theme_change.png?400|Select Theme}} |
| |
| ===== 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]]. | |
| 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: | 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 ^ | ^ 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>. | | | {$additionalHeaderData} | <meta charset="utf-8"> | More html tags for the page header. | |
| | {$title} | Demo Organization - My Sample Page | Title of the html page for the tag <title>. | | | {$content} | <html>... | The actual content of the called page e.g. a dialog or a list. | |
| | {$headline} | My Sample Page | Headline for the page. | | | {$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 | |
| | {$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. | |
| | | {$headline} | My Sample Page | Headline for the page. | |
| | | {$id} | admidio-announcements | Id of the html page, which is created separately for each page and stored as id in the <body>. | |
| | | {$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. | |
| | | {$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. | |
| | {$organizationName} | Demo-Organization | Name of your organization from the settings. | | | {$organizationName} | Demo-Organization | Name of your organization from the settings. | |
| | | {$printView} | false | For a print preview //true//, otherwise //false//. | |
| | | {$registrationEnabled} | true | If registration is enabled //true//, otherwise //false//. | |
| | | {$templateFile} | message.tpl | Another template file to be included in the current template file. | |
| | | {$title} | Demo Organization - My Sample Page | Title of the html page for the tag <title>. | |
| | {$urlAdmidio} | https://www.admidio.org/demo | URL of the Admidio installation. | | | {$urlAdmidio} | https://www.admidio.org/demo | URL of the Admidio installation. | |
| | | {$urlDataProtection} | https://www.admidio.org/data_protection.php | URL for data protection, 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. | | | {$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. **(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//. | |
| | {$debug} | false | Normally //false// unless debug mode has been turned on in config.php | | |
| | {$registrationEnabled} | true | If registration is enabled //true//, otherwise //false//. | | ==== Use data of the logged-in user ==== |
| | {$printView} | false | For a print preview //true//, otherwise //false//. | | 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> |
| | {$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. | | |
| |
| ==== 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"> | 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" 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> Search there for your no longer wanted plugin ''plugin="birthday"'' and then remove this block completely.\\ | </div></code> 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. Important is the entry at **plugin** and **file**. This is the folder name and the HTML or PHP file which should be displayed. The plugin must be in the folder adm_plugins. For example, if you want to display the file under ''adm_plugins/contactform/index.html'', the code block would look like this: | 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> |
| <code html><div class="col-sm-6 col-lg-4 col-xl-3"> | 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: |
| <div class="card admidio-roles" id="role_details_panel_'.$rolId.'"> | <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="contactform" file="index.html"} | <div class="card-body"> |
| | {load_admidio_plugin plugin="test" file="output.html"} |
| </div> | </div> |
| </div> | </div> |
| </div></code> | </div></code> The result together with a few plugins that have been removed may then look like this:\\ |
| | {{:en:2.0:documentation:layout:overview_customized.png?400|Customized overview}} |
