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

[jmthd]

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.

Edited October 2, 2012 by JoshMeyer (see edit history)

[jmthd]

nudge*

 

Any CSS ninjas out there?

[CartExpert.net]

Hi.

 

You can add a DIV before the pagination's html and set the style to:

clear:both; display:block; width:100%

 

Regards.

 

Robin.

 

The CartExpert Team

[jmthd]

Worked perfect. Thanks much!

[CartExpert.net]

Happy to have helped.

 

Regards.

 

Robin.

 

The CartExpert Team

[innocuous]

JoshMeyer, please see screenshot. I am getting alignment problem. Can you help?

 

 

Thanks

[kotkotan]

Hi.

 

You can add a DIV before the pagination's html and set the style to:

clear:both; display:block; width:100%

 

Regards.

 

Robin.

 

The CartExpert Team

have the same problem. where i should insert this code?

thanks

[vekia]

have the same problem. where i should insert this code?

thanks

 

you should add this block to the whole pagination file.

[kotkotan]

you should add this block to the whole pagination file.

to the category.css?

[vekia]

to be honest, everything depends on theme that you use.

category.css is a place where you've got styles, not html elements like <div>

[kotkotan]

to be honest, everything depends on theme that you use.

category.css is a place where you've got styles, not html elements like <div>

i've default theme

 

my problem on the picture

Edited July 23, 2013 by kotkotan (see edit history)

[kotkotan]

anybody can help me?

[vekia]

hello

 

in this case you have to use height param for the subcategories block, you can define it inline (in the category.tpl file) or with css styles (preffered)

[kotkotan]

hello

 

in this case you have to use height param for the subcategories block, you can define it inline (in the category.tpl file) or with css styles (preffered)

 

can't find optimal height.

[vekia]

it is possible to test your website? if so, please share the url

[kotkotan]

it is possible to test your website? if so, please share the url

have share a link to my site. can you help me in this?

thanks

[vekia]

yes i can help you, just share url to your website and i will give you solution for this issue

[vekia]

open the file: /themes/MyTheme/css/category.css

and change #subcategories to:

#subcategories {
displaY: block;
clear: both;
overflow: hidden;
}

 

effect:

[kotkotan]

many many thanks. it works!

and how insert text behind picture on center?

many thanks

[vekia]

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?

[kotkotan]

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}

[vekia]

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>

[kotkotan]

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