Joomla! Template Override:

Timeline


Hier haben wir ein alternatives Layout für das Modul "Beiträge - Neueste" (mod_articles_latest), um die Beiträge in Form einer Zeitlinie (Timeline) anzuzeigen.

Die Datei timeline.php wird unter /mod_articles_latest/ gespeichert. Die CSS Definitionen können im CSS vom Template ergänzt werden.

Das Modul wird wie üblich angelegt, als alternatives Layout (Reiter Erweitert) wird "timeline" gewählt. Das Modul wird nicht direkt auf einer Position angezeigt, sondern in einem Beitrag mit geladen.

Da alle Elemente im Override eigene Klassen haben, kann man das CSS anpassen wie man möchte. Wenn man die Klassen "icon-..." (IcoMoon, z.B. im Template Protostar) durch "fa fa-..." ersetzt, wird das Override auch mit FontAwesome funktionieren.

Benötigte Override-Dateien


  • <?php
    /**
     * @package Joomla.Site
     * @subpackage mod_articles_latest
     *
     * @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
     * @license GNU General Public License version 2 or later; see LICENSE.txt
     */
    defined('_JEXEC') or die;
    ?>
    <ul class="latestnews<?php echo $moduleclass_sfx; ?> jover-timeline">
     <?php 
     $counter = 0;
     foreach ($list as $item) :
     $counter++;
     ?>
     <li class="jover-timeline-<?php echo ($counter % 2 == 1) ? "odd" : "even"; ?>" itemscope itemtype="http://schema.org/Article">
     <div class="jover-badge"><span class="icon-radio-checked"></span></div>
     <div class="jover-timeline-panel">
     <p class="jover-date"><span class="icon-clock"></span> <?php echo JHtml::_('date', $item->created, "d.m.Y"); ?></p>
     <a href="<?php echo $item->link; ?>" itemprop="url">
     <h3 itemprop="name">
     <?php echo $item->title; ?>
     </h3>
     </a>
    <?php if (!empty(json_decode($item->images)->image_intro)) : ?>
     <a href="<?php echo $item->link; ?>">
     <img class="img-responsive jover-timeline-image" src="<?php echo json_decode($item->images)->image_intro; ?>" />
     </a>
     <?php endif; ?>
     </div>
     </li>
     <?php endforeach; ?>
    </ul>
  • /*Timeline */
    ul.jover-timeline {
     list-style: none;
     position: relative;
     padding: 20px 0 20px;
    }
    ul.jover-timeline:before {
     top: 0;
     bottom: 0;
     position: absolute;
     content: " ";
     width: 3px;
     background-color: #444;
     left: 50%;
     margin-left: -1.5px;
    }
    ul.jover-timeline > li:after, ul.jover-timeline > li:before {
     content: " ";
     display: table;
    }
    ul.jover-timeline > li:after {
     clear: both;
    }
    ul.jover-timeline > li {
     margin-bottom: 20px;
     position: relative;
    }
    ul.jover-timeline > li > .jover-timeline-panel {
     width: 40%;
     float: left;
     border: 1px solid #d4d4d4;
     background: #FFF;
     border-radius: 2px;
     padding: 20px;
     position: relative;
     -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    }
    ul.jover-timeline > li.jover-timeline-even > .jover-timeline-panel {
     float: right;
    }
    ul.jover-timeline > li.jover-timeline-odd > .jover-timeline-panel {
     text-align: right;
    }
    ul.jover-timeline > li > .jover-timeline-panel:after {
     position: absolute;
     top: 27px;
     right: -12px;
     display: inline-block;
     border-top: 12px solid transparent;
     border-left: 12px solid #ccc;
     border-right: 0 solid #ccc;
     border-bottom: 12px solid transparent;
     content: " ";
    }
    ul.jover-timeline > li.jover-timeline-even > .jover-timeline-panel:after{
     border-left-width: 0;
     border-right-width: 12px;
     left: -12px;
     right: auto;
    }
    ul.jover-timeline > li > .jover-badge {
     color: #000;
     width: 30px;
     height: 30px;
     line-height: 30px;
     font-size: 1.4em;
     text-align: center;
     position: absolute;
     top: 28px;
     left: 50%;
     margin-left: -14px;
     background-color: #fff;
     z-index: 100;
     border-top-right-radius: 50%;
     border-top-left-radius: 50%;
     border-bottom-right-radius: 50%;
     border-bottom-left-radius: 50%;
    }
    @media (max-width: 767px) {
     ul.jover-timeline:before {
     left: 40px;
     }
     ul.jover-timeline > li > .jover-timeline-panel {
     float: right;
     width: calc(100% - 120px);
     width: -moz-calc(100% - 120px);
     width: -webkit-calc(100% - 120px);
     }
     ul.jover-timeline > li > .jover-timeline-panel:before {
     border-left-width: 0;
     border-right-width: 15px;
     left: -15px;
     right: auto;
     }
     ul.jover-timeline > li.jover-timeline-odd > .jover-timeline-panel {
     text-align: left;
     }
     ul.jover-timeline > li > .jover-badge {
     left: 25px;
     margin-left: 0;
     top: 26px;
     }
     ul.jover-timeline > li > .jover-timeline-panel:after {
     border-left-width: 0;
     border-right-width: 14px;
     left: -14px;
     right: auto;
     }
    }





Fehler melden

Bitte beachte unsere Datenschutzerklärung

Alle mit * markierten Felder werden benötigt um eine E-Mail zu senden.