Joomla! Template Override:

Timeline mit Flexbox


Override von mod_articles_latest um Beiträge als Timeline anzuzeigen. Verwendet Flexbox und ist somit unabhängig vom Template Framework.

https://codepen.io/woluweb/pen/MNrZYV

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
     
     create for each language a file like /language/overrides/en-GB.override.ini containing the date format (as wished for that language). Example :
     DATE_FORMAT_CALENDAR_MONTH_YEAR="F Y"
     DATE_FORMAT_CALENDAR_DAY="d"
     The advantage of using those language strings is that
     1. you can customize the layout directly from the backend of Joomla via the language overrides
     2. you can have different formats according to the languages (example : Year Month Day, Day Month Year, Month Day Year, ...)
     
     See live example on  https://codepen.io/woluweb/pen/MNrZYV
     
     NB : it is possible to add first characters of introtext with the following code :
     <p><?php echo JHTML::_('string.truncate',(strip_tags ($item->introtext)), 140); ?></p>
     */
    
    defined('_JEXEC') or die;
    
    ?>
    
    <div class="latestnews<?php echo $moduleclass_sfx; ?>">
    
    <?php foreach ($list as $item) :  ?>
    
    	<div class="row-alternating">
    	
    		<div class="row-date">
    		  <div class="alternating-container-timeline">
    			<span class="alternating-category-timeline">
    			  <?php echo $item->category_title; ?>
    			</span>
    			<span class="alternating-day-timeline">
    			 <?php echo JHtml::_('date', $item->publish_up, JText::_('DATE_FORMAT_CALENDAR_DAY')); ?>
    			</span>
    			<span class="alternating-month-year-timeline">
    			  <?php echo JHtml::_('date', $item->publish_up, JText::_('DATE_FORMAT_CALENDAR_MONTH_YEAR')); ?>
    			</span>
    		  </div>
    		</div>
    		
    		<div class="row-content">
    		  <h4 class="row-title" itemprop="name">
    			<a href="<?php echo $item->link; ?>" itemprop="url"><?php echo $item->title; ?></a>
    		  </h4>
    		</div>
    		
    	</div>
    
    <?php endforeach; ?>
    
    </div>
  • .row-alternating {
      display:flex;
      /*background-color:#eee;*/
      /*min-height:16em;*/
    }
    
    .row-alternating:nth-child(2n){
      flex-direction:row-reverse;
      /*background-color:#d3d2be;*/
      /*color:white;*/
    }
    
    .row-content, .row-date{
      padding: 0.5em 2em;
      width: 50%;
      display: flex;
      align-items: center;
    }
    
    .row-title{
      /*text-transform:uppercase;*/
      /*font-size: 1.2em;*/
      margin:0;
    }
    
    .row-alternating:nth-child(2n) .row-content {
    	justify-content: flex-end;
    	text-align: right; /* when multiple lines */
    }
    
    .row-alternating:nth-child(2n+1) .row-date {
    	justify-content: flex-end;
    }
    
    .row-alternating:nth-child(2n) .row-date, .row-alternating:nth-child(2n + 1) .row-content{
        position:relative;
        border-left: 1px solid lightgray;
    }
    .row-alternating:nth-child(2n) .row-date:before, .row-alternating:nth-child(2n + 1) .row-content:before {
        /*display:block;*/
        background: lightgray none repeat scroll 0 0;
        border: 4px solid white;
        border-radius: 50%;
        content: "";
        height: 21px;
        width: 21px;
        left: -15px;
        position: absolute;
        top: calc(50% - 10px);
      } 
    
    .alternating-container-timeline {
      display: flex;
      flex-direction: column;
      text-align: center;
    }
    .alternating-category-timeline {
        font-size: 0.7em;
        font-weight: 500;
        text-transform: uppercase;
    }
    .alternating-day-timeline {
        font-size: 3em;
        margin: 5px 0 10px;
    }
    .alternating-month-year-timeline {
        font-size: 1.1em;
    }





Fehler melden

Bitte beachte unsere Datenschutzerklärung

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