Web Design

Back in 1996 I started learning HTML and CSS. The internet bandwidth was still so slow that one thought twice what size of pictures to upload, and interactivity was mainly achived with simple forms. Times have changed, and the once mainly static world wide web turned into a giant market place and communication platform.

Server-side technologies like PHP, ASP or Java plus browser-embedded JavaScript (JS) and CSS enabled platforms like Facebook or Amazon to deliver content dynamically, database-driven, on demand. The advent of AJAX greatly improved the browsing experience by avoiding page reloads and enabling true interactivity like search suggestions.

And here we are - JS-based server-side frameworks (like Meteor) with extensive code generators for client and server-side make full-stack development extremely productive, and perhaps sooner or later replace the classic server-side and client-side code mess.

However, for the time being this page is mainly a technical playground for me, still based on PHP and JS.

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

logo

Sometimes, all you want is a small blog-like display of a series of news for your xt:Commerce4 webshop. With this small plugin, you can do so. Free of charge. 

After installing the plugin, create a content block called news or blog, and add/assign a few content items to this content block. In the Plugin configuration, enter the appropriate BlockId. Additionally, you can choose a headline for your blogpage in the plugin configuration. So far, this works only for one content block.

Your blog is displayed under the following URL: index.php?page=sv_blog

Alternatively, a blog layout of all content elements of block with id 11 is displayed with the following URL: index.php?page=sv_blog&blockId=11

Enable "short versions" of blog contents if you want to trim lengthy content elements. A Read more link is displayed in that case. Attention: this option may cause trouble if you are using html inside content elements.

Note that after the plugin installation, content items will have a date field in the editor. This is set to current date for new items. The date is displayed in the blog layout if in reasonable range.

The plugin ws tested thorougly, yet comes without warranty. For feedback, please use the contact form.

Download plugin here.

As years go by, technologies progress and design preferences change. In April 2013 I migrated the "www.cyclocross-store.de" from an ancient version of xt:Commerce to the recent xt:Commerce 4.0. The main concern was compatibility of shop and customer data. A configuration tool for custom bicycles was implemented as well as an advisor tool for narrowing the search of wheelsets depending on usage, body weight and other features. Only minor changes where applied to the default template.

By April 2014, the shop template was reworked featuring a modern frontpage layout. Work is in progress to create a blog plugin and backend newsletter administration tool. This is an excellent opportunity to dig into CSS, PHP and JavaScript.

gunsha2014