Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
en:2.0:admidio_customization [2020/10/20 20:20] – [Variablen in Template-Dateien] fasse | en:2.0:admidio_customization [2024/01/12 21:31] (current) – [Use texts from language files] fasse | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Layout adjustments ====== | ====== Layout adjustments ====== | ||
- | ===== General | + | ===== 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: | + | {{:en:2.0: |
- | ===== Adjustments via 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** | + | Many layout adjustments can already be implemented via CSS. To do this, you can use the following |
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. | ||
Line 25: | Line 25: | ||
/* my code end */</ | /* my code end */</ | ||
- | The Admidio Layout is based on [[https:// | + | The Admidio Layout is based on [[https:// |
<code html> | <code html> | ||
<link rel=" | <link rel=" | ||
Line 32: | Line 32: | ||
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. | 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. | ||
- | ===== Customization | + | ===== How do I edit the layout |
Admidio uses the [[https:// | Admidio uses the [[https:// | ||
- | You will find the template files in the folder | + | You will find the template files in the folder |
^ Template file ^ Description | ^ Template file ^ Description | ||
| cookie_note.tpl | | cookie_note.tpl | ||
Line 54: | Line 54: | ||
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 | ^ Variable | ||
- | | {$id} | admidio-announcements | + | | {$additionalHeaderData} | <meta charset=" |
- | | {$title} | Demo Organization - My Sample Page | + | | {$content} | <html>... | The actual content of the called page e.g. a dialog or a list. | |
+ | | {$currentUser} | Smith | ||
+ | | {$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. | | ||
| {$headline} | My Sample Page | Headline for the page. | | | {$headline} | My Sample Page | Headline for the page. | | ||
- | | {$urlPreviousPage} | https://www.admidio.org/demo/adm_program/ | + | | {$id} | admidio-announcements |
+ | | {$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. ' | ||
+ | | {$l10n} | All language texts | Object to access all language texts from Admidio. | ||
+ | | {$menuSidebar} | < | ||
| {$organizationName} | Demo-Organization | | {$organizationName} | Demo-Organization | ||
+ | | {$printView} | false | For a print preview //true//, otherwise //false//. | | ||
+ | | {$registrationEnabled} | true | If registration is enabled //true//, otherwise //false//. | | ||
+ | | {$templateFile} | message.tpl | ||
+ | | {$title} | Demo Organization - My Sample Page | Title of the html page for the tag < | ||
| {$urlAdmidio} | https:// | | {$urlAdmidio} | https:// | ||
+ | | {$urlDataProtection} | https:// | ||
+ | | {$urlImprint} | https:// | ||
| {$urlTheme} | https:// | | {$urlTheme} | https:// | ||
- | | {$userId} | 4711 | Id of the logged in user. | | + | | {$userId} | 4711 | Id of the logged in user. **(deprecated, |
+ | | {$userUuid} | 97f8346c-ca53-40de-857a-459d26d9df40 | ||
| {$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 | + | ==== 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 '' |
- | | {$urlImprint} | https:// | + | |
- | | {$urlDataProtection} | https:// | + | |
- | | {$content} | < | + | |
- | | {$templateFile} | message.tpl | + | |
- | | {$menuSidebar} | < | + | |
- | | {$additionalHeaderData} | <meta charset=" | + | |
- | | {$javascriptContent} | if(javascript = 1) {} | Additional Javascript | + | |
- | | {$javascriptContentExecuteAtPageLoad} | if(javascript = 1) {} | Additional Javascript | + | |
==== 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/ | + | With Smarty you also have access to the texts from the language files (adm_program/ |
<code html>< | <code html>< | ||
The curly brackets with the l10n-> | The curly brackets with the l10n-> | ||
Line 82: | Line 89: | ||
The example above looks like this: | The example above looks like this: | ||
**Files of this file type are not allowed on the server.** | **Files of this file type are not allowed on the server.** | ||
+ | |||
+ | ===== How do I change icons ? ===== | ||
+ | Admidio uses the font library [[https:// | ||
+ | |||
+ | 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: <code css>.fas { | ||
+ | | ||
+ | | ||
+ | }</ | ||
+ | |||
+ | ===== How can I customize the overview page ? ===== | ||
+ | Admidio normally displays an overview page with various plugins when called and after a successful login, such as the latest announcements, | ||
+ | {{: | ||
+ | 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 '' | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | {load_admidio_plugin plugin=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | 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 '' | ||
+ | This is the content of < | ||
+ | <code html>< | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | {load_admidio_plugin plugin=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | {{: |