• bridge cz
  • Road workers in Spiti valley, India
  • Reached the Carribean shores, Belize
  • On the Shikoku Pilgrim Trail
  • Grosse Scheidegg, Switzerland
  • Rhein falls, Switzerland
  • Hampi Hampi!!!
  • Cycling in Belize
  • On the Shikoku Pilgrim Trail
  • Spiti Valley
  • Between Czech and Austria
  • Sunrise on Mnt. Fuji
  • Bolivia
  • Abra Acay, Argentinia
  • Continental Divide, Tansania

I am working with Joomla CMS for multiple Websites since 2010, mainly customizing default templates to meet customers requirements and add some intercativity. mastersong.de is an example of a self-tuned protostar template.

original protostar layout
original protostar layout
tweaked protostar layout
tweaked protostar layout

 

The interactive tiled category listing you see on this page features a mouseover effect and is achived by

  1. customizing protostar/html/com_content/categories/default_items.php
    
    defined('_JEXEC') or die;
    
    JHtml::_('bootstrap.tooltip');
    
    $class = ' class="first sv_tile"';
    $lang  = JFactory::getLanguage();
    
    if (count($this->items[$this->parent->id]) > 0 && $this->maxLevelcat != 0) :
    ?>
    	<?php foreach($this->items[$this->parent->id] as $id => $item) : ?>
    		<?php
    		if ($this->params->get('show_empty_categories_cat') || $item->numitems || count($item->getChildren())) :
    		if (!isset($this->items[$this->parent->id][$id + 1]))
    		{
    			$class = ' class="last sv_tile"';
    		}
    		?>
    		<div <?php echo $class; ?> >
    		<?php $class = ' class="sv_tile"'; ?>
    			
    			<?php if ($this->params->get('show_description_image') && $item->getParams()->get('image')) : ?>
    				<a href="/<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id));?>">
    				<img src="/<?php echo $item->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($item->getParams()->get('image_alt')); ?>" />
    				</a>
    			<?php endif; ?>
    			<h3 class="page-header item-title sv_tile_title">
    				<a href="/<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id));?>">
    				<?php echo $this->escape($item->title); ?></a>
    				<?php if ($this->params->get('show_cat_num_articles_cat') == 1) :?>
    					<span class="badge badge-info tip hasTooltip" title="<?php echo JHtml::tooltipText('COM_CONTENT_NUM_ITEMS'); ?>">
    						<?php echo $item->numitems; ?>
    					</span>
    				<?php endif; ?>
    				<?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) : ?>
    					<a id="category-btn-<?php echo $item->id;?>" href="#category-<?php echo $item->id;?>" 
    						data-toggle="collapse" data-toggle="button" class="btn btn-mini pull-right"><span class="icon-plus"></span></a>
    				<?php endif;?>
    			</h3>
    			<?php if ($this->params->get('show_subcat_desc_cat') == 1) :?>
    				<?php if ($item->description) : ?>
    					<div class="category-desc">
    						<?php 
    							$myStr = $item->description;
    							if(strpos($myStr, '<hr id=')>0) {
    								$myStr = substr($myStr,0,strpos($myStr,'<hr id='));
    							}?>
    							<a href="/<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id));?>">
    							<?php echo JHtml::_('content.prepare', $myStr, '', 'com_content.categories'); ?>
    							</a>
    					</div>
    				<?php endif; ?>
    			<?php endif; ?>
    
    			<?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) :?>
    				<div class="collapse fade" id="category-<?php echo $item->id;?>">
    				<?php
    				$this->items[$item->id] = $item->getChildren();
    				$this->parent = $item;
    				$this->maxLevelcat--;
    				echo $this->loadTemplate('items');
    				$this->parent = $item->getParent();
    				$this->maxLevelcat++;
    				?>
    				</div>
    			<?php endif; ?>
    			<p class="clearfix"></p>
    		</div>
    		<?php endif; ?>
    	<?php endforeach; ?>
    <?php endif; ?>
    
  2. adding Mouseover fuctionality in JS via Blank Module

    Using the Blank Module, it is easy to create reusable JS or even PHP snippets for multiple Jommla pages and categories. If that code was needed only once, I'd suggest the Sourcerer plugin.

    code>
    /** blend in article descriptions **/
    $('.sv_tile').mouseover(function(){
      $('.sv_tile .category-desc').each(function(){$(this).css('display','none').fadeOut("slow");});
      $(this).children('.sv_tile .category-desc').css('display','block').fadeIn("slow");
    });
    
  3. creating some responsive CSS
    to overlay categories short description over image...

Latest Articles