Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
en:2.0:admidio_customization [2021/01/22 07:01]
fasse
en:2.0:admidio_customization [2021/01/24 06:35] (current)
fasse [How can I customize the overview page ?]
Line 4: Line 4:
  
 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? =====
Line 92: Line 92:
  
 ===== How can I customize the overview page ? ===== ===== 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. +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="col-sm-6 col-lg-4 col-xl-3" id="admidio-card-plugin-birthday"> 
-    <div class="card admidio-roles" id="role_details_panel_'.$rolId.'"> +    <div class="card admidio-roles"> 
-        <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 displayedThe 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 overviewFor 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="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-roles"> 
-                {load_admidio_plugin plugin="contactform" file="index.html"} +        <div class="card-body"> 
-            </div>+            {load_admidio_plugin plugin="test" file="output.html"}
         </div>         </div>
-    </div></code> +    </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.1611295285.txt.gz
  • Last modified: 2021/01/22 07:01
  • by fasse