Joomla! Template Override:

News mit Ribbon


Neuen Override von "mod_articles_latest" anlegen und diese in z. B. aktuelles.php umbenennen.

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;
    ?>
    <aside class="aktuelles">
    <div class="ribbon-wrapper-orange"><div class="ribbon-orange"><?php echo JText::_('MOD_OVERRIDE_AKTUELLES') ?></div></div> 
    <?php foreach ($list as $item) : ?>
    <h2><a href='<?php echo $item->link; ?>' itemprop="url"><?php echo $item->title; ?></a></h2> 
     <?php echo $item->introtext; ?>
     
    <?php endforeach; ?>
    </aside>
  • aside.aktuelles {
    margin-top: 2rem;
    background: #fff4f4;
     border-radius: 10px;
     -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
     -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
     box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
     position: relative;
     z-index: 90;
     padding: 2rem;
    }
    
    .ribbon-wrapper-orange {
     width: 85px;
     height: 88px;
     overflow: hidden;
     position: absolute;
     top: -3px;
     right: -3px;
    }
    
    .ribbon-orange {
     font: bold 15px Sans-Serif;
     color: #FFF;
     text-align: center;
     text-shadow: rgba(0,0,0,0.5) 0px 1px 0px;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     position: relative;
     padding: 7px 0;
     left: -5px;
     top: 15px;
     width: 120px;
     background-color: #e85311;
     background-image: -webkit-gradient(linear, left top, left bottom, from(#e85311), to(#d26d01)); 
     background-image: -webkit-linear-gradient(top, #e85311, #d26d01); 
     background-image: -moz-linear-gradient(top, #e85311, #d26d01); 
     background-image: -ms-linear-gradient(top, #e85311, #d26d01); 
     background-image: -o-linear-gradient(top, #e85311, #d26d01); 
     color: #FFF;
     -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
     -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
     box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    }
    
    .ribbon-orange:before, .ribbon-orange:after {
     content: "";
     border-top: 3px solid #c26400; 
     border-left: 3px solid transparent;
     border-right: 3px solid transparent;
     position:absolute;
     bottom: -3px;
    }
    
    .ribbon-orange:before {
     left: 0;
    }
    .ribbon-orange:after {
     right: 0;
    }





Fehler melden

Bitte beachte unsere Datenschutzerklärung

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