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…
Que tal Jesus, quisiera saber en que direccion encuentro la imagen del favicon por defecto de prestashop para poder cambiarla, quiza tu puedas ayudarme? gracias de antemano.
En los ajustes, preferencias, diseño, temas/plantillas.
Hola Jesús! Soy nueva con esto del Prestashop. Me he instalado la tienda y estoy empezando a hacer cambios, añadir productos, fotos… Quiero cambiar el color del fondo. Gracias a tu web sé que tengo que modificar el código ccs pero he leído por ahí que antes de modificar nada en el original hay que hacer una copia, ya que si se modifica el original directamente luego dará problemas a la hora de actualizar la versión del prestashop… Me podrías decir cómo hacer esa copia y dónde guardarla?? Si la original quedara en la misma carpeta, cómo sabe prestashop cuál utilizar?? Espero que me puedas ayudar. Gracias!
El fondo se modifica en el CSS de tu theme o template. EN la plantilla, vamos. Para hacer una copia de seguridad de la misma, acceder por FTP y copia el directorio de tu plantilla, que está dentro de \themes.
Suerte!
Hola Jesus, queria preguntarte como puedo hacer para cambiar el aspecto de un block?, es decir tengo un blor cuadrado con un encabezado en gris y unas listas que cierrar el cuadro y quiero poner otro que es un dibujo.. espero haberme explicado bien, gracias
Editando el CSS de ese template… Pero lo palicará sobre todos los bloques. Tendrías que aplicarlo sobre el CSS de ese módulo. Suerte.
Gracias de antemano.
En la plantilla MATRICE de Prestashop, hay cuatro textos aleatorios en la página de inicio («…Lorem Ipsum…»). Quiero cambiar el texto, pero no lo consigo ni por Front Office, Back Office ni FTP.
Sin este cambio no puedo lanzar la web, y llevo varios días sin conseguirlo.
saludos
He accedido a tu sitio y no veo esos textos de ejemplo… Imagino que ya lo has logrado…
Hola Jesus estoy intentando cambiar el color de precios de este theme001 pero no puedo entre al ccs.global y a Special style for block products in center column pero no lo encuentro alli . He logrado cambiar las etiquetas que ahora dicen en el homefeatured +info agregar pero se ven en blanco y se transparentes en el fondo actual que es celeste y me gustaria que al menos esta apareciera en negro . Tendrias una idea donde debo tocar el ccs de mi theme? Gracias de antemano . German
HOLA QUE TAL? TENGO UNA PREGUNTA A VER SI TU ME PUEDES AYUDAR… Y BUENO ANTES DE NADA FELICITARTE POR ESTA LABOR TAN BUENA QUE ESTAS HACIENDO… NECESITO COPIAR LA BASE DE DATOS DE MI TIENDA A OTRA TIENDA TAMBIEN EN PRESTASHOP… PERO NO SE COMO HACERLO… NECESITO PASAR LA BASE DE DATOS PERO SIN CAMBIAR EL ASPECTO DE LA OTRO TIENDA, ES DECIR QUE LUEGO AGREGO PRODUCTOS EN UNA Y COPIO LA BASE DE DATOS A LA OTRA PARA ACTUALIZARLA… SABRIAS QUE TENGO QUE HACER PARA LOGRARLO? TE AGRADEZCO DE ANTEMANO TU AYUDA… SALUDOS…
Buenas me he pegado 12 horas intentando cambiar el logo de la tienda a un png transparente, he hecho de todo, modificar el header.tpl, un tutorial que he visto por varias webs de modificar cambiando unas lineas de codigo en img-header.php con un gif transparente… mil cosas, modulos que lo hacen automaticamente y más cosas, me he vuelto loco, seguia transformando a jpg… al final llegue aquí y la solucion la lei de IRATXE: ella comenta «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.»
Y FUNCIONAAAAAAAAAAAAAAA!!!! millones de gracias IRATXE!
Hola Jesus, ando buscando un programador para hacer una modificación, sabes de alguien que me puedas recomendar?
gracias
Mándame un correo (info @ jesusherrero.com) -quita los espacios- y detállame qué es lo que quieres.
hola como puedo cambiar el color rosa en la hoja que confirma el pedido que estoy comprando, donde hago eso saludos y gracias.
Marce
Mi pregunta es como cambiar los encabezados de las secciones de la plantilla por defecto de prestashop. Al no tener un codigo html no puedo cambiar directamente con dreamweaver, los css los controlo perfectamente cada uno ( eso creo yo, tengo un curso avanzado de css y html) no encuentro cuales son los archivos que llevan el codigo. Esto se hace desde el gestor o a pelo.
Hola, Jesús!
Muy buena la información! Pero a mí me surge una pregunta: ¿cuál sería la forma de traducir una imagen que está en CSS? Me refiero a la cadena de código que se necesitaría.
¡Gracias!
Buenos días Jesús:
Primero muchas gracias por ayudarnos y la segunda es que tengo varias preguntas:
¿cómo se cambia el color de las letras y el tamaño?
¿cómo se cambia el tamaño de la barra de inicio?
¿donde se cambia el color del carrito?
¿en la parte de abajo de la página donde normalmente van las condiciones legales, se puede cambiar el color y poner más datos?
¿se puede poner diferentes logos en contactos en favoritos es que se ve muy pequeños?
Son muchas preguntas lo siento, mi página la estoy realizando en prestashop, luego tengo otro problema que no se si me lo podrás resolver, resulta que cuando pongo en google osmoclick me sale en un principio inmoclick, ¿qué puedo hacer?
Muchas gracias 🙂
Hola Jesús, tengo un problema y llevos dos días liao con ello y buscando soluciones y no encuentro forma, no sé si tu me puedes echar una mano.
En la página de arriba realizada en prestashop, he modificado el archivo global.css, para cambiar el formato de un boton, al hacer eso se me ha desconfigurado la página, cuando la vi, volvi a dejar el codigo como estaba, pero la pagina no se ha vuelto a su forma normal, si no que sigue mal, tu sabrias decirme que he hecho mal.
este es el codigo que he modificado y corregido (width:30px y /img/button-mini,png)
/* classic buttons */
input.button_mini, input.button_mini_disabled, input.exclusive_mini, input.exclusive_mini_disabled, a.button_mini, a.exclusive_mini, span.button_mini, span.exclusive_mini {
width: 30px;
background-image: url(‘../img/button-mini.png’)
Solo dire una cosa
Gracias
Hola Jesus, puedo usar FileZilla para editar?
saludos
Hola, estoy trabajando sobre el tema «matrice» y me encuentro que no logro cambiar la dirección del que está en el slide de la página La he cambiado en «editorial» pero no cambia… nla web www. prevenshop .com
Gracias por la ayuda…
Hola.
Lo que quiero es que me salga el precio anterior tachado en pequeño y que en grande salga el precio actual. Supongo que se hara cambiando algo del css pero es en esa parte en la que me pierdo ya que la programacion no es mi fuerte.jejej.
gracias y enhorabuena por el blog, resuelve bastantes dudas.
Hola, una información muy util, a veces personalizando una plantilla ya hecha terminamos antes.
Buenos días!
Necesito que me ayuden en una cuestion importante….hemos hecho toda la fotografia para introducirla en la tienda y resulta que nos hemos dado cuenta que las dimensiones de las fotos hay que afinarlas…me podriais ayudar porfavor como puedo saber las dimensiones de el apartado…categorias..productos y del apartado inicio de las fotos que se van pasando una por una.
Muchisimas gracias
Hola.
En Preferencias/Imágenes tienes el tamaño de reajuste de cada imagen y su lugar correspondiente.
Hola Jesús quería saber en qué línea exacta del global.css está ubicado el teléfono del footer para poner una imagen de whastapp a continuación. Ahora lo tengo sobre la 2026 en dónde he añadido background: url(/img/whatsapp.png) no-repeat 100px 0; pero se me repite en todo el bloque de CONTACTE CON NOSOTROS del footer tema default.
Muchas gracias de antemano.
Saludos
Hola!
Estoy tratando de customizar el block top menu de mi web pero no hay forma de que quede como quiero.
Me gustaría que el background fuera #333
Font color #FFFFFF
Y hubiera una pequeña línea #F09420 entre cada palabra del menú.
Además, me gustaría que cuando el cursor se pone encima de alguna de las palabras el color del fondo se mantenga pero las letras cambien a #F09420.
Me gustaría que el submenu se quedara igual que el menu: background #333, font color #FFFFFF y que al poner el cursor encima cambie a #F09420.
Espero me podáis ayudar!
Gracias!!
Hola,estoy intentando sobreescribir el archivo css, del global, pero me deja siempre el antiguo y no puedo cambiar el aspecto de mi tienda, ¿sabes porque hace eso? ¿como puedo solucionarlo?
Muchas gracias ante todo.
Lo he editado con dreamweaber y lo he subido con Fillezilla.
Gracias de nuevo
Hola! soy novata en el trabajo con prestashop. Deseo inicialmente cambir el header de mi pagina y ajustarle algunas propiedaddes como el ancho y el largo, ademas deseo
completar el espacio restante del header con color negro, por favor alguien podria indicarme como lo hago? La pagina en la q deseo hacer los cambios no la estoy trabajando desde el localhost si no q esta en un servidor. Gracias!!!
Si deseo hacer un backup del sitio para no hacer los cambios sin guardar una traza de los mismos.Como lo hago? Gracias! O podrian aconsejarme como hacer para no hacer los cambios directamente en el sitio oficial?Gracias!
Y para cambiar el fondo del bloque Editor de Texto de Página de Inicio (modulo editor)?
Gracias!
Hola Jesús,
Soy novata con el prestashop pero me han encargado modificar la cabecera de una web realizada con esta plataforma, cómo puedo editar las imágenes del carrusel o incorporar de nuevas? Mil gracias
Buenos Dias Sr. Jesus , sucede que he instalado el modulo contenbox, y lo he posicionado , y cuando abro el front oficce, la imagen aparece, pero las medidas son muy pequeñas, maximo 100px, y yo quiero que se vea mas grande, por cuanto en ella he puesto un telefono de contacto, y la verdad , no se vè, he entrado varias veces al cpanel de mi servidor, pero no se en que archvo se encuentra ubicado, o si hay otra forma de modificar los parametros, para que la imagen se vea mas grande, le agradezco, no soy ducho en esto, pero estoy tratando de hacerlo. Agradezco de antemano su colaboracion, Cordialmente, Gerardo
No te puedo decir, Gerardo. lo mejor es que consultes el soporte oficial de dicho módulo en http://contentbox.org/
Suerte.
Hola Jesus, tengo una tienda en la que deseo que muestre la lista de una categoría de 4 en 4 por renglon. Se podrá esto?, actualmente solo muestra de 1 producto por renglón.
Hola, tengo un problemita a ver si me puede ayudar, quiero poner unos botones al lado del botón add to card, para que se llamen unos formularios que están en html, pero no tengo idea como hacer esta modificación.
Hola, ¿qué tal? Quisiera saber por qué no veo reflejados los cambios que he realizado en el archivo global.css de mi tema prestashop. Edito el archivo, lo guardo, ¿qué debo hacer después para poder ver las modificaciones en mi tienda?. Muchas gracias.