Text Overflow in Sub Categories

[amanuensis]

Hi

How can I stop the names of my category from overflowing. Actually it is a sub category (see image)

[ChrisLNZ]

I suspect that there is a break tag missing in your template to force the text below the image.

[amanuensis]

Thanks for your reply - what I find strange is the some names with 10 characters aren't rendering correctly. yet some with longer than 10 characters in their name are. How would you recommend I address this or sort out the 'break tag' you mention?

Any help is of course greatly appreciated

[goosedesign]

It's not the overall length of the title that's the problem - it's only happening with the very short first names which confirms that a break is required between the image and the title. You'll need to edit either your_theme/category.tpl or the stylesheet, but it's impossible to say how exactly without seeing your code. You must have removed the H3 tags from the category titles in the template file already or they wouldn't do that.

[amanuensis]

Hi

I have not touched any of the code for the 'category.tpl

{*
* 2007-2011 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 
*  @copyright  2007-2011 PrestaShop SA
*  @version  Release: $Revision: 1.4 $
*  @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}
{strip}
           {$category->name|escape:'htmlall':'UTF-8'}

               {if $category->id == 1 OR $nb_products == 0}{l s='There are no products.'}
               {else}
                   {if $nb_products == 1}{l s='There is'}{else}{l s='There are'}{/if} 
                   {$nb_products} 
                   {if $nb_products == 1}{l s='product.'}{else}{l s='products.'}{/if}
               {/if}
{/strip}


       {if $scenes}
           <!-- Scenes -->
           {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
       {else}
           <!-- Category image -->
           {if $category->id_image}

getCatImageLink($category->link_rewrite, $category->id_image, 'category')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />

           {/if}
       {/if}

       {if $category->description}
{$category->description}
       {/if}
       {if isset($subcategories)}
       <!-- Subcategories -->

{l s='Subcategories'}

           {foreach from=$subcategories item=subcategory}

getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
                       {if $subcategory.id_image}
getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                       {else}

                       {/if}

getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}

           {/foreach}




       {/if}

       {if $products}
               {include file="$tpl_dir./product-compare.tpl"}
               {include file="$tpl_dir./product-sort.tpl"}
               {include file="$tpl_dir./product-list.tpl" products=$products}
               {include file="$tpl_dir./product-compare.tpl"}
               {include file="$tpl_dir./pagination.tpl"}
           {elseif !isset($subcategories)}

{l s='There are no products in this category.'}
           {/if}
   {elseif $category->id}

{l s='This category is currently unavailable.'}
   {/if}
{/if}

[goosedesign]

When you paste code on the forum, if you wrap it in 'code' tags, it keeps the formatting and we can all see what's going on more easily. The line break you need to add is marked below with a comment.

>
{l s='Subcategories'}
</pre>
<ul>
           {foreach from=$subcategories item=subcategory}

getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
                       {if $subcategory.id_image}
getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                       {else}

                       {/if}


//This is the bit you need to add
getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}

           {/foreach}
</ul>

[amanuensis]

Hi again, firstly thank you for the help you are giving me it is very much appreciated.

The code below is how i think you wanted it to be inserted - if it is and I have done it correctly it has had no effect on the names. Any other ideas?

{/if}

getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}

           {/foreach}


   getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}
                
            {/foreach}
            

       {/if}

       {if $products}
               {include file="$tpl_dir./product-compare.tpl"}
               {include file="$tpl_dir./product-sort.tpl"}
               {include file="$tpl_dir./product-list.tpl" products=$products}
               {include file="$tpl_dir./product-compare.tpl"}
               {include file="$tpl_dir./pagination.tpl"}
           {elseif !isset($subcategories)}

{l s='There are no products in this category.'}
           {/if}
   {elseif $category->id}

{l s='This category is currently unavailable.'}
   {/if}
{/if}

[goosedesign]

I'm not sure why you've pasted that particular section of code but the break tag needs to go in the third line down. If you look back at the code I posted, the break must sit between the closing after the image and the opening of the title. It doesn't look like you've added anything.

[amanuensis]

Hi I have pasted the code into the area I believe you mean (hopefully), but to no effect - I have noticed that below your code comment there is a just a 'getCategoryLink' but in my code I have a 'getCategoryLink'
Not sure why that is as we are both in category.tpl

Link to the pages is http://ocg-arts.co.uk/ocgarts-store/category.php?id_category=12

>{l s='Subcategories'}
</pre>
<ul>
           {foreach from=$subcategories item=subcategory}

getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
                       {if $subcategory.id_image}
getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                       {else}

                       {/if}



getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}

           {/foreach}
</ul>
<br><br><br><br>       {/if}<br><br>       {if $products}<br>               {include file="$tpl_dir./product-compare.tpl"}<br>               {include file="$tpl_dir./product-sort.tpl"}<br>               {include file="$tpl_dir./product-list.tpl" products=$products}<br>               {include file="$tpl_dir./product-compare.tpl"}<br>               {include file="$tpl_dir./pagination.tpl"}<br>           {elseif !isset($subcategories)}<br><p>{l s='There are no products in this category.'}</p>
<br>           {/if}<br>   {elseif $category->id}<br><p>{l s='This category is currently unavailable.'}</p>
<br>   {/if}<br

[goosedesign]

Can you post a link to the page?

[amanuensis]

http://ocg-arts.co.uk/ocgarts-store/category.php?id_category=12

[goosedesign]

The forum seems to mess the code up a bit even when the code tags are used. In the original category.tpl file, you need to add the
on line 72 after the closing .

[amanuensis]

Done that no change - although when I increased the amount of characters in the first name it seem to correct itself.
I tried putting spaces instead of characters but no change and then tried with a series of commas and it corrected itself again - so your earlier thinking seems correct - just not sure how to fix it.

[goosedesign]

It doesn't seem to be in the source code of your live page. That hasn't changed. Did you upload the edited file?

[amanuensis]

yes - themes> prestashop> category.tpl

Put the

tag in after the

as below

Line 72

[goosedesign]

I don't know how to help - the
has not been added to your site. Have a look at the source code.

[amanuensis]

Hi

I tried saving the file to my desktop and then copied over to the server, overwriting the category.tpl with the changed one on my desktop.

It is definitely there.

Do you think this is a bug?

Many thanks for your help and patience

[goosedesign]

And you are still using the default Prestashop template? That in itself is not a good idea - much better to duplicate it and work on the duplicate.

[amanuensis]

Duplicate the whole template?

[amanuensis]

Hi
I was wondering if you would be kind enough to tell me how I can follow your suggestion of working on a duplicated theme. Thanks

[PrestaSupport]

Hi
I was wondering if you would be kind enough to tell me how I can follow your suggestion of working on a duplicated theme. Thanks

This thing with the missing < br > is a prestashop bug i think,

About workin on a duplicated theme:
Use a ftp client and download your whole default theme,
Then change the name to something else e.g your-new-theme, and then put it in on your server again in
root/themes/your-new-theme