Joomla! Template Override:

Modernes-Bloglayout


Mit diesem Override von "com_content" "category" erhaltet Ihr ein schönes und modernes Bloglayout.

Ihr braucht das Einleitungsbild und einen Einleitungstext, dieser sollte kurz gehalten werden. Die Artikel haben eine max-height von 215px.

Zusätzlich benötigt Ihr vier Sprachoverrides die Ihr anlegen müsst:

  1. DATE_FORMAT_JOVER_DAY = Wert: d
  2. DATE_FORMAT_JOVER_MONTH = Wert: M
  3. JOVER_TAGS = Wert: Schlagworte
  4. JOVER_WRITTEN_BY = Wert: Geschrieben von

Benötigte Override-Dateien


  • <?php
    /**
     * @package Joomla.Site
     * @subpackage com_content
     *
     * @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;
    JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
    JHtml::_('behavior.caption');
    ?>
    <div class="blog<?php echo $this->pageclass_sfx; ?> jover-modern-blog" itemscope itemtype="http://schema.org/Blog">
     <?php if ($this->params->get('show_page_heading')) : ?>
     <div class="page-header">
     <h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
     </div>
     <?php endif; ?>
    
    <?php if ($this->params->get('show_category_title', 1) or $this->params->get('page_subheading')) : ?>
     <h2> <?php echo $this->escape($this->params->get('page_subheading')); ?>
     <?php if ($this->params->get('show_category_title')) : ?>
     <span class="subheading-category"><?php echo $this->category->title; ?></span>
     <?php endif; ?>
     </h2>
     <?php endif; ?>
    
    <?php if ($this->params->get('show_cat_tags', 1) && !empty($this->category->tags->itemTags)) : ?>
     <?php $this->category->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
     <?php echo $this->category->tagLayout->render($this->category->tags->itemTags); ?>
     <?php endif; ?>
    
    <?php if ($this->params->get('show_description', 1) || $this->params->def('show_description_image', 1)) : ?>
     <div class="category-desc clearfix">
     <?php if ($this->params->get('show_description_image') && $this->category->getParams()->get('image')) : ?>
     <img src="/<?php echo $this->category->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($this->category->getParams()->get('image_alt')); ?>"/>
     <?php endif; ?>
     <?php if ($this->params->get('show_description') && $this->category->description) : ?>
     <?php echo JHtml::_('content.prepare', $this->category->description, '', 'com_content.category'); ?>
     <?php endif; ?>
     </div>
     <?php endif; ?>
    
    <?php if (empty($this->lead_items) && empty($this->link_items) && empty($this->intro_items)) : ?>
     <?php if ($this->params->get('show_no_articles', 1)) : ?>
     <p><?php echo JText::_('COM_CONTENT_NO_ARTICLES'); ?></p>
     <?php endif; ?>
     <?php endif; ?>
    
    <?php $leadingcount = 0; ?>
     <?php if (!empty($this->lead_items)) : ?>
     <div class="items-leading clearfix">
     <?php foreach ($this->lead_items as &$item) : ?>
     <div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>"
     itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
     <?php
     $this->item = & $item;
     echo $this->loadTemplate('item');
     ?>
     </div>
     <?php $leadingcount++; ?>
     <?php endforeach; ?>
     </div><!-- end items-leading -->
     <?php endif; ?>
    
    <?php
     $introcount = (count($this->intro_items));
     $counter = 0;
     ?>
    
    <?php if (!empty($this->intro_items)) : ?>
     <?php foreach ($this->intro_items as $key => &$item) : ?>
     <?php $rowcount = ((int) $key % (int) $this->columns) + 1; ?>
     <?php if ($rowcount == 1) : ?>
     <?php $row = $counter / $this->columns; ?>
     <div class="items-row cols-<?php echo (int) $this->columns; ?> <?php echo 'row-' . $row; ?> row-fluid clearfix">
     <?php endif; ?>
     <div class="span<?php echo round((12 / $this->columns)); ?>">
     <div class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>"
     itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
     <?php
     $this->item = & $item;
     echo $this->loadTemplate('item');
     ?>
     </div>
     <!-- end item -->
     <?php $counter++; ?>
     </div><!-- end span -->
     <?php if (($rowcount == $this->columns) or ($counter == $introcount)) : ?>
     </div><!-- end row -->
     <?php endif; ?>
     <?php endforeach; ?>
     <?php endif; ?>
    
    <?php if (!empty($this->link_items)) : ?>
     <div class="items-more">
     <?php echo $this->loadTemplate('links'); ?>
     </div>
     <?php endif; ?>
    
    <?php if (!empty($this->children[$this->category->id]) && $this->maxLevel != 0) : ?>
     <div class="cat-children">
     <?php if ($this->params->get('show_category_heading_title_text', 1) == 1) : ?>
     <h3> <?php echo JTEXT::_('JGLOBAL_SUBCATEGORIES'); ?> </h3>
     <?php endif; ?>
     <?php echo $this->loadTemplate('children'); ?> </div>
     <?php endif; ?>
     <?php if (($this->params->def('show_pagination', 1) == 1 || ($this->params->get('show_pagination') == 2)) && ($this->pagination->get('pages.total') > 1)) : ?>
     <div class="pagination">
     <?php if ($this->params->def('show_pagination_results', 1)) : ?>
     <p class="counter pull-right"> <?php echo $this->pagination->getPagesCounter(); ?> </p>
     <?php endif; ?>
     <?php echo $this->pagination->getPagesLinks(); ?> </div>
     <?php endif; ?>
    </div>
  • <?php
    /**
    * @package Joomla.Site
    * @subpackage Layout
    *
    * @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;
    // Create a shortcut for params.
    $params = $this->item->params;
    JHtml::addIncludePath(JPATH_COMPONENT . '/helpers/html');
    $canEdit = $this->item->params->get('access-edit');
    $info = $params->get('info_block_position', 0);
    ?>
    <?php if ($this->item->state == 0 || strtotime($this->item->publish_up) > strtotime(JFactory::getDate()) || ((strtotime($this->item->publish_down) < strtotime(JFactory::getDate())) && $this->item->publish_down != JFactory::getDbo()->getNullDate())) : ?>
    <div class="system-unpublished">
    <?php endif; ?>
    <div class="row">
    <article class="ellipsis">
    <div class="col-md-4">
    <?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
    </div>
    <div class="col-md-8">
    <div class="col-md-2">
    <div class="jover-blog-date">
    <p class="jover-date-day"><?php echo JHTML::_('date', $this->item->created, JText::_('DATE_FORMAT_JOVER_DAY')); ?></p>
    <p class="jover-date-month"><?php echo JHTML::_('date', $this->item->created, JText::_('DATE_FORMAT_JOVER_MONTH')); ?></p>
    </div>
    </div>
    <div class="col-md-10">
    <?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
    <div class="jover-modern-blog-details">
    <?php if ($this->params->get('show_author')) : ?>
    <?php echo JText::_('JOVER_WRITTEN_BY'); ?>: <?php echo $this->item->author; ?><br/>
    <?php endif; ?> 
    <?php if ($params->get('show_tags') && !empty($this->item->tags->itemTags)) : ?>
    <?php echo JText::_('JOVER_TAGS'); ?>:<?php echo JLayoutHelper::render('joomla.content.tags', $this->item->tags->itemTags); ?>
    <?php endif; ?>
    </div>
    </div>
    </div>
    
    <div class="jover-modern-blog-introtext">
    <?php echo $this->item->event->beforeDisplayContent; ?> <?php echo $this->item->introtext; ?>
    </div>
    <?php if ($params->get('show_readmore') && $this->item->readmore) :
    if ($params->get('access-view')) :
    $link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language));
    else :
    $menu = JFactory::getApplication()->getMenu();
    $active = $menu->getActive();
    $itemId = $active->id;
    $link1 = JRoute::_('index.php?option=com_users&view=login&Itemid=' . $itemId);
    $returnURL = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language));
    $link = new JUri($link1);
    $link->setVar('return', base64_encode($returnURL));
    endif; ?>
    
    <?php echo JLayoutHelper::render('joomla.content.readmore', array('item' => $this->item, 'params' => $params, 'link' => $link)); ?>
    </article>
    </div>
    <?php endif; ?>
    
    <?php if ($this->item->state == 0 || strtotime($this->item->publish_up) > strtotime(JFactory::getDate()) || ((strtotime($this->item->publish_down) < strtotime(JFactory::getDate())) && $this->item->publish_down != JFactory::getDbo()->getNullDate())) : ?>
    </div>
    <?php endif; ?>
    <?php echo $this->item->event->afterDisplayContent; ?>
  • @media only screen and (min-width : 320px) {
    /* ARTIKEL-STRUKTUR */
    div.jover-modern-blog article.ellipsis {
     margin-bottom: 50px;
     padding: 15px 0;
     height: auto;
     max-height: auto;
    }
    
    div.jover-modern-blog article.ellipsis:hover {
     background: #eaeaea;
    }
    
    /* FORMATIERUNG: ÜBERSCHRIFTEN */
    div.jover-modern-blog .page-header {
     border-bottom: none;
     margin: 0;
     padding-bottom: 0;
    }
    
    div.jover-modern-blog div.page-header h2 {
     color: orange;
     text-transform: uppercase;
     margin: 10px 0 0 0;
     padding: 0;
    }
    
    div.jover-modern-blog div.page-header h2 a {
     color: #5b5a5a;
    }
    
    div.jover-modern-blog div.page-header h2 a:hover, div.page-header h2 a:focus {
     color: orange;
     text-decoration: none;
    }
    
    /* FORMATIERUNG: TEXT */
    div.jover-modern-blog div.jover-modern-blog-introtext {
     line-height: 24px;
     font-family: 'Open Sans', sans-serif;
     color: #7b7b7b;
     font-style: normal;
     text-align: left;
     text-transform: none;
    }
    
    div.jover-modern-blog .jover-blog-date {
     text-align: center;
     border: 3px solid #ccc;
     padding: 10px;
     margin-left: -30px;
     margin-bottom: 10px;
    }
    
    div.jover-modern-blog p.jover-date-day {
     font-weight: 700; 
     font-size: 32px;}
    
    div.jover-modern-blog p.jover-date-month {
     font-size: 24px;
     text-transform: uppercase;
     padding-top: 5px;
     padding-bottom: 0;
     margin-bottom: 0;
     color: orange;
    }
    
    div.jover-modern-blog div.jover-modern-blog-details {
     text-transform: uppercase; 
     font-size: 9px; 
     color:#5b5a5a; 
     margin-top: 5px;
    }
    
    div.jover-modern-blog div.jover-modern-blog-details a{
     font-weight: 700;
    }
    
    div.jover-modern-blog div.jover-modern-blog-details a:hover, div.jover-modern-blog-details a:focus{
     color: orange; 
     text-decoration: none;
    }
    
    /* FORMATIERUNG: SCHLAGWORTE */
    div.jover-modern-blog-details ul.tags.inline {
     display: inline-block;
    }
    
    div.jover-modern-blog-details ul.inline > li, ol.inline > li {
     display: inline-block;
     padding-right: 0;
    }
    
    div.jover-modern-blog-details .label-info[href], .badge-info[href] {
     background-color: transparent;
    }
    
    div.jover-modern-blog-details .label, .badge {
     display: inline-block;
     padding: 2px 4px;
     font-size: inherit;
     font-weight: bold;
     line-height: 14px;
     color: #5b5a5a;
     vertical-align: baseline;
     white-space: nowrap;
     text-shadow: none;
     background-color: transparent;
    }
    
    /* FORMATIERUNG: WEITERLESEN */
    div.jover-modern-blog p.readmore a.btn {
     display: inline-block;
     padding: 4px 0;
     margin-bottom: 0;
     font-size: inherit;
     line-height: 18px;
     text-align: center;
     vertical-align: middle;
     cursor: pointer;
     color: #7b7b7b;
     text-shadow: none;
     background-color: transparent;
     background-image: none;
     -webkit-background-image: none;
     -moz-background-image: none;
     background-repeat: no-repeat;
     filter: none;
     border-color: transparent;
     filter: none;
     border: none;
     border-bottom-color: transparent;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
    }
    
    div.jover-modern-blog p.readmore a.btn:hover, div.jover-modern-blog p.readmore a.btn:focus {
     color: orange;
     text-decoration: none;
    }
    }
    
    @media only screen and (min-width : 768px) {
     div.jover-modern-blog article.ellipsis {
     margin-bottom: 50px;
     padding: 15px 0;
     height: 215px;
     max-height: 215px;
    }
    }





Fehler melden

Bitte beachte unsere Datenschutzerklärung

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