BUG - Catergory text overlays category picture

[Futiskauppa]

Hi,

I have installed 1.6 to test it suitability for sport store. When I add picture to category and then description text I see text overlaying picture. Anyone else have same issue and how it can be fixed. 

Google Chrome version 32.0.1700.107 m

[rv01]

Yes I have the same problem.

And the sub-categories titles are doing the same when they have 3 lines, see:

 

[Lucas Cerdan]

Hi,

 

This is a feature, not a bug.

This is how the new theme deals with category image: http://puu.sh/7sum0.jpg

You may need to change the pictures you use or modify the theme.

[rv01]

OK thanks.

[selectshop.at]

Feature ? You cannot read the description anyway. Sorry but for me it's a bug and could be better solved...

[Futiskauppa]

Hi,

 

This is a feature, not a bug.

This is how the new theme deals with category image: http://puu.sh/7sum0.jpg

You may need to change the pictures you use or modify the theme.

So what shall be correct size to Category image in this case?

[Guest]

Just noticed this - surely this is not a good feature? The text cannot be read if there is a category image. And it you remove the category image you get the dreaded "No image" logo

 

We have to use text in the category description (excellent for SEO). I just don't get it

 

Can anyone give a decent description including image sizes on how to make this work?

[Lucas Cerdan]

Just noticed this - surely this is not a good feature? The text cannot be read if there is a category image. And it you remove the category image you get the dreaded "No image" logo

 

We have to use text in the category description (excellent for SEO). I just don't get it

 

Can anyone give a decent description including image sizes on how to make this work?

Well, look at the default theme. Category description can be read and you got example of pictures you could use: http://puu.sh/7MR2l.jpg

[Guest]

Well, look at the default theme. Category description can be read and you got example of pictures you could use: http://puu.sh/7MR2l.jpg

Yes I have seen that, but how do you reproduce that? Image sizes? Is that just text in the description area and a category image? or is the whole thing a banner in thext area, or the whole thing a banner in the category image area?

 

I am surpised that this means that a simply upgrade from default theme to the new default theme means we have to make some major changes to our images - without any information as to how to do that?

[dioniz]

I agree that image is not a good idea, but to explain. Image is background image size 870px  x  217px. It is possible to change text color in category.css.

 

For heading there is this code:

.content_scene_cat span.category-name {
    color: #FFFFFF;
    font: 600 42px/51px "Open Sans",sans-serif;
    margin-bottom: 12px;
}

Change #FFFFFF to some other color

 

For text there is this code:

.content_scene_cat {
    color: #D7D7D7;
    line-height: 19px;
}

Change #D7D7D7 to some other color

[Guest]

I agree that image is not a good idea, but to explain. Image is background image size 870px  x  217px. It is possible to change text color in category.css.

 

For heading there is this code:

.content_scene_cat span.category-name {
    color: #FFFFFF;
    font: 600 42px/51px "Open Sans",sans-serif;
    margin-bottom: 12px;
}

Change #FFFFFF to some other color

 

For text there is this code:

.content_scene_cat {
    color: #D7D7D7;
    line-height: 19px;
}

Change #D7D7D7 to some other color

Thanks for the info - much appreciated

 

I still can't believe that updating from a default theme, to the new default theme means we have to spend hours creating new category images for potentially hundreds of categories. I am shocked really

[stottycabanas]

I still can't believe that updating from a default theme, to the new default theme means we have to spend hours creating new category images for potentially hundreds of categories. I am shocked really

I agree, it's ridiculous.

 

This is a feature, not a bug.

Lucas, did you used to work for Microsoft or IBM, maybe? 

[Guest]

Does anyone know how / where i can edit the code so that the image is not imposed in this way? I want to keep the category image, but not have it shown in the text area at all

[Guest]

I would prefer a build,in option to make this optional

 

But in the meantime this seems to work. It stops the image form being used (backup before trying of course)

 

Themes > default-bootstrap > Category.tpl

 

This is the original code approx line number 47

  <!-- 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}>
                        {if $category->description}

Delete the If statement to leave:

<!-- Category image -->
                    <div class="content_scene_cat_bg" >
                        {if $category->description}
                            

[spectra]

Any solutions? 

[Guest]

Any solutions? 

Only by changing the code as shown above

[Futuresys]

As suggested above, open up the category.tpl file and replace:

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

With:

<div class="content_scene_cat_bg">
{if $category->id_image}<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$category->name|escape:'html':'UTF-8'}">{/if}

This removes the adding of the image as a background on the "content_scene_cat_bg" div and instead adds it as a normal image just afterwards.

 

I also added an alt tag containing the category name to help with SEO friendliness and web standards compliance.

[selectshop.at]

Well too late for any further code adaptation. I simply removed all category pictures and changed the color of the text. I think this feature, and some other things in PS 1.6. are simply a mess and not well reflected before implemented. And I'm speaking about default things from one version to another and not third-party add-ons/themes.

Edited April 17, 2014 by selectshop.at (see edit history)

[Guest]

Well too late for any further code adaptation. I simply removed all category pictures and changed the color of the text. I think this feature, and some other things in PS 1.6. are simply a mess and not well reflected before implemented. And I'm speaking about default things from one version to another and not third-party add-ons/themes.

The problem with removing category pictures is if you have subcategories

 

For example if you have category 1, category 2 category 3 etc

then category 1a, category 1b, category 1c

 

If you click on category 1, you should see all the subcategories listed AND the pictures. But if you remove the pictures it just shows "No image available" which does not look good at all

[rv01]

As it is a feature there are several options:

- stop trying to customise and use the default theme, buy another one

- change the categories pictures, leaving a dark side on the left and adjusting the texts (my choice)

- or put yourself the texts in pics with PS, complicate if you have more than one language

- remove the texts

- replace images with a little white dot

- or use -webkit to have a stroke:

       -webkit-text-fill-color: white;
       -webkit-text-stroke: 1px black;

      so the texts will be always visible.

      Problems: the font must be a least 20px and it works only with Chrome and Safari.

[MMCC]

Total novice here, can't find this line of code anywhere. Haylau / Futuresys...tried Themes>Category>inspect element, appreciate if you could point me to it...in detail if possible.

Thanks!

[Guest]

As it is a feature there are several options:

- stop trying to customise and use the default theme, buy another one

- change the categories pictures, leaving a dark side on the left and adjusting the texts (my choice)

- or put yourself the texts in pics with PS, complicate if you have more than one language

- remove the texts

- replace images with a little white dot

- or use -webkit to have a stroke:

       -webkit-text-fill-color: white;

       -webkit-text-stroke: 1px black;

      so the texts will be always visible.

      Problems: the font must be a least 20px and it works only with Chrome and Safari.

Well aware of the possibilities. My issue is that to go from a standard theme, upgrade the store to the newest standard theme involves one hell of a lot of work if you have tens or hundreds of categories

[Guest]

Total novice here, can't find this line of code anywhere. Haylau / Futuresys...tried Themes>Category>inspect element, appreciate if you could point me to it...in detail if possible.

Thanks!

You need to use ftp to locate the categories.tpl file

 

It should be in the folder Themes > default-bootstrap > Category.tpl

[rv01]

Well aware of the possibilities. My issue is that to go from a standard theme, upgrade the store to the newest standard theme involves one hell of a lot of work if you have tens or hundreds of categories

I agree. I have around +50 cat/images so far, quite a job with PS but as the actual standard theme is, say, nice (apart from the colors), I do hope it will last a while!

Problem is that the texts must stay short, will have to find another place to put them.

Trying to cope with their "features" as they say, coming from 1.4.7 it's a quantum leap.

The more I work, the more TLC to discover...  

[treeghost]

As suggested above, open up the category.tpl file and replace:

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

With:

<div class="content_scene_cat_bg">
{if $category->id_image}<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$category->name|escape:'html':'UTF-8'}">{/if}

This removes the adding of the image as a background on the "content_scene_cat_bg" div and instead adds it as a normal image just afterwards.

 

I also added an alt tag containing the category name to help with SEO friendliness and web standards compliance.

 

This helped, but the picture still has a white background around it instead of being gray like the title bar.  How can I get the picture to not have the white around it?

[piercingpusher]

Presta-team can call this a feature all day long.

 

Evey on else would say that this a bug, and a nasty one!

[sumo23]

Hi,

I have installed 1.6 to test it suitability for sport store. When I add picture to category and then description text I see text overlaying picture. Anyone else have same issue and how it can be fixed. 

Google Chrome version 32.0.1700.107 m

 

Hi.

 

I've made modification in .../yourtheme/css/category.css

It's not perfect but at least...

 

Change padding to make some place for a category photo (square). Change background color for a dark one.

  .content_scene_cat .content_scene_cat_bg {
    padding: 18px 10px 10px 42px;
    background-color: #464646 !important; }

to

  .content_scene_cat .content_scene_cat_bg {
    padding: 18px 10px 10px 272px;
    background-color: black !important; }

 

The only problem is when you use a blocklayered module filters. Category name contains a filter names and changes proportions.

 

 

 

 

Any idea how to fix it?

Regards 

 

Sumo

[gore.m]

To sumo23 .. its cool!

[skinordic]

Hi

 

Anobody knows how to move the photo to the right ?

 

Jesper

 

http://www.rulleskisport.dk/da/klassiske-rulleski/

[consochris]

Just change the background size within the original "if" value.

Put background-size:0%

 

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

 

The image will then disappear from the category header but will remain as a thumbnail when browsing your menu.

[Jacek Es]

You can disable the main category image. It will not disable displaying subcategory images. To do so, in /themes/default-bootstrap/category.tpl remove this bit of code (line 48):

 

{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}

[Aelanna]

I think some are missing the point. Eliminating the picture is fine if that's what you want, but I'd rather eliminate the text, which is what I've done on my site for now. That and lots of tweaks and mods to image sizes is all that's made this semi-usable.

[Kingstar]

ATTENTION:

 

There wouldn't be any use to modify your template files any longer. PrestaShop Team finally listened! Look, there's a button to toggle subcategories ON/OFF, and I mean, not the subcategories on your entire website but only the subcategories with the annoying "no image available" pictures that are listed right before your product listing! You'll still be able to see your subcategories from the category column and sort your products from those.

To disable or turn your subcategories off, simply go to PREFERENCES>>Themes>>Theme configurator. Alternatively, you can arrive at the same spot using MODULES>>Theme configurator>>Configure. On the Settings, you'll find "Display subcategories". Simply change it to NO. Or you can leave it at YES. (Check the attached image.)

 

It is worth mentioning to note that I just upgraded to 1.6.0.9. I don't know if this is a new feature or whether it had been there in all previous versions and we'd just been blind to it. One thing is certain; PrestaShop's subcategory is now what I'd call a FEATURE! Until now, it has been a stubborn and very annoying bug.

 

[MMCC]

Great!!! 

 

Thanks Kingstar

[rogy30]

Hello Everyone!

 

I solved this in the following way.

 

-I put a picture categories 160x34 

-the place where the text I put the picture on the left side 

-text in the center 

 

Image is covered picture category text immediately below it in the center 

I am not expert in English

 

You can see the finished work on the site

 

http://daljinskitv.com/26-daljinski-za-aiwa-televizor

 

I hope you find this was helpful

Edited September 22, 2014 by rogy30 (see edit history)

[floralin777]

i add <br/> 6 timers, so the text will move down to where i need them. i think this is the most easy way to fix it:)

[cossamus]

ATTENTION:

 

There wouldn't be any use to modify your template files any longer. PrestaShop Team finally listened! Look, there's a button to toggle subcategories ON/OFF, and I mean, not the subcategories on your entire website but only the subcategories with the annoying "no image available" pictures that are listed right before your product listing! You'll still be able to see your subcategories from the category column and sort your products from those.

To disable or turn your subcategories off, simply go to PREFERENCES>>Themes>>Theme configurator. Alternatively, you can arrive at the same spot using MODULES>>Theme configurator>>Configure. On the Settings, you'll find "Display subcategories". Simply change it to NO. Or you can leave it at YES. (Check the attached image.)

 

It is worth mentioning to note that I just upgraded to 1.6.0.9. I don't know if this is a new feature or whether it had been there in all previous versions and we'd just been blind to it. One thing is certain; PrestaShop's subcategory is now what I'd call a FEATURE! Until now, it has been a stubborn and very annoying bug.

 

Unfortunately that option does not exist on 1.6.0.8.

Coult it be possible to implement it?

 

Regards.

[cossamus]

 

Hello Everyone!

 

I solved this in the following way.

 

-I put a picture categories 160x34 

-the place where the text I put the picture on the left side 

-text in the center 

 

Image is covered picture category text immediately below it in the center 

I am not expert in English

 

You can see the finished work on the site

 

http://daljinskitv.com/26-daljinski-za-aiwa-televizor

 

I hope you find this was helpful

 

looks nice but your category name "DALJINSKI ZA AIWA TELEVIZOR " is invisible above the picture.

[Creastyle]

 

I would prefer a build,in option to make this optional

 

But in the meantime this seems to work. It stops the image form being used (backup before trying of course)

 

Themes > default-bootstrap > Category.tpl

 

This is the original code approx line number 47

  <!-- 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}>
                        {if $category->description}

Delete the If statement to leave:

<!-- Category image -->
                    <div class="content_scene_cat_bg" >
                        {if $category->description}
                            

Very nice that work for me thank you so much

[pb4sc]

Thanks for the fix Haylau.   Was driving me crazy for a so called "feature"

pb4sc

[mouni]

Hi

 

I think I finally found an easy solution for this irritating issue= image overlapping the above situated category description, which belongs to the category above.

 

 

In category.css where it says:

 

#subcategories ul li {

      float: left;

      width: 145px;

      margin: 0 0 13px 33px;

      text-align: center;

      height: 202px; }

 

I changed  height to 305px

 

and voilá, the image positioned itself nicely underneath the above category description!