Change history for themes in version 4.2

This page lists all changes in the theme folder for the Simple theme within version 4.2. If you are still using version 4.1, check the page there to see if you have made all changes within 4.1. If you are still using version 3, first update to version 4. This will also replace the complete theme folder. If you already use version 4.x and want to update to a newer version 4.y, this page can help you.

The changes shown here always refer to our default theme Simple. If you have made changes here, you may have to take them into account in the customizations. If you haven't made any changes to the theme yet, or if you can restore them yourself relatively easily, you can simply replace the theme folder.

If your changes are bigger and you don't want to simply replace the theme folder, all changes are documented here and you have to add them to your theme yourself. Check which version of Admidio you have used so far and look for an entry that corresponds to this version or higher. You have to update all documented changes from this entry on.

• The following file must be replaced into the corresponding theme folder:
  • adm_themes/your-theme-folder/templates/sys-template-parts/form.multiline.tpl

• Add the following block in the file adm_themes/your-theme-folder/css/admidio.css:

  .admidio-img-presenter img {
      max-width: 100%;
      height: auto;
  }

• Search within the file adm_themes/dein-ausgewähltes-Theme/css/admidio.css the following code (around line 218):

  @media (max-width: 767px)
  {
      .btn-group {
          display: block;
      }

  Replace the block with this code:

  @media (max-width: 500px)
  {
      .btn-group {
          display: block;
      }

• Remove the following block within the file adm_themes/your-theme-folder/css/admidio.css (around line 150):

  h6, h5 {
      font-weight: bold;
  }

• Remove the following block within the file adm_themes/your-theme-folder/css/admidio.css (around line 572):

  .admidio-plugin-content ul {
      padding-left: 15px;
  }
   
  #plugin-latest-documents-files hr {
      margin: 5px 0px;
  }

• The following file must be replaced into the corresponding theme folder:
  • adm_themes/your-theme-folder/templates/sys-template-parts/form.multiline.tpl
  • adm_themes/your-theme-folder/templates/sys-template-parts/parts/form.part.iconhelp.tpl
• Remove the following block within the file adm_themes/your-theme-folder/css/admidio.css (around line 554):

  .admidio-attachment {
      margin-left: 20px;
  }

• Search within the file adm_themes/dein-ausgewähltes-Theme/css/admidio.css the following code (around line 318):

  .datetime-date-control {
      display: inline;
  }
   
  .datetime-time-control {
      width: 110px !important;
      margin-left: 20px;
  }

  Replace the block with this code:

  .datetime-date-control {
      display: inline-block;
  }
   
  .datetime-time-control {
      display: inline-block;
      width: 110px !important;
      margin-left: 20px;
  }

• The following file must be replaced into the corresponding theme folder:
  • adm_themes/your-theme-folder/templates/sys-template-parts/form.button.tpl

If you update from version 4.1 or newer you have to adjust the following files in the theme folder. (if you haven't made changes everywhere, you can also just replace complete folders and adjust e.g. only the CSS folder manually)

• Add the following folder to your theme adm_themes/dein-ausgewähltes-Theme/templates/sys-template-parts. You can take this one from the Simple theme from our package.
• Add the following block to the file adm_themes/dein-ausgewähltes-Theme/css/admidio.css :

  /***********************************/
  /* page function menu */
  /***********************************/
   
  .admidio-page-nav {
      margin-top: 25px;
  }
   
  .admidio-page-nav .nav-link {
      margin-right: 25px;
      margin-top: 15px;
  }
   
  @media (max-width: 767px) {
      .admidio-page-nav .nav-link {
          width: 150px;
          margin-right: 15px;
      }
  }
   
  .admidio-album-thumbnail {
      margin-bottom: 25px;
  }

• Search within the file adm_themes/dein-ausgewähltes-Theme/css/admidio.css the following code (around line 150):

  a.btn-primary:hover {
      color: #ffffff !important;
  }

  Replace the block with this code:

  a.btn-primary, .btn-secondary {
      color: #f7f7f7 !important;
  }
   
  a.btn-primary:hover, .btn-secondary:hover {
      color: #ffffff !important;
  }

• Search within the file adm_themes/dein-ausgewähltes-Theme/css/admidio.css the following code (around line 309):

  input[data-provide=datepicker], input[data-provide=datepicker-birthday] {
      width: 200px;
  }

  Replace the block with this code:

  input[type=date] {
      width: 200px;
  }
   
  input[type=time] {
      width: 100px;
  }

• Search within the file adm_themes/dein-ausgewähltes-Theme/css/admidio.css the following code (around line 318):

  .datetime-date-control {
      display: inline;
  }
   
  .datetime-time-control {
      width: 100px !important;
      margin-left: 20px;
  }

  Replace the block with this code:

  .datetime-date-control {
      display: inline-block;
  }
   
  .datetime-time-control {
      display: inline-block;
      width: 110px !important;
      margin-left: 20px;
  }

• Search within the file adm_themes/dein-ausgewähltes-Theme/css/admidio.css the following code (around line 50):

  .admidio-content {
      order: 1;
  }

  Replace the block with this code:

  .admidio-content-col {
      padding: 0px;
  }
   
  .admidio-content {
      order: 1;
      padding-left: 15px;
      padding-right: 15px;
  }

• Search within the file adm_themes/dein-ausgewähltes-Theme/css/admidio.css the following code (around line 120):

  .admidio-page-nav {
      margin-top: 25px;
  }
   
  .admidio-page-nav .nav-link {
      margin-right: 25px;
      margin-top: 15px;
  }
   
  @media (max-width: 767px) {
      .admidio-page-nav .nav-link {
          max-width: 150px;
      }
  }

  Replace the block with this code:

  .admidio-menu-function-node {
      margin-top: 25px;
  }
   
  .admidio-menu-function-node .nav-link {
      margin-right: 25px;
      margin-top: 15px;
  }
   
  @media (max-width: 767px) {
      .admidio-menu-function-node .nav-link {
          max-width: 150px;
      }
  }

• Search within the file adm_themes/dein-ausgewähltes-Theme/css/admidio.css and remove the following code (around line 550):

  /***********************************/
  /* Chat module */
  /***********************************/
   
  #chat-area {
      height: 350px;
      overflow: auto;
      border: 1px solid #666;
      padding: 20px;
      background: white;
      max-width: 1000px;
  }
   
  #chat-area span {
      color: #ffffff;
      background: #263340;
      padding: 4px 8px;
      border-radius: 5px;
      margin-right: 10px;
  }
   
  #chat-area time {
      font-size: 75%;
      padding: 4px 0px;
      border-radius: 5px;
      margin-right: 10px;
  }
   
  #chat-area p {
      padding: 10px 0;
      border-bottom: 1px solid #dddddd;
      margin-bottom: 0px;
  }
   
  #sendie_group {
      margin-top: 20px;
  }

• Search within the file adm_themes/dein-ausgewähltes-Theme/templates/index.tpl the following code (around line 107):

              <div class="col-12 col-md-3 col-xl-2 admidio-sidebar" id="sidebar">
     <div class="admidio-headline-mobile-menu d-md-none p-2">
        <span class="text-uppercase">{$l10n->get('SYS_MENU')}</span>
        <button class="btn btn-link d-md-none collapsed float-right" type="button" data-toggle="collapse"
           data-target="#admidio-main-menu" aria-controls="admidio-main-menu" aria-expanded="false">
           <i class="fas fa-bars fa-fw"></i>
        </button>
     </div>
     {$menuSidebar}
  </div>
   
  <div class="admidio-content-col col-12 col-md-9 col-xl-10">
  <div class="admidio-content-header">
     <h1 class="admidio-module-headline">{$headline}</h1>
   
         {if $hasPreviousUrl}
            <!-- Add link to previous page -->
            <a id="admidio-back-link" class="" href="{$urlAdmidio}/adm_program/system/back.php"><i class="fas fa-arrow-circle-left fa-fw"></i> {$l10n->get('SYS_BACK')}</a>
         {/if}
  </div>

  Replace the block with this code:

  <div class="col-12 col-md-3 col-xl-2 admidio-sidebar" id="sidebar">
     <div class="admidio-headline-mobile-menu d-md-none p-2">
        <span class="text-uppercase">{$l10n->get('SYS_MENU')}</span>
        <button class="btn btn-link d-md-none collapsed float-right" type="button" data-toggle="collapse"
           data-target="#admidio-main-menu" aria-controls="admidio-main-menu" aria-expanded="false">
           <i class="fas fa-bars fa-fw"></i>
        </button>
     </div>
     {$menuSidebar->getHtml()}
  </div>
   
  <div class="admidio-content-col col-12 col-md-9 col-xl-10">
  <nav class="admidio-breadcrumb" aria-label="breadcrumb">
     <ol class="breadcrumb">
        {foreach $navigationStack as $navElementArray}
           {if !empty($navElementArray['icon'])}
              {$breadcrumbIcon="<i class=\"admidio-icon-chain fas `$navElementArray['icon']`\"></i>"}
           {else}
              {$breadcrumbIcon=''}
           {/if}
           {if $navElementArray@iteration == $navElementArray@last}
              <li class="breadcrumb-item active">{$breadcrumbIcon}{$navElementArray['text']}</li>
           {else}
              <li class="breadcrumb-item"><a href="{$navElementArray['url']}">{$breadcrumbIcon}{$navElementArray['text']}</a></li>
           {/if}
        {/foreach}
     </ol>
  </nav>
   
  <div id="content" class="admidio-content" role="main">
     <div class="admidio-content-header">
        <h1 class="admidio-module-headline">{$headline}</h1>
          {$menuFunctions->getHtml()}
    </div>