Personalizar la plantilla de PrestaShop 1.6 dará color a tus propios diseños haciéndolos personales y únicos si lo que deseas es adaptarlo a tu identidad corporativa.
En el anterior post, explique como duplicar la plantilla de PrestaShop, si no lo has visto te animo a que lo hagas.
En este post voy a darte los pasos a seguir para crear tu propia plantilla, ya que en el video que hay abajo lo explico detalladamente por si no puedes verlo te lo explico.
Para personalizar la plantilla de PrestaShop 1.6 puedes hacerlo o bien editando cada hoja CSS que corresponda, o puedes copiar la regla bien sea una classe o un ID, la diferencia entre una clase o un ID es que la classe lleva siempre un punto delante del nombre que sea por ejemplo: .sf-menu y si es un identificador seria con una almohadilla tipo #miestilo la diferencia entre una y otra es que la classe puede repetirse en cualquier parte del HTML y el ID no.
Con esto aprendido el paso siguiente será crear nuestra hoja de estilos, para ello crearemos un archivo CSS bien desde tu editor de código preferido, o desde el mismo bloc de notas renombrándolo a my_styles.css o el nombre que desees, este archivo ira en la carpeta css dentro del theme que sea.
Ahora editaremos el archivo header.tpl que está dentro de tu theme, debes añadir el siguiente código por la línea 49 este código:
{* Añadimos el archivo my_styles.css con mis reglas personalizadas *}
<link href="{$css_dir}my_styles.css" rel="stylesheet" type="text/css" media="screen" />
Cuando guardes esto en tu archivo header.tpl recuerda que para que surta efecto deberás dirigirte a tu back desde parámetros avanzados à Rendimiento Forzar la compilación y la cache para que pueda leer y reconocer esta línea que has introducido.
Una vez que hayas refrescado el front y lo haya leído ya puedes cerrar la compilación y la cache.
Vamos a hacer un cambio de ejemplo y así será con el resto de cambios que desees hacer.
Por ejemplo vas a cambiar el color del menú, y para esto con el botón derecho y en Google Chrome abres el inspector de elemento, esto te mostrará el código html (lado derecho) y el código css (lado izquierdo) al situarte encima del menú y hacer clic derecho el inspector de elemento te mostrara la etiqueta html que corresponda y en el lado izquierdo te mostrara si tiene su regla css.
Ahora que ya hemos detectado la regla css buscamos en este caso el color de fondo que tiene el menú, es decir el background, esta tiene un valor que es #f6f6f6 los colores hexadecimales siempre tienen una almohadilla delante, no te confundas y creas que es un ID.
Pondremos otro valor por ejemplo: #66BF30 este al ponerlo en el archivo my_styles.css
O sea toda la regla así de esta manera:
.sf-menu {
background: #66BF30;
}
Daremos prioridad antes que a su hoja de estilos, compruébalo y verás como es así.
Con este hecho habrás cambiado el color de fondo de tu menú, pero eso no es todo, puedes atreverte a cambiar más cosas conociendo eso si un poco CSS.
Te invito a que profundices un poco sobre CSS y HTML, ya que te permitirá hacer cambios en tu plantilla PrestaShop y tener tu propia plantilla.
Seguramente tendrás muchas dudas porque no te salga, por eso he realizado un video, pero si aun así no te sale es por qué seguro no has hecho bien los pasos que te he dicho.
Espero que te conviertas en un experto en PrestaShop o un especialista y puedas dar vida a tus plantillas, estoy seguro de que te servirá de ayuda este post.
Aunque esta técnica no es nueva ni la he descubierto es una buena práctica a seguir en la realización de plantillas, las buenas prácticas te harán un verdadero experto o profesional en esta área.
Ánimo y sigue practicando…
45 comentarios
Hola Javier,
ya he descubierto el motivo de porque repetía el selector.
El caso es que introducía la línea a adjuntar el nuevo css sobre la línea 54 (dentro de un foreach)
e introduciendola sobre la línea 65 antes del {$HOOK_HEADER} es su posición correcta y ya no me repite el selector.
Muchas gracias por todo y decirte que tus videos y artículos me están sirviendo mucho!
Gracias!
Hola Javier,
gracias por contestar tan rápido. A ver si me puedo explicar un poco mejor.
La cuestión es que al realizar los pasos que indicas en el tutorial para adjuntar un nuevo css a nuestro prestashop.
todas las modificaciones que agregamos a dicho archivo es como que los navegadores leen continuamente dicha modificación.
Te adjunto una imagen:
https://dl.dropboxusercontent.com/u/50162012/Captura.JPG
En la imagen no se puedes ver como se repite constantemente el selector
button.social-sharing.btn-pinterest en el archivo madera.css. Este llega a repetirse hasta 30 veces.
Y asi todasy cada una de las modificaciones css que realizo en el archivo nuevo.
Un saludo y gracias de antemano.
Hola Javier,
gracias por contestar tan rápido. A ver si me puedo explicar un poco mejor.
La cuestión es que al realizar los pasos que indicas en el tutorial para adjuntar un nuevo css a nuestro prestashop.
todas las modificaciones que agregamos a dicho archivo es como que los navegadores leen continuamente dicha modificación.
Te adjunto una imagen:
https://dl.dropboxusercontent.com/u/50162012/Captura.JPG
En la imagen puedes ver como se repite constantemente el selector
button.social-sharing.btn-pinterest en el archivo madera.css. Este llega a repetirse hasta 30 veces.
Y asi todas y cada una de las modificaciones css que realizo en el archivo nuevo.
Un saludo y gracias de antemano.
No entiendo muy bien lo que quieres decir, ¿Puedes concretar?
Hola Javier,
lo primero de todo muchas gracias por tu tutorial.
Pero me ha surgido una duda.
Tengo prestashop 1.6 con la plantilla por defecto.
con el archivo css cargado por mi realizo cualquier modificación a través del inspector de elementos.
El problema que me surge es que una vez modificado el elemento, vuelvo a revisarlo con el inspector y observo que el inspector lee la modificación constantemente y multiplica una y otra vez la regla css creada por mi.
Este conportamiento se da tanto en el inspector de firefox como de cromme.
A qué puede deberse esto?
Un saludo y gracias de antemano.
Buenas Javier.
Llevo varios día intentando realizar esta modificación, y no lo consigo.
Siempre me sale error 500, lo estoy intentado en local desde dos ordenadores diferentes uno Windows y otro Mac, y he probado a incluir estas dos líneas de código en diferentes zonas del header que contiene el css, y siempre es el mismo error.
Puede ser que el {/if} final tenga que ir al final de alguna sentencia y no lo estoy haciendo bien
Me puedes dar alguna idea de lo que estoy haciendo mal, muchas gracias.
Aquí tienes toda la info: https://doc.prestashop.com/display/PS16/Using+Sass
Hola Javier, una consulta. En la plantilla que tengo me sale que para editar el color del background tengo que abrir un archivo «global.scss», no «.css», he leído que es un archivo sass. ¿Sabes como puedo editarlo o con qué programa hacerlo?
Si no quieres que aparezca puedes poner esto: background: inherit; Con esto no sale ningún color.
Saludos.
Hola Buenos días, si en vez de cambiar le color del div nav quieres que no aparezca como debería hacerlo?
Un saludo y gracias por la ayuda.
Sirve para todo. La cuestión es que no pises los CSS originales así te curas en salud, pero cada maestrillo tiene su librillo.
Lo que explico es poner los estilos en una hoja aparte, puedes hacerlo para así no tener que preocuparte si hay una actualización de la plantilla por ejemplo.
Cuando se trata una plantilla de pago también puede que haya alguna actualización y si haces los cambios en la hoja de estilos de la plantilla y luego la actualizas, pues puede que se pierdan los cambios.
Saludos.
EL tamaño para diferentes dispositivos se logra con el CSS y con los media queries, pero no sé si lo que quieres es poner una imagen para el slider en ese caso desconozco para que fin es.
Hola Javier, he conseguido modificar el background de toda la plantilla y colocar una imagen personalizada pero nose que tamaño es el idóneo para que aparezca perfecta en diferentes medidas de monitores. Estoy utilizando 1680×1680 de tamaño para la diapositiva. Me recomiendas cambiar o aumentar el tamaño?
Hola Javier,
Gracias por el aporte, me esta sirviendo de ayuda. Mi consulta es estoy iniciándome en prestashop, y tengo una plantilla comprada desde addons.
Este código que comentas de poner, lo he probado y veo que funciona perfectamente. Mi consulta es si habrá algún problema al hacer alguna actualización de la plantilla. Otra consulta es que a tener una plantilla comprada no tengo que hacer el duplicado verdad? Ya que es vídeo que comentas al principio del post en para la plantilla default, pero al tenerla comprada, solamente con insertar el código ya valdría?
Un saludo y muchas gracias por la ayuda.
Hola Javier,
Soy nueva en Prestashop, y varios de tus videos me han servido para ir aprendiendo más. Tengo una duda sobre meter estilos con una archivo css externo.
Tengo un plantilla comprada desde addonds de prestashop y me gustaría saber si esto que propones sirve tanto para la default como para las plantillas compradas, ya que he llegado también a tu enlace de duplicar plantilla y he visto en comentarios que solo era para la plantilla default y aqui me surge la misma duda.
Un saludo y gracias.
Hola Francisco, sobre tutoriales en alguna ocasión lo he comentado no doy soporte, entiende que cada caso es particular y como lo haga cada uno también.
Si quieres soporte privado entonces si, porque de ello es a lo que me dedico.
Hola Javier, he realizado lo que indicas y todo perfecto. Pero ocurre algo extraño, se desactiva la Vista Rápida de los productos. Algo entra en conflicto, ya que he probado quitando el link de mi css del código del archivo header y funciona, lo integro y deja de funcionar..
¿Me podrás ayudar?
Gracias…..
Tocándolos .tpl
Hola Javier, acabo de instalarme prestahop lo estoy toqueteando, me ha gustado tu video por lo menos me has abierto un poco de luz a la hora de modificar los css, mi pregunta es la siguiente, ¿ como puedo modificar las etiquetas html o añadir mas ? Gracias un saludo desde valencia.
He seguido los pasos y no veo los cambios, quiero poner las casillas donde poner » hacer pedido como invitado» resaltado.
Muchas gracias
Hola Javier, tengo una duda, y espero puedas ayudarme. Estuve modificando la plantilla que viene por defecto en prestashop, lo real; modificaba con inspeccionar elemento, y luego lo iba cambiando en gobal.css , el tema que cuando lo pre visualizaba desde el navegador, se veía muy bien, llegaba a lo que quería, ahora, cuando subí el archivo modificado a mi servidor, y refrescaba para ver los cambios me surgía algo raro. Los iconos no se veían, con iconos me refiero a el dibujo del carrito en «mi carrito», la imagen del teléfono en el banner superior, las flechas en el slide no se ven, la lupa en el buscador desapareció. O sea, me desapareció varias cosas, y aparece unos signos raros. Te dejo imagen. http://urugaming.com/uy/img/erroreditado.png. Si tenes alguna idea, de verdad me ayudarías. Saludos!
Hola Javier,
Para empezar ¡Gracias por tu videos y posts! Soy una total principiante del prestashop y ver tus videos me ayuda, pero aún así, estoy muy perdida… Espero, por favor, me orientes. Mi situación: Estoy trabajando no en localhost sino desde el Back office de prestashop 1.6.1. He duplicado la plantilla (default bootstrap) como recomiendas en uno de tus videos por el tema de las actualizaciones. Mi objetivo: modificar estilos, colores y demás. ¿Cómo ubico el css de mi plantilla para modificarla ? Perdona si la pregunta es tonta pero no tengo idea!. Muchas gracias.
Javier.
Como puedo editar los campos del formulario de registros? Sacar o Poner nuevos?. O cambior de un TextField a un ComboBox.
Muchas Gracias !
¿Has activado los errores?
Hola, he seguido los pasos pero al entrar en rendimiento me salia una pagina en blanco… He vuelto a dejar todo como estaba y ahora la web sale balnca tambien. Puedo administrarla pero la web no se ve. Alguna solucion¿?
un saludo
Hola Javier, tengo una pregunta como puedo habilito la compresión de css y js en Prestashop Cloud? pues parece que es esto me causa problemas cuando cargo la pagina en mi móvil las categorías no se despliegan.
Puedes ayudarme por favor. Gracias de antemano
Lucy
Hola Javier, excelente ahora si me funciono en el servidor de prestashop pero en local no me funcionaba.
Gracias por compartir tus conocimientos
Lucy
¿En qué archivo te refieres?
No entiendo bien a que te refieres.
Javier, he hecho todo lo que dices pero en el header.tpl me aparece esto en la linea 50 yque no figura en tu tutorial:
{if isset($js_defer) && !$js_defer && isset($js_files) && isset($js_def)}
{$js_def}
{foreach from=$js_files item=js_uri}
{/foreach}
{/if}
No sé si será por eso que no me funciona, he forzado la compilación pero la caché la dejo en SI, tengo prestashop 1.6.0.11
Gracias!
Lucy 🙂
Javier, excelente me funcionó, ahora tengo una duda, necesito cambiar algo pero no en css, modificar algo en el html… pero no puedo encontrar cual es ese archivo, no sé si se entiende, donde encuentro ése archivo que muestra el resultado final, ese mismo en donde buscamos los elementos como mostras en el video… espero que se haya entendido y gracias por tus enseñanzas
Perfecto! Muchas gracias!
Hola,
Yo lo hago como indicas pero en mi caso (No es la plantilla por defecto) no funciona. Me pasa algo muy raro.
En mi caso quiero modificar una imagen de fondo que tiene el header de la página web, por lo que después de probar el método que indicas y no funcionase probé después a sustituir el fichero de imagen original por el mio personalizado, pero sigue mostrándome el original. He borrado cache, probado en diferentes navegadores, reiniciar el servidor web, deshabilitar la cache en prestashop, forzar compilación y aun así sigue mostrándose. ¿Tienes alguna idea?
Muchas gracias,.
Hola Javier, no se que estoy haciendo mal, pero a mi no me funciona. Duplico la plantilla y perfecto, pero cuando modifico el header.tpl y sumo my_styles.css, le doy a ver como se ve y la pantalla se queda en blanco
Hola Javier.
Este post es de los primeros que leí cuando empecé con mi proyecto y me alegro tantas veces de no haber editado el global.css y tener todos los cambios ordenados… Muchas gracias.
Quería preguntarte si conoces alguna forma de agregar todos los estilos nuevos css al editor html del BackOficce. Estoy maquetando las páginas del CMS y echo en falta poder agregar los css a cada elemento desde ahí.
Un saludo.
Mi consejo es que no pongas estilos inline, sino que crees clases y desde el CSS pongas dichos estilos.
Saludos.
¿Qué error te da? ¿Has forzado la compilación y la caché para que tenga efecto?
Hola Javier,
estoy intentando realizar modificaciones sobre una tienda en local. He realizado los pasos que indicas pero no me reconoce la hoja de estilos.
En la consola de depuración me sale el error:
Buenas, Javier
Tendría que modificar alguno de los parámetros para que me funcionara?, porque lo hice en la versión 1.5 y no me funcionó y en la 1.6 a la primera y perfecto.
Muchas gracias y un saludo
¿Te refieres a crear la plantilla css My_styles.css?
Si por supuesto.
Buenos días, Javier
¿Me podrías indicar si es posible hacer el mismo método en 1.5?
Muchas gracias
Cierto, En PrestaShop 1.6 tenemos la posibilidad de tener varios diseños, pero en este caso yo me refiero a un único estilo, ahora bien si deseas tener o utilizar el live editor entonces esta opción no te la recomiendo, sino utilizar las distintas hojas de estilo que trae el módulo themeconfigurator.
Me parece muy bueno el video y la comodidad de modificar los estilos de la plantilla desde un solo archivo.
Pero tengo un problema, que si uso la herramienta de presonalización de plantilla que permite cambiar el color y la fuente, ya no funciona los parámetros que he puesto en my_styles.css, como se podria hacer que prevaleciera mi regla sobre la herramienta de presonalizacion de la plantilla, ya que esta me resulta tambien muy comoda si quiero cambiar facilmente la apariencia de mi pagina.
Gracias.