To shorten empty space in categories page. How?

[HH Services Limited]

Hello,

    Prestashop´s default category´s page leaves empty spaces too big as seen in the pictures.

Where and which changes should be applied to shorten the empty spaces marked with arrows in the pictures? Please if you know it make a distinction between the changes for arrow 1 arrow 2 and for arrow 3.

Thank you.

Edited April 17, 2016 by HHServices (see edit history)

[Rosa Lynn]

Good question!!

[HH Services Limited]

Thanks!!

[Prestachamps]

Hi,

for spacer numbered 1 on your screenshot, here is where you can lower the spacing:

1. I believe in /themes/default-bootstrap/global.css, find this inside the rule: 

#columns {

.......

    padding-top: 15px;

-(decreasing this value to 5px will lower the top spacing)

 

in the same file, find rule :

.breadcrumb {

................

    margin-bottom: 16px;

 

-(modify this is spacing that it is under the breadcrumb to 5px)

 

2. for the space 2 in the screenshot, you have the category's name, written in white color,

regarding this category name you have 2 options: 

- 1. you can remove it from the category.tpl,  I saw that you include the category in the category description with those 2 icons, 

or 

- 2. the default category span can be modified with css to have those 2 icons in order to look as you want it, this way you don't need to include the category name in your category description(this means after you have done the css modifications, you will have to edit and remove the title from the short description and from the long descriptions of the categories).

here is css modifications needed for the solution 2 :

add this rule at the end of category.css:

.content_scene_cat span.category-name:before, .content_scene_cat span.category-name:after {

    content: " ";

    background: 0 0 no-repeat url('http://www.highesthelp.com/img/cms/health problems.jpg');

    display: inline-block;

    width: 29px;

    height: 35px;

}

For the category title to be visible, in the category.css find the rule, and add these 2 styles to it

.content_scene_cat span.category-name {

.................

modify color to be :  color: #000;

.................

    text-align: center;

    display: block;

}

 

3. for space 3 you have the more link() written in white color, and you have a <h3></h3> in the end of the category description(for example on category: https://www.highesthelp.com/en/16-health-problems )

to fix this add to the category.css he following rule:

.content_scene_cat a.lnk_more{

  color:#000;

}

Regards, Leo

[HH Services Limited]

 

Hi,

for spacer numbered 1 on your screenshot, here is where you can lower the spacing:

1. I believe in /themes/default-bootstrap/global.css, find this inside the rule: 

#columns {

.......

    padding-top: 15px;

-(decreasing this value to 5px will lower the top spacing)

 

in the same file, find rule :

.breadcrumb {

................

    margin-bottom: 16px;

 

-(modify this is spacing that it is under the breadcrumb to 5px)

 

2. for the space 2 in the screenshot, you have the category's name, written in white color,

regarding this category name you have 2 options: 

- 1. you can remove it from the category.tpl,  I saw that you include the category in the category description with those 2 icons, 

or 

- 2. the default category span can be modified with css to have those 2 icons in order to look as you want it, this way you don't need to include the category name in your category description(this means after you have done the css modifications, you will have to edit and remove the title from the short description and from the long descriptions of the categories).

here is css modifications needed for the solution 2 :

add this rule at the end of category.css:

.content_scene_cat span.category-name:before, .content_scene_cat span.category-name:after {

    content: " ";

    background: 0 0 no-repeat url('http://www.highesthelp.com/img/cms/health problems.jpg');

    display: inline-block;

    width: 29px;

    height: 35px;

}

For the category title to be visible, in the category.css find the rule, and add these 2 styles to it

.content_scene_cat span.category-name {

.................

modify color to be :  color: #000;

.................

    text-align: center;

    display: block;

}

 

3. for space 3 you have the more link() written in white color, and you have a <h3></h3> in the end of the category description(for example on category: https://www.highesthelp.com/en/16-health-problems )

to fix this add to the category.css he following rule:

.content_scene_cat a.lnk_more{

  color:#000;

}

Regards, Leo

 

 

Hello and thaks for your reply.

I have found a few problems: 

1. I believe in /themes/default-bootstrap/global.css, find this inside the rule: 

#columns {

.......

    padding-top: 15px;

-(decreasing this value to 5px will lower the top spacing)

It is in /themes/default-bootstrap/CSS/global.css  but this modification affects also the home page, so it is not suitable for a small change in the catefories pages.

2. in the same file, find rule :

.breadcrumb {

................

    margin-bottom: 16px;

 

-(modify this is spacing that it is under the breadcrumb to 5px)

This one worked well, I reduced to 0 px and it got a bit better.

I think that the main reduction should be in number 2 of the snapshot I placed due to the categoriés name. You gave two options. The first one to eliminate it from the category.tpl file

( I am assuming that in themes/default-bootstrap ??) To do this what modification should I apply??

The second option that you give requires lots of changes multiplied by the number of categories?? I have 20 categories so the changes needed would be quite extensive, right? Better then go with option 1?

 

3.3. for space 3 you have the more link() written in white color, and you have a <h3></h3> in the end of the category description(for example on category:https://www.highesth...health-problems )

to fix this add to the category.css he following rule:

.content_scene_cat a.lnk_more{

  color:#000;

}

I pasted this code at the end of the category.tpl file in themes/default-bootstrap and I got no results...

 

Any further instructions will be much appreciated. Thanks,

Edited April 20, 2016 by HHServices (see edit history)

[HH Services Limited]

 

Hi,

for spacer numbered 1 on your screenshot, here is where you can lower the spacing:

1. I believe in /themes/default-bootstrap/global.css, find this inside the rule: 

#columns {

.......

    padding-top: 15px;

-(decreasing this value to 5px will lower the top spacing)

 

in the same file, find rule :

.breadcrumb {

................

    margin-bottom: 16px;

 

-(modify this is spacing that it is under the breadcrumb to 5px)

 

2. for the space 2 in the screenshot, you have the category's name, written in white color,

regarding this category name you have 2 options: 

- 1. you can remove it from the category.tpl,  I saw that you include the category in the category description with those 2 icons, 

or 

- 2. the default category span can be modified with css to have those 2 icons in order to look as you want it, this way you don't need to include the category name in your category description(this means after you have done the css modifications, you will have to edit and remove the title from the short description and from the long descriptions of the categories).

here is css modifications needed for the solution 2 :

add this rule at the end of category.css:

.content_scene_cat span.category-name:before, .content_scene_cat span.category-name:after {

    content: " ";

    background: 0 0 no-repeat url('http://www.highesthelp.com/img/cms/health problems.jpg');

    display: inline-block;

    width: 29px;

    height: 35px;

}

For the category title to be visible, in the category.css find the rule, and add these 2 styles to it

.content_scene_cat span.category-name {

.................

modify color to be :  color: #000;

.................

    text-align: center;

    display: block;

}

 

3. for space 3 you have the more link() written in white color, and you have a <h3></h3> in the end of the category description(for example on category: https://www.highesthelp.com/en/16-health-problems )

to fix this add to the category.css he following rule:

.content_scene_cat a.lnk_more{

  color:#000;

}

Regards, Leo

 

 

Ok, after trying (and I think that I need an ok from your part to see if I have done things correctly? I have made half of what you recommended. This is what worked:

-I Modified (in /themes/default-bootstrap/CSS/global.css), find rule :

.breadcrumb {

................

    margin-bottom: 16px;

 

(I modified the spacing that it is under the breadcrumb to 0px)

 

-Then I eliminated:

  <span class="category-name">

                                {strip}

                                    {$category->name|escape:'html':'UTF-8'}

                                    {if isset($categoryNameComplement)}

                                        {$categoryNameComplement|escape:'html':'UTF-8'}

                                    {/if}                                    

 

and the corresponding </span>   (a bit later, but I left the {/strip} there)

from category.tpl in themes/default-bootstrap

 

If done correctly I am happy with changes for arrows 1 and 2 of the picture, but I feel that arrow 3 should be shorten as well ("<h3></h3>")

Any further instructions would be great.

Thanks!!

Edited April 21, 2016 by HHServices (see edit history)

[Rosa Lynn]

Almost solved this post. I hope that either [email protected] or someone else can finish it so that it can be marked as solved.

[HH Services Limited]

Yes I agree, this is one of prestashop´s front office´s flaws and solving it will benefit a very large number of its users.

[HH Services Limited]

OK, Solution:

 

Modify (in /themes/default-bootstrap/CSS/global.css), find rule :

.breadcrumb {   ((do this twice))

 

 and reduce to  margin-bottom: 0px;

 

(this is spacing that it is under the breadcrumb, to 0px)

 

Then eliminate:

  <span class="category-name">

     {strip}

       

{$category->name|escape:'html':'UTF-8'}

     {if isset($categoryNameComplement)}

                                        

{$categoryNameComplement|escape:'html':'UTF-8'}

        

 {/if}                                    

 

and the corresponding </span>   (a bit later, but we leave the {/strip} there)

from category.tpl in themes/default-bootstrap

 

Then in category.css in themes/default-bootstrap/css modify margin-bottom: 12px; } to 0px and  margin: 0 0 26px 0; } to 0px

then .content_scene_cat .content_scene_cat_bg {

    padding: 18px 10px 10px 42px; to .content_scene_cat .content_scene_cat_bg {

    padding: 0px 0px 0px 0px;

 

then add .content_scene_cat a.lnk_more{

  color:#000;

} 

at the end of the categories part

 

If we would have had subcategories, we would play in here as well

 

And placed to reduce no needed spaces, and for the products´page, in product.css in themes/default-bootstrap/css

 

margin-bottom: 40px; } to 0px