Poner imagen personalizada en el header de un modulo

[Camach]

Hola, tengo una plantilla para prestashop 1.5.3 que tiene los modulos principales personalizados mediante CSS, esos módulos tienen una cabecera común, en todos los modulos es la misma imagen la que hace de cabecera excepto el modulo de categorías que tiene la misma cabecera pero de otro color. Podeis ver la plantilla aquí ( http://addons.presta...emo/FO4931.html )

 

Me surgen 2 preguntas que van de la mano:

 

Pregunta 1.- ¿Cómo puedo personalizar la cabecera de cada uno de los módulos? Me he metido en el CSS del módulo de categorías y viene una línea de código en la que aparece la ruta de la imagen de la cabecera, si cambio esa ruta por otra cambia la imagen, perfecto para cambiar la imagen de ese módulo, pero los otros módulos tienen otra imagen (todos comparten la misma imagen) y viene descrita en el global.css, es decir, que si cambio la ruta de la imagen para poner otra imagen todos los módulos se ven afectados ¿cómo puedo hacer para que cada módulo tenga su propia cabecera? En el CSS de uno de ellos (el de carrito) viene también esa línea de código en el que apunta a una ruta, pero si cambio la ruta no ocurre nada, sigue cogiendo la imagen que diga el global.css.

 

(varias líneas de cogido dentro del global.css que afectan a las cabeceras, el archivo block_topbg.gif es la imagen de la cabecera de categorías y el block_topbg2.gif es la cabecera que comparten todo el resto de modulos:

 

.myaccount .title_block {

background: url("../img/block_topbg.gif") no-repeat scroll center top transparent;}

.block .title_block {

background: url("../img/block_topbg2.gif") no-repeat scroll center top transparent;

color: #FFFFFF;

font-size: 13px;

font-weight: bold;

padding: 7px 0 12px 11px;

text-shadow: 1px 1px #333333;

text-transform: capitalize;

}

 

 

(este es el css del modulo carrito, si cambio algo suele afectar a la parte carrito que veis en la parte superior de la web pero no al modulo carrito que aparece en la columna derecha de la web, no lo comprendo porque los dos son el modulo carrito y se ven los mismos productos pero parecen no verse afectados a la vez por los cambios que hago en el css)

 

#left_column #cart_block, #right_column #cart_block {

}

#cart_block h4{ background: url("../../../img/block_topbg2.gif") no-repeat scroll center top transparent;}

#cart_block h4 a{ }

#header #cart_block .title_block {

display: none;

}

#header #cart_block {

background: none repeat scroll 0 0 #F5F7EE;

border: 1px solid #DDDDDD;

box-shadow: 0 1px 0 #DDDDDD;

display: none;

height: auto;

position: absolute;

right: 10px;

top: 115px;

width: 210px;

z-index: 1001;

}

 

Pregunta 2.- He añadido el módulo de login a la columna derecha de la web pero concretamente a ese módulo no se le aplica la imagen de cabecera que comparten todos los demás (excepto modulo de categorías como ya dije antes) y no sé cómo añadírsela (adjunto imagen). Sí he observado que ese modulo no aparece en la carpeta modulos de la plantilla por lo tanto entiendo que no lo han personalizado los creadores de la plantilla y está cogiéndolo de la carpeta por defecto de prestashop que sí tiene una carpeta "modules\blocklogin" y su propio blocklogin.css dentro.

 

(esto es todo lo que viene en el blocklogin.css)

 

/* block mylogin */

#left_column div.mylogin, #right_column div.mylogin { background: #f6dce8 url('img/block_footer_myaccount.jpg') no-repeat bottom left }

div.mylogin h4 { background: #971d58; text-transform: capitalize;}

div.mylogin h4 a, div.mylogin h4 { color: white }

div.mylogin, div.mylogin a { color: #5d0630 }

div.mylogin ul.bullet { margin-top: 0.6em }

div.mylogin ul.bullet li { /*background-image: url('img/bullet_myaccount.gif')*/ }

div.mylogin ul.bullet .icon { display: none }

div.mylogin p.logout { padding: 0.3em 0 0.3em 2em }

div.mylogin p.logout, div.mylogin p.logout a { color: #dd2a81 }

div.mylogin p.logout a { text-decoration: underline }

div.mylogin p.logout a:hover { text-decoration: none }

div.mylogin .block_content { background: #f6dce8 url('img/block_bg_myaccount.jpg') repeat-x bottom left; border-left: 1px solid #f6dce8; border-right: 1px solid #f6dce8; }

/*bloque milogin*/

#bloquelogin div.block_content{ padding-top: 10px;}

#bloquelogin p{ margin-bottom: 10px; padding:0;}

#bloquelogin label{font-size: 1.1em;}

.account_input { margin-left: 0; width: 14em; }

#bloquelogin p.submit input{margin-right: 10px; float: left;}

#bloquelogin a{color: #5d0630}

 

Imagino que si alguien me explica como forzar a los módulos a coger una imagen para su cabecera me solucionará los 2 problemas con una misma solución.

 

Muchas gracias.

[Sergio Ruiz]

Si quieres tener una imagen de fondo distinta para el modulo de categorias y otra para el modulo de informacion (por ponerte un ejemplo

 

El bloque categorias, tiene su propio css en la plantilla que dices, en el fichero:

 

http://prestashop-demo.net/PRS04/PRS040095/themes/PRS040095/css/modules/blockcategories/blockcategories.css

 

Aqui:

 

#categories_block_left h4 {
background: url("../../../img/block_topbg2.gif") no-repeat scroll center bottom transparent;
}

 

Para el bloque de informacion, del lateral seria:

 

#informations_block_left_1 h4 {
background: url('ruta_de_chimagen');
}

 

Parael bloque de nuevos productos del lateral derecho,

 

#new-products_block_right h4 {

background:url('ruta_imachen');
}

 

ect...

 

ect..

[Camach]

Gracias Rubalcaba, menuda rapidez en contestar.

 

¿Ese cambio pondría un fondo sólo en la cabecera del modulo en cuestión o se aplicaría el fondo también al resto del modulo?

 

No lo puedo probar ahora porque están realizando tareas de mantenimiento en el servidor.

 

Gracias de nuevo y saludos.

[Sergio Ruiz]

Gracias Rubalcaba, menuda rapidez en contestar.

 

¿Ese cambio pondría un fondo sólo en la cabecera del modulo en cuestión o se aplicaría el fondo también al resto del modulo?

 

No lo puedo probar ahora porque están realizando tareas de mantenimiento en el servidor.

 

Gracias de nuevo y saludos.

 

Lo que te he dicho es para un fondo diferente a cada encabezado de los que te he comentado, es solo un ejemplo.

 

¿O lo quieres general para todos?

[Camach]

Un fondo diferente en cada encabezado porque en el modulo carrito quiero poner el dibujo de un carrito, en el modulo información el dibujo de una ( i ), en el modulo de login el dibujo de una llave.... y asi sucesivamente.

 

Entiendo que la solución que me has dado es precisamente para conseguir lo que necesito.

 

Si funcionara supongo que habría una excepción y es el módulo carrito, como comentaba el módulo carrito tiene una particularidad y es que los cambios que hago en su CSS no se ven reflejados en el modulo de la columna derecha sino que se ven reflejados en el modulo carrito de la cabecera de la web (en realidad es el mismo modulo porque cuando añades artículos al carrito y pones el puntero del raton encima del dibujo de la cesta que hay en la cabecera de la web se despliega un cuadro con todos los artículos del carrito, aunque en la demo creo que ese despliegue no funciona).

 

Creo que probé hace varios días (porque llevo peleándome con eso más de 1 semana) a cambiar esta línea del css del modulo carrito de la plantilla, cambié ese "none" por otra cosa que ya no recuerdo y que encontré por internet pero entonces apareció la imagen de cabecera en el modulo carrito de arriba (el de la cabecera de la web) cuando ponía el puntero del raton encima del carrito, sin embargo no afectaba en nada a la cabecera del modulo carrito de la columna derecha. No sé si me explico porque es un poco difícil para mí transmitir el problema con mis pocos conocimientos.

 

"#header #cart_block .title_block {

display: none;

}

 

 

Gracias Rubalcaba.

[Camach]

Hola, he estado intentando usar esa líneas de código pero no he conseguido que funcionen, las he pegado en cada uno de los CSS de cada módulo poniendo la ruta correcta de imagen pero parecen no verse afectados por el cambio.

 

También he probado a hacer combinaciones con la linea de código del módulo categorias al que sí parece funcionarle esa línea que indica el fondo de la cabecera del módulo, lo que he hecho ha sido añadir al código de Rubalcaba cosas como ".title_block" a continuación de "#new-products_block_right h4", he probado a quitar ese "h4", he probado a pegar las lineas de código en el global.css por si ese css tenía prioridad, etc etc etc y nada.

 

Os agradecería que por favor me indiqueis como forzar a un módulo a tener cierta imagen en su cabecera, adjunto un fichero .zip con los archivos que creo que están implicado en este caso, he mantenido el arbol de carpetas para que sea más fácil de entender, el módulo blocklogin no está dentro de la plantilla supongo que no lo personalizaron y por eso nisiquiera se ve la cabecera en la web.

 

Para haceros una idea de la situación os dejo aquí el enlace de la tienda, la tengo normalmente cerrada hasta que la termine pero la mantendré unos días abierta para este tema.

 

Gracias!

 

http://www.papelyco.es

https://www.dropbox.com/s/y3qywdf8xxe2jsm/papelyco_es.zip

Edited May 25, 2013 by Camach (see edit history)