Web Design

Details

Category: Web Design

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.

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...