PrestaShop: Personalización

Herramientas adicionales de ayuda: Firebug o Chrome

¡Prueba gratis durante 10 días

nuestros 1241 cursos !

Prueba gratis Mostrar modalidades de suscripción
Es bueno conocer mínimamente al menos, la manera de hacer pequeñas modificaciones sobre los estilos css o incluso sobre algún archivo de configuración y para hacerlo, vamos a comentar las herramientas que usaremos en el curso.

Transcripción

La mayor parte del tiempo vamos a pasarlo dentro del apartado de administración de nuestra tienda, porque vamos a trabajar generalmente con configuraciones directamente sobre ella. Pero vamos también a hacer un pequeño detalle de modificación del aspecto utilizando los temas, para que así veamos que, bueno, tampoco tiene por qué ser tan difícil ni tan complicado hacer pequeñas personalizaciones. Para poder hacer eso, vamos a necesitar algunas ayudas que van a ser muy fáciles y muy cómodas. En principio, yo tengo instalado Firefox, que es con el que estoy viendo la tienda. Dentro de él hay un pequeño complemento que se llama "firebug", que es el que utilizan muchísimos desarrolladores para hacer precisamente eso, modificaciones sobre temas. Para utilizarlo, están fácil —después de haberlo instalado, por supuesto— como pulsar con el botón derecho Inspeccionar elemento con "firebug" y eso me va a abrir una zona en la parte inferior en la que tengo varios elementos. Me abre la pestaña HTML y dentro de esa pestaña HTML, aquí, puedo ver todo el código CSS que está aplicado sobre ese elemento. No hace falta saber mucho código CSS, pero bueno, un poquito sí que viene bien saber. De todas formas, aunque no sepamos nada, por ejemplo sí que una característica muy habitual es el cambiar un color. Bueno, pues para cambiar el color tengo la propiedad 'color' sobre la cual pues, en vez de poner ese color, puedo poner ff0000, que es el color rojo. Y aquí vemos como así de un plumazo he modificado esos colores. De todas formas, esta modificación la he hecho solamente sobre el navegador y en este momento en concreto. Si yo recargo esta misma página, veremos que no se ha mantenido. Voy a volver de nuevo a seleccionarlo. No se ha mantenido, pero yo puedo hacer modificaciones sobre ese mismo archivo. Si me pongo encima puedo ver la ruta concreta de dónde se ha guardado ese archivo. Entonces la idea ahora sería abrir ese archivo, abrirlo en la línea 60 y hacer esa modificación. Para hacer esa modificación, bueno pues podemos utilizar hasta el bloc de notas si queremos. Yo, en concreto, suelo utilizar el Sublime Text, que es un programa gratuito y que funciona muy bien, es muy ligero. Lo que haré será irme a File, Open folder, seleccionaré dentro de Open folder —voy a buscar la carpeta donde tengo instalada mi tienda, la carpeta Mi tienda; voy a cerrar esa otra ventana y voy a mantener ésta— y luego dentro de ella voy a buscar la misma ruta que había visto, que era dentro de Temas, Default, Bootstrap. Dentro de él, en la carpeta CSS, Módulos. Dentro de los módulos, en el módulo concreto del menú, aquí está, Block Top Menu, la carteta CSS y dentro de ella este archivo. Y en la línea 60 efectivamente tengo los estilos que definen el color para esos elementos, y en concreto aquí tendría ese color. Entonces haría la modificación, lo guardaría y, a partir de ese momento, vería los cambios inmediatamente. Eso mismo que he hecho con Firefox también si se quiere se puede hacer con Chrome. Todos los que tengan instalado Chrome pues lo tienen muy fácil. Con el botón derecho podemos decir Inspeccionar y eso me abre de nuevo algo muy parecido al "firebug", donde también me muestra ese elemento seleccionado y debajo también vemos exactamente el mismo estilo, con la misma forma de edición. Y aquí lo vuelvo otra vez a editar y me cambia inmediatamente ese color. Vemos que es exactamente la misma idea. Además también, en ambos casos nos da la posibilidad de ver cómo responde nuestra página a "responsive design". Así podemos ver cómo el tema realmente si se adapta o no, simplemente tirando del borde en una dirección u otra. Y vemos, cuando lo voy haciendo, como me pone el tamaño en la esquina superior derecha. Son pequeñas herramientas que no son imprescindibles, que si no se quiere no se tienen por qué utilizar, se puede terminar una tienda perfectamente sin hacer ninguna modificación, pero que para cualquiera que tenga un poco de inquietud acerca de ello, pues le viene bien conocerlas.

PrestaShop: Personalización

Haz triunfar tu tienda Prestashop aprendiendo a crear ofertas, aplicar descuentos en los envíos, o a mejorar los motores de búsqueda para que todos vean tus productos.

2:13 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:3/10/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.