Centrer les sous catégories Prestashop 1.6.0.14

[devoss62]

Bonjour,

 

Je cherche depuis plusieurs jours à centrer les sous catégories sur un Prestashop 1.6.0.14,cela est plus esthétique quand il y à moins de quatre sous catégories.

 

Cela se passe je pense dans : category.css

 

#subcategories {
  border-top: 1px solid #d6d4d4;
  padding: 15px 0 0px 0; }
  #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 25px 60px;
      text-align: center;
      height: 150px; }
      #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; }

 

Et peut être dans category.tpl

 

<div id="subcategories">   
<h3>{l s='Subcategories'}</h3>   
<ul class="inline_list">   
{foreach from=$subcategories item=subcategory}    
<li>     
<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">      
{if $subcategory.id_image}       
<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />      
{else}       
<img src="{$img_cat_dir}default-medium.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />      
{/if}     
</a>

 

Une âme charitable pourrait me soumettre les modifications ?

 

Merci et bonne journée,

Sylvain,

[Divine]

Bonjour,

 

Un "display:inline-block" sur "#subcategories ul li" et un "text-align:center" sur "#subcategories ul" devrait faire l'affaire.

Bien sûr il faut enlever le "float:left" sur "#subcategories ul li" et peut-être adapter un peu les marges mais la base est là.

[devoss62]

Bonjour,

Et merci pour votre réponse.

 

Je suis arrivé en cherchant à cela :

 

  #subcategories ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display:table;
    text-align: center;
          }
    #subcategories ul li {
    display: inline-block;
     margin: 0px 0px 0px 70px;
     height: 150px;
     width: 15%;
    padding:0 0.5em;
    text-align:center;

 

Je suis loin d'être certain que ce code est correct,mais ça centre les sous catégories...

Il y a peut-être moyen d'optimiser ?

Forcer le nombre images par ligne par exemple ?

 

Bonne journée,

Sylvain,

Edited July 8, 2015 by devoss62 (see edit history)

[Divine]

Tu peux virer le "display:table" sans souci.

La marge de 70px à gauche est bizarre, si on centre les catégories, cela serait peut-être mieux avec une marge équivalente des deux côtés "margin:0 35px".

Après je ne sais pas comment ton site se présente exactement, donc...

Edited July 8, 2015 by Divine (see edit history)

[devoss62]

Bonjour,

 

Si j'enléve le display:table ça ne centre plus...

 

Si vous avez un peu de temps pour finaliser les bugs avec facturation du travaille cela ne pose pas de problème.

 

Si c'est ok pour vous, envoyer moi un mail en privée à [email protected] je vous donnerais les accés.

Le site n'est pas encore en prod mais un peut d'aide serais nécessaire pour finaliser le template.

 

Bonne journée,

Sylvain,

[devoss62]

Bonsoir,

 

Il y avais également à modifier dans le Global.css...

 

#subcategories ul li {
    margin: 15px 20px 0px 0px;
    width: 158px;
    /*float: left;*/
    border: none;

 

Donc résolus

Mais cela tiens toujours si vous voulez améliorer le graphisme.

 

Sylvain,