[SOLUCIONADO] Poner una imagen por defecto en subcategorias.

[Arakiss]

Buenas tardes,

 

Tal como reza el titulo de mi post me gustaría poner una imagen "por defecto" para las sub-categorías algo así como una cajita y dentro de esas cajitas quiero que aparezcan mis imágenes,me sorprende que esta feature no este implementada por defecto en prestashop :-/ .

 

He estado indagando un poco viendo el archivo category.css de mi tema y me imagino que en un principio tendría que añadir una sentencia CSS a este trozo de código :

 

 

#subcategories ul li a.catimg img {

background: white;

padding: 4px;

border: 1px solid #ECBD5B;

}

 

 

Concretamente modificar esa linea mejor dicho , por esta otra :

 

 

background: url("../img/mi_imagen.png") no-repeat;

 

Pues bien lo he probado he sustituido la linea y no he visto cambios ... indagando un poco mas me di cuenta de que hay que modificar el archivo category.tpl no se si tendría que añadir algún div en esta lineas para meter dentro las imágenes :

 

 

<div class="align_center">

<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />

 

 

Estoy un poco perdido si alguien pudiera echarme una mano se lo agradecería :-)

Edited October 1, 2012 by Arakiss (see edit history)

[lunaroja]

¿Quieres poner un fondo en las categorías cuando se muestra el listado de productos?

[lunaroja]

Si es un fondo para el cuadro que muestra el listado de productos yo lo hice modificando el global.css con esto:

 

#center_column {

background: url('../img/block_category_bg.jpg') repeat;

[nadie]

Buenas tardes,

 

Tal como reza el titulo de mi post me gustaría poner una imagen "por defecto" para las sub-categorías algo así como una cajita y dentro de esas cajitas quiero que aparezcan mis imágenes,me sorprende que esta feature no este implementada por defecto en prestashop :-/ .

 

He estado indagando un poco viendo el archivo category.css de mi tema y me imagino que en un principio tendría que añadir una sentencia CSS a este trozo de código :

 

 

#subcategories ul li a.catimg img {

background: white;

padding: 4px;

border: 1px solid #ECBD5B;

}

 

 

Concretamente modificar esa linea mejor dicho , por esta otra :

 

 

background: url("../img/mi_imagen.png") no-repeat;

 

Pues bien lo he probado he sustituido la linea y no he visto cambios ... indagando un poco mas me di cuenta de que hay que modificar el archivo category.tpl no se si tendría que añadir algún div en esta lineas para meter dentro las imágenes :

 

 

<div class="align_center">

<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />

 

 

Estoy un poco perdido si alguien pudiera echarme una mano se lo agradecería :-)

Me imagino que lo que quieres que la imagen de la subcategorías, tenga como un "marco" o ¿no?

[Arakiss]

Me imagino que lo que quieres que la imagen de la subcategorías, tenga como un "marco" o ¿no?

 

Efectivamente eso es lo que necesito un "marco" ... creo que normalmente lo llaman bullet si mal no recuerdo pero no me hagas mucho caso estoy muy perdido ... el desarollo web no es lo mio , lunaroja gracias por tu sugerencia pero no es exactamente lo que busco.

[Arakiss]

UP! ^^

[lunaroja]

No me acabo de enterar de si quieres una imagen, un marco o una imagen con marco.

 

Si es lo último puedes probar esto en global.css

 

#center_column {

background: url('../img/afoto.jpg') repeat;

width: 750px;

border: solid 3px #ffffff;

margin-left: 10px;

overflow: hidden

}

 

Yo he quitado la columna de la derecha, por eso la central es tan ancha.

 

Espero haber acertado esta vez, jejejeje.

[nadie]

¿Es esto lo que quieres: http://www.prestasho...-block-bullets/ ? (Revisar enlace)

[lunaroja]

Ah, lo que quieres es justo lo contrario, con la imagen alrededor y liso en el centro. Ya me parecía que eso que he puesto yo era muy sencillo, era raro que no lo consiguieses hacer.

[Arakiss]

Hola,

 

Gracias a los dos por vuestra respuesta voy a probar lo que me ha indicado nadie a ver si logro arreglar ese problema que tengo pero tampoco se si es lo que busco exactamente,es que ya no se como explicarlo ^^ ...

 

Lo que yo quiero es que por defecto si el usuario no incluye una imagen para esa sub-categoria se vea "algo" , y ese algo quiero que sea como una especie de marco ... por lo tanto en el momento que el usuario introduzca una imagen para esa subcategoria , DENTRO de ese marco se vera dicha imagen , a lo mejor se entiende ahora mejor ^^ .

 

Gracias a los dos , ayer me di cuenta de que en mi post inicial la linea que comente no era la acertada para insertar un marco era otra,con esa si funciona pero a medias se me ve solo parte de la imagen y encima de ese marco se me ve la imagen de la subcategoria , seguiré informando como va el tema , gracias !!!

 

Un saludo

[Arakiss]

A lo mejor con la imagen se entiende mejor :-) , es solo un ejemplo de "marco".Digamos que esta imagen la quiero por defecto en las subcategorias , incluya o no el usuario una imagen para cada subcategoria ese marco se vera siempre , Y DENTRO DE EL aparecerá la foto del usuario.

[nadie]

A lo mejor con la imagen se entiende mejor :-) , es solo un ejemplo de "marco".Digamos que esta imagen la quiero por defecto en las subcategorias , incluya o no el usuario una imagen para cada subcategoria ese marco se vera siempre , Y DENTRO DE EL aparecerá la foto del usuario.

 

¿En cada imagen de la subcategoría independientemente?

[Arakiss]

Pongo otra imagen a lo mejor se entiende ahora lo que necesito.Como podéis ver en la imagen es un simple marco y dentro de ese marco esta mi producto ... pues necesito ese mismo pero subcategorias , porque ese marco es del modulo de productos destacados.

 

Por lo tanto lo que necesito es solo eso , que si el usuario no quiere insertar una imagen para dicha subcategoria se vera ese marco , que mas tarde decide insertar una imagen para esa subcategoria aparecerá la imagen dentro del marco , solo eso ^^ ... es que ya no se como expresarlo igualmente me guiare por el modulo de productos destacados para ver como muestra el dicho marco.

 

Un saludo y gracias por ayudarme se que me explico mal :-/

Edited October 2, 2012 by Arakiss (see edit history)

[nadie]

Si es por cada imagen de la subcategoría independientemente, te hago un ejemplo basado en la versión 1.4 de prestashop, con la plantilla por defecto antigua.

 

Busco esto en el category.css

 

 

body#category #subcategories li {
height: 136px;
width: 108px;
margin-right: 3px;
}

 

Y le metes el background de la imagen y lo ajustas a las medidas.

[Arakiss]

Muchas gracias es para la versión 1.4 , en cuanto termine de comer me pongo con ello :-)

[nadie]

Muchas gracias es para la versión 1.4 , en cuanto termine de comer me pongo con ello :-)

 

Con la idea que te he comentado, le colocarias un background a los "li", de las subcategorías, como te adjunto en la siguiente imagen:

 

 

No se si eso es lo que quieres )

[Arakiss]

No he podido probarlo aun,tuve que salir ... pero tengo una pregunta ese marco negro lo añades mediante esta sentencia verdad:

 

 

margin-right: 3px;

 

Lo digo mas que nada porque por defecto ya hay un marco en la subcategorias y se ve super feo solo que no es tan ancho y visible como este , pero bueno ya probare en cuanto llegue a casa , gracias mil !!

[nadie]

No he podido probarlo aun,tuve que salir ... pero tengo una pregunta ese marco negro lo añades mediante esta sentencia verdad:

 

 

margin-right: 3px;

 

Lo digo mas que nada porque por defecto ya hay un marco en la subcategorias y se ve super feo solo que no es tan ancho y visible como este , pero bueno ya probare en cuanto llegue a casa , gracias mil !!

 

Hola, el css que te pegue es el que me venia por defecto... (Te di el área en cuestión, donde creo que debes tocar)

 

El tocarlo depende de ti par ajustar los parametros, igual que el añadir el backgorund..

[Arakiss]

Ok estupendo , muchas gracias voy a probarlo en cuanto llegue a casa :-)

[nadie]

Ok estupendo , muchas gracias voy a probarlo en cuanto llegue a casa :-)

Estaré esperando el saber como te ha ido !

 

Estoy muy preocupado )

[Arakiss]

Hola,

 

Ya estoy en casa ... por fin ^^ , he intentado buscar esa parte de código en mi archivo pero no la encuentro te copio/pego la mía entera que es corta :

 

 

/* category.tpl */
body#category #subcategories   {
margin-left: 1px; /*was 5px in the original*/
 margin-bottom: 20px;
}
body#category #subcategories ul li {
margin-right: 1px; /*was 10px in the original*/
 margin-top: 10px;  
 width: 210px; /*was 123px in the original*/
}

#subcategories ul li a {
display:block;
font-size:1.2em;
padding-left:25px;
text-align:left;
}

#subcategories ul li a.cattitle {
height: 35px;
}

[b]#subcategories ul li a.catimg {
padding-top: 0px;
}[/b]

#subcategories ul li a.catimg img  {
background: white;
padding: 4px;
border: 1px solid #ECBD5B;
}

div.cat_desc { margin: 2em 0.5em;
line-height: 1.7em; }
body#category div#subcategories .inline_list a img { display: inline }
#category img#categoryImage { margin-top: 1em }

 

Funciona cuando toca esa parte en negrita del código añadiendole mas parámetros , del background y el ancho/alto ... pero se ve fatal y ahora me ha descuadrado todo el esquemas de las subcategorias :-/ mírate la imagen y veras como me pone los marcos por detras de la imgen pero se ve fatal :-/ , si quieres claro ^^

Edited October 2, 2012 by Arakiss (see edit history)

[nadie]

Hola,

 

Ya estoy en casa ... por fin ^^ , he intentado buscar esa parte de código en mi archivo pero no la encuentro te copio/pego la mía entera que es corta :

 

 

/* category.tpl */
body#category #subcategories   {
margin-left: 1px; /*was 5px in the original*/
 margin-bottom: 20px;
}
body#category #subcategories ul li {
margin-right: 1px; /*was 10px in the original*/
 margin-top: 10px;  
 width: 210px; /*was 123px in the original*/
}

#subcategories ul li a {
display:block;
font-size:1.2em;
padding-left:25px;
text-align:left;
}

#subcategories ul li a.cattitle {
height: 35px;
}

[b]#subcategories ul li a.catimg {
padding-top: 0px;
}[/b]

#subcategories ul li a.catimg img  {
background: white;
padding: 4px;
border: 1px solid #ECBD5B;
}

div.cat_desc { margin: 2em 0.5em;
line-height: 1.7em; }
body#category div#subcategories .inline_list a img { display: inline }
#category img#categoryImage { margin-top: 1em }

 

Funciona cuando toca esa parte en negrita del código añadiendole mas parámetros , del background y el ancho/alto ... pero se ve fatal y ahora me ha descuadrado todo el esquemas de las subcategorias :-/ mírate la imagen y veras como me pone los marcos por detras de la imgen pero se ve fatal :-/ , si quieres claro ^^

 

Como te dije yo lo que te he dicho esta en base a la plantilla por defecto, si tu me proporcionas la url exacta de tu web, podre mirartelo mejor.

[nadie]

Por cierto en tu codigo si veo esa parte:

 

body#category #subcategories ul li {
margin-right: 1px; /*was 10px in the original*/
 margin-top: 10px;
 width: 210px; /*was 123px in the original*/
}

[Arakiss]

Esa parte la he utilizado para retocar el tamaño de las cajas de las subcategorias ... te paso la URL en un PM.

[nadie]

Esa parte la he utilizado para retocar el tamaño de las cajas de las subcategorias ... te paso la URL en un PM.

No me ha llegado el privado )

[Arakiss]

Revisa ahora por favor,se me paso indicarte la URL ... sino te lo vuelvo a mandar.

[nadie]

Revisa ahora por favor,se me paso indicarte la URL ... sino te lo vuelvo a mandar.

He visitado tu web y aquí puedes poner el background sin problemas.

 

body#category #subcategories ul li

 

 

Pero luego la imagen del producto la tienes que centrar aquí:

 

#subcategories ul li a.catimg img

[Arakiss]

Tu perro ? jajajaja vale ahora voy a probarlo ^^ , muchas gracias !

[Arakiss]

Hola,

 

Perdona por el retraso,funciona con tu ultima aportación Víctor, muchísimas gracias solo me queda retocar la ultima linea para hacer que las imágenes entren dentro del marco y ya esta ,eres un crack como siempre ... se te echara de menos cuando no estes por este oscuro mundo ^^

 

Un abrazo , espero poder invitarte a una copa alguna vez :-)

[nadie]

Hola,

 

Perdona por el retraso,funciona con tu ultima aportación Víctor, muchísimas gracias solo me queda retocar la ultima linea para hacer que las imágenes entren dentro del marco y ya esta ,eres un crack como siempre ... se te echara de menos cuando no estes por este oscuro mundo ^^

 

Un abrazo , espero poder invitarte a una copa alguna vez :-)

Un placer ayudarte y servirte!

 

Si das el tema como solucionado, edita el titulo del tema, editando el primer mensaje, pulsando en editar, y después en "Usar editor completo", añadiendo la palabra "Solucionado" al titulo, esto ayudara, a mantener una mayor organización en el foro.

 

Un saludo y recuerda que estaremos en el foro, para guiarte por este mundo oscuro y tenebroso.