Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
en:2.0:admidio_customization [2020/10/20 20:12]
fasse created
en:2.0:admidio_customization [2021/01/24 06:35] (current)
fasse [How can I customize the overview page ?]
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:theme_change.png?400|Select Theme}}}+{{:en:2.0:documentation:layout:theme_change.png?400|Select Theme}}
  
-===== 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** 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. 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.\\ 
  
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 with the Template Engine Smarty =====+===== How do I edit the layout with the Template Engine=====
 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    | 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 wolltSchaut euch dazu den dazugehörigen [[https://www.osano.com/cookieconsent/download/|Script-Konfigurator]] an.         | +| 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 popupHave a look at the corresponding [[https://www.osano.com/cookieconsent/download/|Script-Configurator]].         | 
-| index_reduced.tpl    | Stark Layout reduzierte Seitewelche nur den Seitentiteleinen Zurück-Button und den eigentlichen Inhalt anzeigtSeitenkopfdas Navigationsmenü und der Seitenfuß werden nicht angezeigtDiese Seite wird z.Bbei der Druckvorschau genutzt. | +| index_reduced.tpl    | Strongly reduced layout pagewhich only shows the page titlea back button and the actual contentPage headerthe navigation menu and the page footer are not displayedThis page is used e.gfor the print preview. | 
-| **index.tpl**    | Die Hauptseite Layout Seite von Admidio, welche den Seitenkopfdas Navigationmenüsowie den Seitenfuß darstellt und den eigentlichen Seiteninhalt einbettet. In diese Seite könnt ihr euren Seitenaufbau einbauen.        | +| **index.tpl**    | The main page layout page of Admidio, which displays the page headerthe navigation menuthe page footer and embeds the actual page content. In this page you can embed your page layout.        | 
-| js_css_files.tpl    | Diese Seite integriert alle CSS oder Javascript-Dateien und sollte nur angepasst werden, falls ihr z.B. für [[https://getbootstrap.com/|Bootstrap]] ein anderes Layout einbinden wollt. | +| 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 [[https://getbootstrap.com/|Bootstrap]]. | 
-| message_modal.tpl   Seiteninhalt für eine Admidio-Nachricht in einem modalen Dialog z.Bbei der E-Card-Vorschau oder beim Löschen von Inhalten. | +| message_modal.tpl   Page content for an Admidio message in a modal dialog, e.gduring e-card preview or when deleting content. | 
-| message.tpl    | Seiteninhalt für eine Admidio-Nachricht z.B. "Daten wurden gespeichertoder "Feld ist nicht gefüllt". | +| message.tpl    | Page content for an Admidio message e.g. "Data was savedor "Field is not filled". | 
-| overview.tpl    | Seiteninhalt der Startseite von Admidio mit dem Überblick über den Inhalt aller ModuleAuf dieser Seite werden verschiedene Plugins eingebundenFalls bestimmte Module oder Plugins nicht genutzt werden sollenkönnen diese hier entfernt werdenEs können auch weitere Plugins hinzugefügt werden. |+| overview.tpl    | Page content of the Admidio homepage with an overview of the content of all modulesOn this page different plugins are integratedIf certain modules or plugins should not be usedthey can be removed hereYou 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 [[https://www.smarty.net/docs/en/|a documentation]] which describes the many possibilities of Smarty. Some important points for us are described in the following. 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 [[https://www.smarty.net/docs/en/|a documentation]] which describes the many possibilities of Smarty. Some important points for us are described in the following.
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      ^ Example content         ^ Description         ^ ^ Variable      ^ Example content         ^ Description         ^
-| {$id} | admidio-announcements    | Id der Html-Seitewelche für jede Seite separat erstellt wird und im <body> als id hinterlegt wird. | +| {$id} | admidio-announcements    | Id of the html pagewhich is created separately for each page and stored as id in the <body>. | 
-| {$title} | Demo-Organisation - Meine Beispielseite    Titel der Html-Seite für das Tag <title>. | +| {$title} | Demo Organization My Sample Page    Title of the html page for the tag <title>. | 
-| {$headline} | Meine Beispielseite    Überschrift für die Seite. | +| {$headline} | My Sample Page    Headline for the page. | 
-| {$urlPreviousPage} | https://www.admidio.org/demo/adm_program/overview.php    | URL der zuletzt aufgerufen Admidio-Seite. | +| {$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-Organisation   | Name eurer Organisation aus den Einstellungen. | +| {$organizationName} | Demo-Organization   | Name of your organization from the settings. | 
-| {$urlAdmidio} | https://www.admidio.org/demo    | URL der Admidio-Installation. | +| {$urlAdmidio} | https://www.admidio.org/demo    | URL of the Admidio installation. | 
-| {$urlTheme} | https://www.admidio.org/demo/adm_themes/simple    | URL zum verwendeten Theme der Admidio-Installation. | +| {$urlTheme} | https://www.admidio.org/demo/adm_themes/simple    | URL to the used theme of the Admidio installation. | 
-| {$userId} | 4711    | Id des angemeldeten Benutzers. | +| {$userId} | 4711    | Id of the logged in user. | 
-| {$validLogin} | true    | Bei gültiger Anmeldung in Admidio //true//, ansonsten //false//. | +| {$validLogin} | true    | With valid registration in Admidio //true//, otherwise //false//. | 
-| {$debug} | false    | Normalerweise //false// außer der Debug-Modus wurde in der config.php angeschaltet. +| {$debug} | false    | Normally //false// unless debug mode has been turned on in config.php | 
-| {$registrationEnabled} | true    | Bei aktivierter Registrierung //true//, ansonsten //false//. | +| {$registrationEnabled} | true    | If registration is enabled //true//, otherwise //false//. | 
-| {$printView} | false    | Bei einer Druckvorschau //true//, ansonsten //false//. | +| {$printView} | false    | For a print preview //true//, otherwise //false//. | 
-| {$urlImprint} | https://www.admidio.org/imprint.php    | URL zum Impressumwelche in den Einstellungen hinterlegt wurde. | +| {$urlImprint} | https://www.admidio.org/imprint.php    | URL to the imprintwhich is stored in the settings. | 
-| {$urlDataProtection} | https://www.admidio.org/data_protection.php    | URL zum Datenschutzwelche in den Einstellungen hinterlegt wurde. | +| {$urlDataProtection} | https://www.admidio.org/data_protection.php    | URL for data protectionwhich is stored in the settings. | 
-| {$content} | <html>...    | Der eigentliche Inhalt der aufgerufenen Seite z.Bein Dialog oder eine Liste. | +| {$content} | <html>...    | The actual content of the called page e.ga dialog or a list. | 
-| {$templateFile} | message.tpl    | Eine andere Template-Datei, welche in der aktuellen Template-Datei eingebunden werden soll. | +| {$templateFile} | message.tpl    | Another template file to be included in the current template file. | 
-| {$menuSidebar} | <html>...    | Html-Code für das Navigationsmenü. | +| {$menuSidebar} | <html>...    | Html code for the navigation menu. | 
-| {$additionalHeaderData} | <meta charset="utf-8">    | Weitere Html-Tags für den Seitenkopf. | +| {$additionalHeaderData} | <meta charset="utf-8">    | More html tags for the page header. | 
-| {$javascriptContent} | if(javascript = 1) {}    | Weiterer Javascript-Code der jeweiligen Seite. | +| {$javascriptContent} | if(javascript = 1) {}    | Additional Javascript code of the respective page. | 
-| {$javascriptContentExecuteAtPageLoad} | if(javascript = 1) {}     Weiterer Javascript-Code der jeweiligen Seite, der beim Seitenaufruf ausgeführt werden soll. |+| {$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 ====
Line 82: Line 82:
 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://fontawesome.com/|Font Awesome]], more precisely the [[https://fontawesome.com/icons?d=gallery&s=solid&m=free|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: <code html><i class="fas fa-chevron-circle-down"></i></code> 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: <code css>.fas {
 +   color: #0000ff;
 +   font-size: 120%;
 +}</code>
 +
 +===== 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, the latest files and documents or upcoming birthdays.\\ 
 +{{: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">
 +    <div class="card admidio-roles">
 +        <div class="card-body">
 +            {load_admidio_plugin plugin="birthday" file="birthday.php"}
 +        </div>
 +    </div>
 +</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 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: 
 +<code html><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></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}}
  • en/2.0/admidio_customization.1603217544.txt.gz
  • Last modified: 2020/10/20 20:12
  • by fasse