Joomla Customization

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.

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

Hallo Welt