Integrate Admidio in own Layouts

With Release 2.0 Admidio supports themes. Themes are stored in the folder adm_themes. Innately Admidio has already two fundamentally different themes. This is firstly the Classic Theme of Admidio 1.0, as well as the Modern Theme that comes with Admidio 2.0 that has become to the new default theme. Themes are designed to help you customize your homepage layout integrating Admidio. In a theme folder all graphics, icons and CSS files are stored, which you can customize all for your website. The main HTML file, which defines the page layout, are located here and can be customized. Themes can be freely exchanged between same Admidio versions and thus change the appearance of your page in a matter of seconds.

Before you start adapting Admidio to your page, you should choose one of the two default themes, which rather corresponds to the layout of your page, so you have to do less adaptations later. From this theme then you create a copy in the Theme folder adm_themes and rename it. You should never directly change the default theme , so that you also can update in subsequent updates these folders, and you can always serve as a template, these themes. The main files for individual adjustments are the CSS files in the theme folder css and the files my_header.php,my_body_bottom.php and my_body_top.php in the theme folder. Using these 3 files you can add all Admidio pages to your own content (page header, menu, sidebars, etc.). Schematically, this division is shown on the following picture is and can be traced in Admidio theme modern:

Aufteilung der Layoutbereiche

  • The yellow area in the middle is the main content of each Admidio script and is fixed.
  • The upper red area represents the general information of the page, which you can customize to your site in the file my_header.php Here you can define further meta tags, embed additional Javascript, or your own stylesheet files.
  • The blue area represents in our example the page header and can also fill the left edge with a menu or sidebar. This is posssible using ''div“ tags side by side, or working with a table. This part of the file my_body_top.php.
  • The green area will be integrated by the corresponding Admidio script and thus represents the footer, and the right side area. Sets this area is on file my_body_bottom.php. This part of the file my_body_bottom.php.

Layout adjustments within the yellow admin area can be done with different CSS-files from the folder css in the theme. The most important file is the admidio.css which contains all CSS classes that are used in Admidio.To set the text color, -size, -orientation, Background color, -images, border width, -style, -color, and much more, create a custom.css where you can override the properties of the admidio.css

For a version update of Admidio naturally raises the question, how do you get your customized theme up to date. Because here adjustments were made, you can not directly transfer the entire folder. Unfortunately, this purpose is necessary a little more work.

  • First, you should update the Admidio default themes. If you did not own adjustments in these, you can simply transfer the folder. These themes can later serve as adjustment assistance if you get problems with the update of your theme.
  • In the next step, the question arises whether you have changed icons and graphics. If this is not the case, the folders icons and *images can be simply updated. Otherwise, only the pictures can be updated, which have not been changed by you.
  • The files my_header.php, my_body_top.php and my_body_bottom.php are not needed to be updated normally, because here are included only your changes.
  • The CSS-files in the CSS-folder are a little more difficult. Files that you did not change,you can upgrade easily. Customized files you should best once keep wihout changes and only look at the original files in the default theme if problem occurs and update the targeted areas.

To help you with the work with an theme update we have created our own Change history for Themes, which contains the most important changes.

  • en/2.0/admidio_ins_eigene_layout_integrieren.txt
  • Last modified: 2018/03/26 15:15
  • by ximex