Jump to content

[SOLVED] Pagination links displaying in-line with subcategory grid

jmthd

By jmthd
in Core developers

 Share

Recommended Posts

jmthd Newbie

jmthd

Posted
Posted (edited)

After using the CSS provided here (and modified a tad) to display subcategories in a grid, I am left with the pagination links displaying inline with the last subcategory (when there are less than three subcategories in the last row). I want the pagination links to drop down below the subcategory grid.

 

Screenshot below shows current display.

 

Here's the CSS I edited in category.css:

 

.inline_list {
list-style-type:none;
margin-top:10px;
}
.inline_list  li {
padding:10px 0;
float: left;
width:33%;
}
.inline_list  li img {
float:left;
margin:0 5px;
border:1px solid #ccc;
}
.inline_list  li .cat_name {
font-weight:bold;
font-weight:13px;
float:left;
}

 

Thanks for any help.

post-393734-0-76707100-1348638929_thumb.png

Edited by JoshMeyer (see edit history)
Link to comment
Share on other sites
  • 3 weeks later...
  • 9 months later...
kotkotan Newbie

kotkotan

Posted
Posted

in this case you have to modify the category.tpl file

i don't know how it looks in your store because you use nondefault template, it is poosible to share the contents of the file?

yes

my category.tpl is:

 

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{include file="$tpl_dir./breadcrumb.tpl"}
{include file="$tpl_dir./errors.tpl"}
{if isset($category)}
{if $category->id AND $category->active}
 <h1>
  {strip}
   {$category->name|escape:'htmlall':'UTF-8'}
   {if isset($categoryNameComplement)}
 {$categoryNameComplement|escape:'htmlall':'UTF-8'}
   {/if}
  {/strip}
 </h1>

 <div class="resumecat category-product-count">
  {include file="$tpl_dir./category-count.tpl"}
 </div>

 {if $scenes || $category->description || $category->id_image}
 <div class="content_scene_cat">
  {if $scenes}
   <!-- Scenes -->
   {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
  {else}
   <!-- Category image -->
   {if $category->id_image}
   <div class="align_center">
 <img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />
   </div>
   {/if}
  {/if}
  {if $category->description}
   <div class="cat_desc">
   {if strlen($category->description) > 120}
 <p id="category_description_short">{$category->description|truncate:120}</p>
 <p id="category_description_full" style="display:none">{$category->description}</p>
 <a href="#" onclick="$('#category_description_short').hide(); $('#category_description_full').show(); $(this).hide(); return false;" class="lnk_more">{l s='More'}</a>
   {else}
 <p>{$category->description}</p>
   {/if}
   </div>
  {/if}
 </div>
 {/if}
 {if isset($subcategories)}
 <!-- Subcategories -->
 <div id="subcategories">
  <h3>{l s='Subcategories'}</h3>
  <ul class="inline_list">
  {foreach from=$subcategories item=subcategory}
   <li class="clearfix">
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
  {if $subcategory.id_image}
   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {else}
   <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {/if}
 </a>
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
 {if $subcategory.description}
  <p class="cat_desc">{$subcategory.description}</p>
 {/if}
   </li>
  {/foreach}
  </ul>
  <br class="clear"/>
 </div>
 {/if}
 {if $products}
  <div class="content_sortPagiBar">
   {include file="$tpl_dir./pagination.tpl"}
   <div class="sortPagiBar clearfix">
 {include file="./product-sort.tpl"}
 {include file="./product-compare.tpl"}
 {include file="./nbr-product-page.tpl"}
   </div>
  </div>

  {include file="./product-list.tpl" products=$products}

  <div class="content_sortPagiBar">
   <div class="sortPagiBar clearfix">
 {include file="./product-sort.tpl"}
 {include file="./product-compare.tpl"}
 {include file="./nbr-product-page.tpl"}
   </div>
   {include file="./pagination.tpl"}
  </div>
 {/if}
{elseif $category->id}
 <p class="warning">{l s='This category is currently unavailable.'}</p>
{/if}
{/if}

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

try to change:

{if $subcategory.id_image}
	   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
	  {else}
	   <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
	  {/if}

 

to:

<div style="display:block; clear:both; overflow:hidden;">
{if $subcategory.id_image}
	   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
	  {else}
	   <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{/if}
</div>

  • Like 1
Link to comment
Share on other sites
kotkotan Newbie

kotkotan

Posted
Posted

try to change:

{if $subcategory.id_image}
	   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
	  {else}
	   <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
	  {/if}

 

to:

<div style="display:block; clear:both; overflow:hidden;">
{if $subcategory.id_image}
	   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
	  {else}
	   <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{/if}
</div>

 

amazing! almost on center....

post-541242-0-06139500-1375109501_thumb.jpg

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...