Russ

Pixel Exit Staff
#1
I've promised a tutorial for awhile now, and honestly haven't had the time between paid client work and my vacation.

Here's the html/css we used to achieve the effect. There's bugs on mobile view and this could be laid out better I'm sure.

el_portal_index
Code:
<xen:include template="el_portal_headinclude"/>

<xen:if is="{$current_category}">
  <xen:navigation>
  <xen:breadcrumb href="{xen:link portal/categories, $current_category}">
  {$current_category.title}
  </xen:breadcrumb>
  </xen:navigation>
</xen:if>
<xen:if is="@portalSidebarShowAlways OR {$categories} OR {$showDefaultSidebar}">
  <xen:sidebar>
  <xen:if is="!@portalSidebarShowSidebarvisitorpanel">
  <xen:container var="$noVisitorPanel">1</xen:container>
  </xen:if>
  <xen:if is="{$categories}">
  <div class="section">
  <div class="secondaryContent portalCategoryListSidebar">
  <h3>{xen:phrase el_portal_categories}</h3>
  <xen:comment>
  <a href="{xen:link portal}" class="{xen:if "{$current_category.category_id} == 0", '',
  ''}">Show all</a>
  </xen:comment>
  <div class="pairsJustified">
  <xen:foreach loop="$categories" value="$category">

  <dl class="discussionCount">
  <dt>
  <a href="{xen:link portal/categories, $category}"
  class="{xen:if "{$current_category.category_id} == {$category.category_id}",
  'selected', ''}">{$category.title}</a></dt>
  <dd>{$category.item_count}</dd>
  </dl>
  </xen:foreach>
  </div>
  </div>
  </div>
  </xen:if>
   
  <xen:if is="{$showDefaultSidebar}">
     <xen:hook name="forum_list_sidebar">
     <xen:include template="sidebar_online_users" />
     
     <!-- block: forum_stats -->
     <div class="section">
       <div class="secondaryContent statsList" id="boardStats">
         <h3>{xen:phrase forum_statistics}</h3>
         <div class="pairsJustified">
           <dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
             <dd>{xen:number $boardTotals.discussions}</dd></dl>
           <dl class="messageCount"><dt>{xen:phrase messages}:</dt>
             <dd>{xen:number $boardTotals.messages}</dd></dl>
           <dl class="memberCount"><dt>{xen:phrase members_count}:</dt>
             <dd>{xen:number $boardTotals.users}</dd></dl>
           <dl><dt>{xen:phrase latest_member}:</dt>
             <dd><xen:username user="$boardTotals.latestUser" /></dd></dl>
           <!-- slot: forum_stats_extra -->
         </div>
       </div>
     </div>
     <!-- end block: forum_stats -->
     
     
     
   </xen:hook>
   </xen:if>
   
  </xen:sidebar>
</xen:if>

<xen:hook name="extraportal_top_above_nav" />

<xen:hook name="extraportal_top" />


<div class="sectionMain">

  <ol class="messageList <xen:if is='{$itemCount} == 1'> singleItem <xen:else /> moreItems</xen:if>" id="portalList"
  data-maxheight="{xen:calc '@portal_maxImgWidth +100'}">
  <xen:hook name="extraportal_list">
  <xen:if is="{$items}">
  <xen:foreach loop="$items" value="$item">
  <xen:hook name="extraportal_item" params="{xen:array 'item={$item}'}">
  {xen:raw $item.renderedTemplate}
  </xen:hook>
  </xen:foreach>
  <xen:else/>
  <li>{xen:phrase el_portal_no_portal_items}</li>
  </xen:if>
  </xen:hook>
  </ol>
</div>

<div class="pageNavLinkGroup">
  <div class="linkGroup"></div>
  <xen:pagenav link="portal" page="{$page}" perpage="{$postsPerPage}" total="{$totalItems}" linkparams="{$linkparams}"/>
</div>
<xen:hook name="extraportal_end" />
<xen:if is="{$show_portal_branding}">
  <div class="muted" style="text-align: center; font-size: 11px; margin: 10px;">
  <a href="http://extralicense.com/">Extra Portal &copy; 2013-2014 ExtraLicense.com</a>
  </div>
</xen:if>


<xen:edithint template="el_portal_item_bit" />
el_portal_item_bit
Code:
<li id="portalitem-{$item.portalItem_id}" class="elportalItem itembit {$item.content_type} {xen:if "{$item.mediaCount} > 0", 'media',''}" data-contentType="{$item.content_type}" data-contentId="{$item.content_id}" data-author="{$item.data.username}">
     <a href="{xen:raw $item.data.url}">
       <xen:if is="{$item.attachment_id}"><img src="{xen:link 'attachments', {xen:array 'attachment_id={$item.attachment_id}'}}" alt="{$item.filename}" class="itemimg" /></xen:if>
       <div class="itemTitle"><h3><xen:if is="@el_portal_threadprefix">{xen:helper threadPrefix, $item.data.}</xen:if>{$item.data.title}</h3></div>
     </a>
</li>
css:

Code:
html .itembit
{
   margin-bottom: 0px;
   width: 49%;
   float: left;
   max-height: 185px;
   margin: 0 5px 15px 0;
   opacity: 1;
   transition: all .2s ease;
   background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
}

html .itemimg { margin-right: 0px; }

.el_portal_index .messageList .message
{
   margin-bottom: 0px;
}

html .itembit .messageText
{
   padding-top: 0px;
   padding-bottom: 5px;
}

#portalList .subHeading h3
{
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

.el_portal_index .subHeading.categoryStrip
{
   text-overflow:ellipsis;
}
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.