Jump to content

[Solucionado] Problemas configurando subcategorias en cuadricula

ansulealflycaster
 Share

Recommended Posts

ansulealflycaster Newbie

ansulealflycaster

Posted
Posted

Hola amigos,

 

Tras actualizar a la version 1.5.5 he tenido bastantes problemillas ... el que mas ha afectado a mi web ha sido el tema de la configuracion en cuadricula de las subcategorias.

 

He logrado volver a configurarla siguiendo la guia 'X', pero no logro dejarla como yo quisiera.

 

Necesito que me ayudeis para ver como aumentar el tamaño de las imagenes de las subcategorias y centrar el titulo de estas debajo de su imagen.

 

Por otro lado me gustaria saber como evitar todos estos problemas cuando tenga que volver a actualizar a una nueva version de Prestashop

 

Gracias

Link to comment
Share on other sites
Paula Martinez Newbie

Paula Martinez

Posted
Posted

Hola,

 

Me llamo Raul Martinez,

 

Puedes editar el tipo "medium_default" en la pestaña Preferencias -> Imagenes y aumentar el tamaño y despues regenerar las miniaturas, pero no lo recomiendo porque esto afecta a otras partes de tu tienda según lei en el foro.

 

Puedes crear un nuevo tipo de imagen en la pestaña Preferencias -> Imagenes y decirle que se aplique a las categorias y luego editar el category.tpl y cambiar el "medium_default" por el nuevo tipo que has creado.

Link to comment
Share on other sites
ansulealflycaster Newbie

ansulealflycaster

Posted
  • Author
Posted

Hola,

 

Me llamo Raul Martinez,

 

Puedes editar el tipo "medium_default" en la pestaña Preferencias -> Imagenes y aumentar el tamaño y despues regenerar las miniaturas, pero no lo recomiendo porque esto afecta a otras partes de tu tienda según lei en el foro.

 

Puedes crear un nuevo tipo de imagen en la pestaña Preferencias -> Imagenes y decirle que se aplique a las categorias y luego editar el category.tpl y cambiar el "medium_default" por el nuevo tipo que has creado.

 

Gracias compañero,

 

Esto ya lo he hecho pero el tamaño de la imagen de las subcategorias se queda igual....

Link to comment
Share on other sites
ansulealflycaster Newbie

ansulealflycaster

Posted
  • Author
Posted

El width y el height te lo esta cogiendo del medium (fijate en eso)

 

Este es el codigo como lo tengo ahora mismo:

 

 

{if $subcategory.id_image}
<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'subcat_default')|escape:'html'}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{else}
<img src="{$img_cat_dir}default-subcat_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{/if}
 
El nuevo tipo de imagen lo llame "subcat_default" 
 
Como tendria que modificar para que me los cogiera de este???
 
Gracias
Link to comment
Share on other sites
  • 4 weeks later...
ansulealflycaster Newbie

ansulealflycaster

Posted
  • Author
Posted

Hola compañeros, ando de nuevo perdido. He actulizado a la version 1.5.6 y de nuevo los mismos problemas...

 

Os dejo un enlace a mi web:

 

http://www.pescaramosca.es/3-material-de-montaje

 

Las subcategorias estan descuadradas... el nombre no soy capaza de centrarlo debajo de la imange de ellas, y no recuerdo como hacer mas grande la imagen de estas.

 

Gracias

Link to comment
Share on other sites
Revolver Newbie

Revolver

Posted
Posted

Hola. Creo que tienes que editar el archivo category.css y meterle un height.

.inline_list li {
    border-bottom: 1px dotted #CCCCCC;
    float: left;
    padding: 10px 0;
    width: 89px;
    height: 105px;
}

Mira como se me ha quedado a mi jugando con el Firebug

post-713877-0-16660500-1381316092_thumb.jpg

Link to comment
Share on other sites
Sergio Ruiz Newbie

Sergio Ruiz

Posted
Posted

Hola. Creo que tienes que editar el archivo category.css y meterle un height.

.inline_list li {
    border-bottom: 1px dotted #CCCCCC;
    float: left;
    padding: 10px 0;
    width: 89px;
    height: 105px;
}
Mira como se me ha quedado a mi jugando con el Firebug

attachicon.gifCaptura.JPG

 

 

En realidad, lo del height esta incluido en la guía que comento Nadie, al principio;

 

 

Revisa esta guía: http://mypresta.eu/en/art/developer/prestashop-subcategories-grid.html y si puedes deja la dirección de tu web

 

(Lo que pasa es que no se si se ha seguido) 

 

---

 

Por cierto ansulealflycaster si no sabes usar firebug, tienes un video aquí: http://www.prestashop.com/forums/topic/209203-uso-basico-de-firebug/

 

----

 

 

 

Este es el codigo como lo tengo ahora mismo:

 

 

{if $subcategory.id_image}

<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'subcat_default')|escape:'html'}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{else}

<img src="{$img_cat_dir}default-subcat_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{/if}

 

El nuevo tipo de imagen lo llame "subcat_default" 

 

Como tendria que modificar para que me los cogiera de este???

 

Gracias

Hola,

 

{if $subcategory.id_image}
<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'subcat_default')|escape:'html'}" alt="" />
{else}
<img src="{$img_cat_dir}default-subcat_default.jpg" alt=""  />
{/if}
  • Like 1
Link to comment
Share on other sites
Sergio Ruiz Newbie

Sergio Ruiz

Posted
Posted

Por cierto: http://www.pescaramosca.es/36-catalogos-de-moscas

 

¿Enormes las imagenes? ¿no?

 

En fin si quieres dejar las imagenes enorme y que no se junten los cuadros, pues los cuadros tambien tienen que ser enormes, por lo que en tu fichero:

http://www.pescaramosca.es/themes/default/css/category.css

Cambia esto:

.inline_list  li {
        padding: 10px 0;
        border-bottom: 1px dotted #ccc;
        float: left;
        width: 89px;
        heught: 105px
}

 ¿has puesto heught (jajajaj que fuerte (es height en todo caso xDD xD)?

 

 

por

.inline_list li {
padding: 10px 0;
border-bottom: 1px dotted #ccc;
float: left;
width: 256px;
height: 293px;
}
  • Like 1
Link to comment
Share on other sites
ansulealflycaster Newbie

ansulealflycaster

Posted
  • Author
Posted

Chicos, sigo igual de perdido... os pongo el codigo como lo tengo ahora mismo:

 

 

{if $subcategory.id_image}
           <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'subcat_default')|escape:'html'}" alt="{* {if $subcategory.description}{$subcategory.description}{/if} *}" {* width="{$mediumSize.width}" height="{$mediumSize.height}" *} />
{else}
 
<img src="{$img_cat_dir}default-subcat_default.jpg" alt="{* {if $subcategory.description}{$subcategory.description}{/if} *}" {* width="{$mediumSize.width}" height="{$smediumSize.height}" *} />
 
He puesto como comentrio lo que me dijisteis que quitara... Ahora las imagenes se ven muy grandes y cortadas a la mitad verticalmente....
Link to comment
Share on other sites
ansulealflycaster Newbie

ansulealflycaster

Posted
  • Author
Posted

 

Por cierto: http://www.pescaramosca.es/36-catalogos-de-moscas

 

¿Enormes las imagenes? ¿no?

 

En fin si quieres dejar las imagenes enorme y que no se junten los cuadros, pues los cuadros tambien tienen que ser enormes, por lo que en tu fichero:

http://www.pescaramosca.es/themes/default/css/category.css

Cambia esto:

.inline_list  li {
        padding: 10px 0;
        border-bottom: 1px dotted #ccc;
        float: left;
        width: 89px;
        heught: 105px
}

 ¿has puesto heught (jajajaj que fuerte (es height en todo caso xDD xD)?

 

 

por

.inline_list li {
padding: 10px 0;
border-bottom: 1px dotted #ccc;
float: left;
width: 256px;
height: 293px;
}

 

 

Ahora he logrado cuadrarlo,,,, jajaja, ya veo donde se controla el tamaño de los recuadros... ahroa como reduzco la imagen y el recuadro jejeje...

Link to comment
Share on other sites
Sergio Ruiz Newbie

Sergio Ruiz

Posted
Posted

Ahora he logrado cuadrarlo,,,, jajaja, ya veo donde se controla el tamaño de los recuadros... ahroa como reduzco la imagen y el recuadro jejeje...

 

Las medidas del tipo de imagen

subcat_default

que creastes en la pestaña Preferencias -> Imagenes, la tienes que reducir en dicha pestaña y despues regenerar las miniaturas de ese tipo si no las minis de las subcategorias no se te van hacer mas pequeñas

 

Despues para cuadrar los cuadros pues juegas con el width y height del .inline_list li 

Link to comment
Share on other sites
Sergio Ruiz Newbie

Sergio Ruiz

Posted
Posted (edited)

Por fin conseguido, 

 

¿Cómo puedo centrar el titulo de la subcategoria debajo de su imagen?

 

Gracias... Si no llega a ser por ti me hubiera vuelto locoooo de remateeee.....

 

Me acabo de hacer una chuleta para saber lo que tengo que modfiicar la proximavez que actualice...

 

Muy mal, el cambio en el css lo tienes mal. 

 

En tu fichero:

 

http://www.pescaramosca.es/themes/default/css/category.css

has puesto esto:

 

.inline_list  li {
        padding: 10px 0;
        border-bottom: 1px dotted #ccc;
        float: left;
        width: 130 px;
        height: 145 px;
}

no has puesto ni un ancho fijo ni una altura fijo. (Esto asi: 130 px esta mal, a que ponerlo junto width:130px; lo mismo con height 145 px mal, asi width:145px; bien)

 

En fin:

 

.inline_list li {
padding: 10px 0;
border-bottom: 1px dotted #ccc;
float: left;
width: 130px;
height: 167px;
overflow: hidden;
}
Edited by Sergio Ruiz (see edit history)
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Haz caso a mi compañero Sergio Ruiz, y sigue sus indicaciones.
 
Luego para centrar el texto, en tu fichero:
 

http://www.pescaramosca.es/themes/default/css/category.css

has puesto esto:
 

.inline_list  li .cat_name {
	font-weight: bold;
        font-size: 13px;
        clear: both;
        {* display: both; *} 
}

Pues déjalo así:
 

.inline_list li .cat_name {
font-weight: bold;
font-size: 13px;
clear: both;
display: block;
text-align: center;
height: 29px;
overflow: hidden;
}
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Veo que has realizado cambios, pero otra vez mallllllllllllllll

 

Vamos a ver en tu fichero:

http://www.pescaramosca.es/themes/default/css/category.css

Ahora has colocado esto:

.inline_list  li {
        padding: 10px 0;
        border-bottom: 1px dotted #ccc;
        float: left;
        width: 130 px;
        height: 145 px;
}

Dejalo asi:

.inline_list  li {
        padding: 10px 0;
        border-bottom: 1px dotted #ccc;
        float: left;
        width: 130px;
        height: 145px;
}

(Estas colocando espacios de mas) (Haz caso a Sergio Ruiz)

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Por cierto, se te ven juntas por que ya no tienes mas espacio por fila, o reduces el ancho de la imagen  en la pestaña preferencias -> imagenes y luego el width del .inline_list li o dejas tres productos por fila y aumentas el width del tipo de imagen en la pestaña preferencias -> imagenes y del .inline_list li

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

¿Que haria yo si fuera tu?

 

Iria a la pestaña Preferencias -> Imagenes y el tipo:

subcat_default

Lo dejaria con las medidas:

125 de ancho y 125 de alto

Despues recuerda regenerar las minaturas.

 

Despues iria a tu fichero:

http://www.pescaramosca.es/themes/default/css/category.css

y cambiaria esto:

.inline_list  li {
        padding: 10px 0;
        border-bottom: 1px dotted #ccc;
        float: left;
        width: 130px;
        height: 167px;
        overflow: hidden;
}

por esto

.inline_list li {
padding: 10px 0;
border-bottom: 1px dotted #ccc;
float: left;
width: 127px;
height: 167px;
overflow: hidden;
margin-right: 8px;
}

Despues, iria al fichero:

/themes/default/category.tpl

y cambiaria esto:

{foreach from=$subcategories item=subcategory}
				<li class="clearfix">

por esto

{foreach from=$subcategories item=subcategory name=cojones}
				<li class="clearfix {if $smarty.foreach.cojones.first}first_item{elseif $smarty.foreach.cojones.iteration%4 == 0}last_item_of_line{elseif $smarty.foreach.cojones.last}last_item{else}item{/if}">

--- (Lo de cojones no es por que este enfadado xDDD, es por que suelo escribir variables de forma extraña)

 

Despues en el fichero:

/themes/default/css/category.css

añadimos esto:

.inline_list li.last_item_of_line {
margin-right: 0px;
}
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Sigue las indicaciones http://www.prestashop.com/forums/topic/274170-problemas-configurando-subcategorias-en-cuadricula/?view=findpost&p=1415428 que te di al pie de la letra. 

 

 

----

 

Despues, ahí algunas cosas que no me gustan, en tu fichero:

http://www.pescaramosca.es/themes/default/css/category.css

Cambia esto:

.inline_list  li .img {
	  display:block;
          float: left;
          margin-top: 15px;
}

por esto

.inline_list  li .img {
	  display:block;
          float: left;
          margin-top: 2px;
}

---

 

Despues cambia esto:

.inline_list  li .cat_name {
	font-weight: bold;
        font-size: 13px;
        margin-right: 0px;
        clear: both;
        display: block;
        text-align: center;
        height: 29px;
        overflow: hidden;
}

por

.inline_list li .cat_name {
font-weight: bold;
font-size: 13px;
margin-right: 0;
clear: both;
display: block;
text-align: center;
height: 29px;
overflow: hidden;
padding-top: 7px;
}
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Poniendolo a 125 se seguian qedando en 3 subcategorias por fila, es decir 3 columnas, por eso lo cambie, para que entraran las 4

 

Claro, por que te falta añadir esto:

.inline_list li.last_item_of_line {
margin-right: 0px;
}

al final del

http://www.pescaramosca.es/themes/default/css/category.css

(Ya te lo comente en uno de los mensajes de arriba)

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Por cierto, no lo has modificado todo, ahora veo en tu fichero 

http://www.pescaramosca.es/themes/default/css/category.css

Esto:

.inline_list  li .img {
	  display:block;
          float: left;
          margin-top: 12x;
}

(mal escrito por que de x suelto no hace nada sera px en todo caso)

 

Y te dije que lo dejaras asi:

.inline_list  li .img {
	  display:block;
          float: left;
          margin-top: 2px;
}
Link to comment
Share on other sites
ansulealflycaster Newbie

ansulealflycaster

Posted
  • Author
Posted

 

Por cierto, no lo has modificado todo, ahora veo en tu fichero 

http://www.pescaramosca.es/themes/default/css/category.css

Esto:

.inline_list  li .img {
	  display:block;
          float: left;
          margin-top: 12x;
}

(mal escrito por que de x suelto no hace nada sera px en todo caso)

 

Y te dije que lo dejaras asi:

.inline_list  li .img {
	  display:block;
          float: left;
          margin-top: 2px;
}

 

 

No veo excatamente la diferencia que genera, pero ya lo he modificado... hay que hacerse caso del experto...xD...

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

No veo excatamente la diferencia que genera, pero ya lo he modificado... hay que hacerse caso del experto...xD...

 

xDDDD (Toda modificación se hace por algo xD)

 

Bueno,  (Por lo que veo mas o menos se ve bien) ¿no?

 

Damos el tema por cerrado ¿?

 

Guardate el category.css y el category.tpl para la proxima vez xD

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...