Bjarstal Posted May 1, 2014 Share Posted May 1, 2014 There is an issue when showing categories. I have made 4 pictures and pls have a look on them. On the first picture, all is just fine. The title Coffre-fort classe 0 is visible, to the left, below the image. The above is the case when the settings in Categoires looks like as below: there is no text in Description. Then back in the settings, I write a text in descriptions as shown in the below images And suddenly, there is a mess with the layout as show below. As you can see, both the Category headline and the Description is visible in white text on top of the image !!! I just have to write on e single letter in the description to trigger this behaviour. The only way so far to avoid the problem is to avoid writing anything in the Description. Does anyone have a suggestion about how to solve this problem or is it just to wait for an upgrade of Prestashop? I have tried to understand the CSS and HTML behind it, but I can't easily follow the build up. Thanks Hans Link to comment Share on other sites More sharing options...
Bjarstal Posted May 1, 2014 Author Share Posted May 1, 2014 Problem solved. Made changes in category.tpl and in category.css If anyone's interested, pls see the changes made. This is the full category.tpl {* * 2007-2014 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-2014 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./errors.tpl"} {if isset($category)} {if $category->id AND $category->active} {if $scenes || $category->description || $category->id_image} <div class="content_scene_cat"> {if $scenes} <div class="content_scene"> <!-- Scenes --> {include file="$tpl_dir./scenes.tpl" scenes=$scenes} {if $category->description} <div class="cat_desc rte"> {if Tools::strlen($category->description) > 350} <div id="category_description_short">{$description_short}</div> <div id="category_description_full" class="unvisible">{$category->description}</div> <a href="{$link->getCategoryLink($category->id_category, $category.link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a> {else} <div>{$category->description}</div> {/if} </div> {/if} </div> {else} <!-- Category image --> <div class="content_scene_cat_bg" {if $category->id_image}style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) 0 bottom no-repeat; background-size:contain; min-height:{$categorySize.height}px;" {/if}> <!-- The belove section has been moved down ***************************************************** {if $category->description} <div class="cat_desc"> <span class="category-name"> {strip} {$category->name|escape:'html':'UTF-8'} {if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'} {/if} {/strip} </span> {if Tools::strlen($category->description) > 350} <div id="category_description_short" class="rte">{$description_short}</div> <div id="category_description_full" class="unvisible rte">{$category->description}</div> <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a> {else} <div class="rte">{$category->description}</div> {/if} </div> {/if} ********************************************* the above section is what has been moved down --> </div> {/if} </div> {/if} <h1 class="page-heading{if (isset($subcategories) && !$products) || (isset($subcategories) && $products) || !isset($subcategories) && $products} product-listing{/if}"><span class="cat-name">{$category->name|escape:'html':'UTF-8'}{if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'}{/if}</span>{include file="$tpl_dir./category-count.tpl"}</h1> <!-- ******************************* Moved down section START by Hans --> {if $category->description} <div class="cat_desc"> <!-- ******************** Barred section **************** <span class="category-name"> {strip} {$category->name|escape:'html':'UTF-8'} {if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'} {/if} {/strip} </span> ****************** END barred section --> {if Tools::strlen($category->description) > 350} <div id="category_description_short" class="rte">{$description_short}</div> <div id="category_description_full" class="unvisible rte">{$category->description}</div> <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a> {else} <div class="rte">{$category->description}</div> {/if} </div> {/if} <!-- ******************************* Moved down section END by Hans --> {if isset($subcategories)} <!-- Subcategories --> <div id="subcategories"> <p class="subcategory-heading">{l s='Subcategories'}</p> <ul class="clearfix"> {foreach from=$subcategories item=subcategory} <li> <div class="subcategory-image"> <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img"> {if $subcategory.id_image} <img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html':'UTF-8'}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" /> {else} <img class="replace-2x" src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" /> {/if} </a> </div> <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:45:'...'|escape:'html':'UTF-8'|truncate:350}</a></h5> {if $subcategory.description} <div class="cat_desc">{$subcategory.description}</div> {/if} </li> {/foreach} </ul> </div> {/if} {if $products} <div class="content_sortPagiBar clearfix"> <div class="sortPagiBar clearfix"> {include file="./product-sort.tpl"} {include file="./nbr-product-page.tpl"} </div> <div class="top-pagination-content clearfix"> {include file="./product-compare.tpl"} {include file="$tpl_dir./pagination.tpl"} </div> </div> {include file="./product-list.tpl" products=$products} <div class="content_sortPagiBar"> <div class="bottom-pagination-content clearfix"> {include file="./product-compare.tpl" paginationId='bottom'} {include file="./pagination.tpl" paginationId='bottom'} </div> </div> {/if} {elseif $category->id} <p class="alert alert-warning">{l s='This category is currently unavailable.'}</p> {/if} {/if} Link to comment Share on other sites More sharing options...
dioniz Posted May 1, 2014 Share Posted May 1, 2014 (edited) This is feature, as presta developers says. What happens is this. Category image is not an image but background image. So description is showing above the image background, which looks awfull in your case. To change this, you need to tweak your category.tpl to show image, not background. Ok, you were faster then my answer Edited May 1, 2014 by dioniz (see edit history) Link to comment Share on other sites More sharing options...
Bjarstal Posted May 1, 2014 Author Share Posted May 1, 2014 And here are the changes in categorys.css Lines 5 and 10 are deleted. What is done forther down is for other purposes. Enjoy ! /* ************************************************************************************************ Categories Page Styles ************************************************************************************************ */ .content_scene_cat { /*border-top: 5px solid #333333; ------------------- by Hans */ color: #d7d7d7; line-height: 19px; margin: 0 0 26px 0; } .content_scene_cat .content_scene_cat_bg { /* padding: 18px 10px 10px 42px; ------------ by Hans ----*/ background-color: #464646 !important; } @media (max-width: 1199px) { .content_scene_cat .content_scene_cat_bg { padding: 10px 10px 10px 15px; } } .content_scene_cat span.category-name { font: 600 42px/51px "Open Sans", sans-serif; color: white; margin-bottom: 12px; } @media (max-width: 1199px) { .content_scene_cat span.category-name { font-size: 25px; line-height: 30px; } } .content_scene_cat p { margin-bottom: 0; } .content_scene_cat a { color: white; } .content_scene_cat a:hover { text-decoration: underline; } .content_scene_cat .content_scene { color: #777777; } .content_scene_cat .content_scene .cat_desc { padding-top: 20px; } .content_scene_cat .content_scene .cat_desc a { color: #777777; } .content_scene_cat .content_scene .cat_desc a:hover { color: #515151; } /* ************************************************************************************************ Sub Categories Styles ************************************************************************************************ */ #subcategories { border-top: 1px solid #d6d4d4; padding: 15px 0 0px 0;margin-bottom:35px } /* ---- margin-bottom:30px added by Hans to make a distance to the box below ---- */ #subcategories p.subcategory-heading { font-weight: bold; color: #333333; margin: 0 0 15px 0; } #subcategories ul { margin: 0 0 0 -20px; } #subcategories ul li { float: left; width: 145px; margin: 0 0 33px 33px; /* **************** increased from 0 0 13px 33px to make a bigger distance below so I could increase the truncate and have more text */ text-align: left; height: 202px; } #subcategories ul li .subcategory-image { padding: 0 0 8px 0; } #subcategories ul li .subcategory-image a { display: block; padding: 9px; border: 1px solid #d6d4d4; } #subcategories ul li .subcategory-image a img { max-width: 100%; vertical-align: top; } #subcategories ul li .subcategory-name { font: 600 16px/20px "Open Sans", sans-serif; color: #555454; text-transform: uppercase; } #subcategories ul li .subcategory-name:hover { color: #515151; } #subcategories ul li .cat_desc { display: none; } #subcategories ul li:hover .subcategory-image a { border: 5px solid #333333; padding: 5px; } Link to comment Share on other sites More sharing options...
Bjarstal Posted May 1, 2014 Author Share Posted May 1, 2014 This is feature, as presta developers says. What happens is this. Category image is not an image but background image. So description is showing above the image background, which looks awfull in your case. To change this, you need to tweak your category.tpl to show image, not background. Ok, you were faster then my answer Aha ! I made it complicated probably. I should just have changed to image !!! Thanks Link to comment Share on other sites More sharing options...
dioniz Posted May 1, 2014 Share Posted May 1, 2014 That's what i have done. Changed bg to img and set description under image. Link to comment Share on other sites More sharing options...
Bjarstal Posted May 1, 2014 Author Share Posted May 1, 2014 That's what i have done. Changed bg to img and set description under image. Could you give the code of how to change make a picture? I am new in PHP and I cannot figure out how to do it. Link to comment Share on other sites More sharing options...
dioniz Posted May 1, 2014 Share Posted May 1, 2014 I changed this code: <!-- Category image --> <div class="content_scene_cat_bg" {if $category->id_image}style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) 0 top no-repeat; background-size:contain; min-height:{$categorySize.height}px;" {/if}> {if $category->description} <div class="cat_desc"> <span class="category-name"> {strip} {$category->name|escape:'html':'UTF-8'} {if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'} {/if} {/strip} </span> {if Tools::strlen($category->description) > 350} <div id="category_description_short" class="rte">{$description_short}</div> <div id="category_description_full" class="unvisible rte">{$category->description}</div> <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a> {else} <div class="rte">{$category->description}</div> {/if} </div> {/if} </div> to this: <!-- Category image --> <div class="content_scene_cat_bg"> {if $category->id_image} <img class="replace-2x img-responsive" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" width="{$categorySize.width}" height="{$categorySize.height}" alt="" /> {/if} </div> {if $category->description} <div class="cat_desc"> </span> {if Tools::strlen($category->description) > 350} <div id="category_description_short" class="rte">{$description_short}</div> <div id="category_description_full" class="unvisible rte">{$category->description}</div> <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a> {else} <div class="rte">{$category->description}</div> {/if} </div> {/if} and some css tweaks 1 Link to comment Share on other sites More sharing options...
dioniz Posted May 1, 2014 Share Posted May 1, 2014 Now it looks like this: Link to comment Share on other sites More sharing options...
dioniz Posted May 1, 2014 Share Posted May 1, 2014 I forgot i placed cat name to top like this: <h1 class="page-heading{if (isset($subcategories) && !$products) || (isset($subcategories) && $products) || !isset($subcategories) && $products} product-listing{/if}"><span class="cat-name">{$category->name|escape:'html':'UTF-8'}{if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'}{/if}</span>{include file="$tpl_dir./category-count.tpl"}</h1> just after {if isset($category)} {if $category->id AND $category->active} {if $scenes || $category->description || $category->id_image} Link to comment Share on other sites More sharing options...
vontanix Posted February 23, 2015 Share Posted February 23, 2015 I changed this code: <!-- Category image --> <div class="content_scene_cat_bg" {if $category->id_image}style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) 0 top no-repeat; background-size:contain; min-height:{$categorySize.height}px;" {/if}> {if $category->description} <div class="cat_desc"> <span class="category-name"> {strip} {$category->name|escape:'html':'UTF-8'} {if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'} {/if} {/strip} </span> {if Tools::strlen($category->description) > 350} <div id="category_description_short" class="rte">{$description_short}</div> <div id="category_description_full" class="unvisible rte">{$category->description}</div> <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a> {else} <div class="rte">{$category->description}</div> {/if} </div> {/if} </div> to this: <!-- Category image --> <div class="content_scene_cat_bg"> {if $category->id_image} <img class="replace-2x img-responsive" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" width="{$categorySize.width}" height="{$categorySize.height}" alt="" /> {/if} </div> {if $category->description} <div class="cat_desc"> </span> {if Tools::strlen($category->description) > 350} <div id="category_description_short" class="rte">{$description_short}</div> <div id="category_description_full" class="unvisible rte">{$category->description}</div> <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a> {else} <div class="rte">{$category->description}</div> {/if} </div> {/if} and some css tweaks thanks for your post, it is more problem free if you just change a part of the code, without css changes, products will disappear to bottom right under left column with your posted code change. change this pcs of code here: <!-- Category image --> <div class="content_scene_cat_bg" {if $category->id_image}style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) 0 top no-repeat; background-size:contain; min-height:{$categorySize.height}px;" to this: <!-- Category image --> <div class="content_scene_cat_bg"> {if $category->id_image} <img class="replace-2x img-responsive" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" width="{$categorySize.width}" height="{$categorySize.height}" alt="" /> that will change from background to image and will not touch any part of category code. from here you can play with css and other changes if need. Link to comment Share on other sites More sharing options...
Recommended Posts