Tags
Related Posts
Share This
Personalizar Estilos CSS en Prestashop
Se puede cambiar bastante la apariencia final de la plantilla por defecto que trae incluído Prestashop. Con editar unos pocos estilos en el Global.css del theme original, podemos crear un tema personalizado a nuestro gusto. A continuación detallo los principales estilos para modificar. El número de línea se corresponde con la versión 1.3.
Editar el contenedor global de los productos destacados (línea 963):
/* Special style for block products in center column */
#center_column .products_block { border: none }
#center_column .products_block { color: #595a5e }
#center_column .products_block h4 { line-height: 1.3em }
#center_column .products_block .block_content {
background: #ffffff none;
padding: 0
Para cambiar el color grisáceo que aparece en el fondo de los productos destacados de la categoría inicio (página principal), hay que editar la línea 971 (hoover) y 974 (fondo):
#center_column .products_block ul li:hover { background-color: #bdc2c9 }
#center_column .products_block ul li {
float: left;
background-color: #d0d3d8;
margin-top: 0;
padding: 0 0 1px;
width: 133px;
border-right: 1px solid white;
border-bottom: 1px solid white
Editar la apariencia del listado de productos por categorías, fabricantes, etc., en la línea 1409:
/* product-list.tpl */
ul#product_list { margin-top: 2em; list-style-type: none }
ul#product_list li {
background: #ffffff;
border: solid 1px #d0d3d8;
padding: 6px;
min-height: 130px;
height: auto;
clear: both;
margin-bottom: 0.3em
Modificar el contenido de los “blocks” o cajas de los módulos laterales (categorías, fabricantes, etc.) en la línea 852:
div.block h4 a { color: #374853 }
div.block ul { list-style: none }
div.block ul.tree li { padding-left: 1.2em }
div.block a:hover { text-decoration: underline }
#left_column div.block .block_content a.button_large,
#right_column div.block .block_content a.button_large { margin: 0 0 0 -3px }
div.block .block_content {
border-left: 1px #d0d3d8;
border-right: 1px #d0d3d8;
padding: 0 0.7em;
background: #EEF3F9 url(‘../img/block_bg.jpg’) repeat-x bottom left;
min-height: 16px
buenas tardes, deseo poder cambiar la apariencia del fondo de mi pagina, en vez de q sea un color quiero poner una imagen o una foto en fondo de pantalla…como puedo hacer eso, cuales son los pasos a seguir??
gracias
Hola Pierre.
Por lo que veo, tu página está hecha con Prestashop. Para cambiar el fondo de una página de Prestashop, has de editar el CSS del “theme” o plantilla que estés utilizando. Se encuentra en themes/nombredetutheme/css.
Una vez dentro, busca el fondo de cada una de las secciones que quieras cambiar el fondo (header, footer, body…).
Recuerda hacer siempre una copia de seguridad antes de tocar nada…
Suerte!
Hola Jesús,
Estoy elaborando una web en Prestashop y me gustaría saber como hacer para poder tener varios css y que según una serie de condiciones se ejecute uno u otro.
Por ejemplo si ejecuta la web desde un dispositivo movil o si ejecuta la web desde un determinado navegador.
Gracias.
Interesante. Nunca me lo había planteado. Supongo que habrá que editar uno a uno los tpl que quieras alternar con otro CSS… No sé…
Hola Jesus, quisiera modificar el espacio que queda entre los bloques y el borde de pagina pero no doy con la tecla adecuada.
A ver si me puedes echar una mano.
la direccion jmtiendaonline.com
Saludos y gracias
Es lo mismo para prestashop 1.4?
No lo se.
Todavía no he actualizado…
Hola amigo, queria consultarte si sabes como puedo cambiar la moneda de los productos, de €(euros) a $(pesos), ya que creo que tengo que modificar el codigo y no encuentro donde esta. desde ya muchisimas gracias
Creo que en el backend hay un módulo para cambiar la moneda, sin tener que tocar código…
wenass tengoo los dos laterales puestos con imagenes pero en el centro no tengo ningun color megustaria poner en la cavezeraa algun color ¿komo lo aria sin tocar las imajenes de los lados?y en ke carpeta lo aria? (prestasohp)
saludos
quiero añadir un div cambiando el header.tpl y la versión 1.4 no deja. he leido que hay que cambiar primero algo del backoffice, sabes que hay que cambiar?
Todavía no he probado la 1.4…
jejeje todos te preguntamos por la version 1.4
Hola!!!
¿Me gustaria que los articulos en productos destacados (home) tuvieran un enlace (que ya lo tiene) con la etiqueta h2?? que archivo o archivos debo tocar?? global.css??, product.tpl??
llevo una semana y no encuentro solución…
gracias por compartir información…
un saludo
Hola,
Gracias por tu tutorial. Solo tengo una duda, ¿Desde donde hago estos cambios? ¿desde mi unidad c?¿con dreamweaber?
Gracias.
Has de hacerlo en el fichero CSS de tu web. Para ello descárgate el CSS y edçitalo en local con un editor, bloc de notas, Dreamweaver…
Hola!!!
Que bien que haya gente como tu dispuesta a ayudar a los que estamos más que perdidos como yo.
Me he comprado un temple de prestashop y resulta que mi logo.png aparece con fondo blanco. ¿Sabes por qué?
En header.tpl tengo esto:
{$HOOK_TOP}
He intentado cambiar lo de jpg por png pero no hay resultados.
Un saludo y gracias,
Iratxe.
Hola.
Si es un logo en PNG, una de dos: o bien tiene el fondo blanco, o bien tiene el fondo trasparente y la página en blanco. Ante ello, se vería en blanco.
No obstante, si has comprado el template, no dudes en pedir ayuda al soporte de la plantilla. Ellos son expertos en dicho diseño y seguro que pueden ayudarte mejor que otra persona. Yo he solicitado en varias ocasiones ayuda a los foros oficiales de las plantillas, y el trato y respuesta siemrpe ha sido excelente. Suerte!!
Gracias Jesús. He quitado el fondo blanco que lo tenía oculto pero era blanco y lo he guardado otra vez en png.
El resultado es el mismo. He pedido ayuda al soporte tecnico pero no me dan una respuesta que me sirva. Me piden mi ftp y yo no tengo así que, no nos entendemos.
Gracias de todas formas. Resultas de gran ayuda.
Un saludo, iratxe.
Lo encontré!!!!!
Cómo conseguir cambiar el logo.png de la cabecera a trasparente.
Solo tienes que ir a la página de tu prestashop/preferencias/rendimiento/ forzar compilación—-SI.
A partir de ahora todos los cambios tpl que hagas se verán en tu pág. Cambia imagen jpg por png y listo!!!
Te colocas sobre lo que quieres cambiar en tu página, clickas botón de la drcha e inspeccionas elemento. Te aparece abajo el cÓdigo HTML, botón de la drach editar.
Yupppiii!!! Por fín!!!!!
Vaya!! Fallo mío… Daba por hecho que tenías activado el ‘forzar la compilación’…
Lo siento. Una vez que hayas visto que funciona, vuelve a deshabilitarlo.
Solo se habilita para estos casos de desarrollo. Tras ello, no tiene sentido tenerlo activado ya que ralentiza mucho la carga de la página al tener que compilar cada tpl en cada solicitud.
Me alegro de que lo hayas logrado.
Hola compañero lo primero es felicitarte por el tiempo que le dedicas a este tema, bueno al grano mi pregunta es como puedo colocar una imagen gif que me separe la parte superior de la de columnas
Tengo el tema que viene por defecto. y no se en que archivo esta
Hummm… Buena pregunta. Nunca me lo había planteado…
Imagino que en el header.tpl o bien en el style.css.
Buenas, me preguntaba si sabrías ayudarme porque estoy intentando modificar el template original de prestashop de 3 columnas a 2 columnas, pero no encuentro la forma de hacerlo. Sabrías decirme cómo?
Gracias.
Hola Jesus, quiera hacerte dos preguntas, 1º- quiero cambiar el color de fondo de mi tienda, no el fondo de pantalla, si no el fondo que incluye los bloques el logo, los productos testacados etc.
Y la segunda como haga para cambiar el color de los titulos de los bloques, como ser: Categorias informacion etc… gracias por la manos que nos das
Hola, me podrian decir que programa o aplicacion usais para poder hacer los cambios de diseño de los css.. gracias
Notepad y, a veces, dreamweaver.
Hola!
gracias por la información, la verdad me sorprende que prestashop no deje modificar el tema de forma mas facil o editar las css desde el navegador como por ejemplo wordpress. Otros CMS de tiendas online como magento funcionan igual a la hora de modificar el aspecto del diseño?
Un Saludo
Buenas a todos, bueno he estado mirando por el foro y probando sin éxito unas modificaciones que quiero realizar en un témplate que he comprado recientemente Electronics lo pueden ver en http://livedemo00.template-help.com/prestashop_34918/ y pido alguna ayuda que es bien recibida.
*En este template me gustaría cambiar las opciones del menu que pone en la parte superior por otras
*Por otra parte me gustaría cambiar el tamaño de la columna central manteniendo el tamaño de las columnas laterales
* Y por último el botón de añadir al carro apenas se ve por lo que estaría interesado en cambiar el color o cambiar el color del recuadro donde pone el precio y el botón para que resalte el color que tiene.
Yo seguiré indagando y cualquier cosa que vaya consiguiendo sobre este template lo ire comentando.
Gracias…