El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

PrestaShop: Personalización

Modificando estilos del tema para hacer ajustes sencillos

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
No hay que tener miedo a hacer pequeños cambios en los temas de PrestaShop. Tareas como cambiar el color de fondo o de los textos, por ejemplo, es muy fácil y en este vídeo vamos a demostrar que cualquiera puede hacerlo.

Transcripción

Mi página va poco a poco teniendo un aspecto cada vez más terminado. Pero todavía sigo teniendo pequeños ajustes que tengo que modificar que no me satisfacen y que debería de hacer a mano, ya que no me da ninguna opción PrestaShop para hacer esa modificación, o porque me obligaría a cambiar de tema o a instalar algún módulo extraño. Por ejemplo, tengo aquí un par de detalles que sería bueno cambiar, como el color de estos textos o como hacer por ejemplo que este "slider" aparezca centrado. Son cosas que pueden parecer bastante complicadas, pero para aquellos que sean un poco valientes, veremos que es bastante sencillo de hacer. Lo primero que necesitaremos será hacer una copia de nuestros archivos. O sea, copiar toda la carpeta del tema sobre el que vamos hacer modificaciones y pegarla en otro sitio, para por si acaso nos equivocamos, tener una vuelta atrás simple. Y luego por otro lado, pues es tan fácil como con el botón derecho seleccionar con Inspeccionar elemento, mirar a ver el elemento que quiero cambiar y aquí, en este caso, cambiar el color. Aquí lo veo nada más moverme hacia abajo que hay un código hexadecimal, eso indica que hay un color, y de hecho la propiedad CSS color es la que indica el color del texto. Este color debería de ser blanco. Lo que debería de hacer es primero probarlo en el navegador, cambiarlo por ffffff, 6 veces, que es blanco. Vemos que efectivamente aparece ese texto blanco. Y una vez hecho, pues lo que haré será buscar la ruta de esa carpeta y abrir cualquier editor de texto. —yo tengo instalado el Sublime Text, que es gratuito—, irme a donde estaba exactamente ese archivo, dentro del Theme Configurator, CSS y el 9. Bueno pues seleccionarlo, irme a la misma línea donde ponía ese valor, que era la línea 24, y sustituirlo por el nuevo valor. Volviendo al tema, pues ahora me encontraré, o me debería de encontrar, con que sale de color blanco. Perfecto. Pero puedo querer hacer más modificaciones, como este "slider". Hay algunas de ellas que pueden ser un poco complicadas. Aquí tengo... Cuando selecciono este elemento, vemos que selecciono solo un trocito del "slider", sobre esto volveré más adelante. Si subo un nivel más arriba dentro de este HTML, pues vemos que ya selecciono uno de los elementos del "slider", de hecho el que estaba antes que este. En realidad, yo lo que quiero es que todo el bloque aparezca centrado, así que tendré que coger el contenedor de todos estos elementos del "slider". Cuando lo selecciono veo que también sigue siendo una selección que aparece sin ocupar todo el ancho de la ventana. Voy a seguir subiendo hasta que encuentre un objeto que, este sí, es el contenedor global y que va de lado a lado. Bueno, pues cojo el siguiente elemento, que es más pequeño, y sobre este elemento es al que le voy a pedir que quede centrado. ¿Y cómo lo haré? Bueno, pues teniéndolo seleccionado, voy buscando entre los distintos selectores CSS y encuentro que hay uno que es el Home Page Slider, que obviamente es nuestro "slider", y que luego su "wrapper" tiene una serie de características. Bueno, pues aquí puedo añadir yo las mías propias, que ¿cuáles serían? Bueno, pues en principio si utilizo la propiedad "margin" y le pongo como cero auto, podría ver si realmente lo centra. Hay veces que esa propiedad está marcada un poco más abajo, aquí lo vemos, y tiene un "important". Así que debería de intentar sobre escribir ese "important". Ese "important" hace que la otra propiedad pise la mía. Pero si pongo también este valor como "important", pues entonces ya consigo que aparezca centrado, es tan fácil como eso. Y mi siguiente paso, bueno pues puede ser copiar este mismo código y una de dos: o hacer la modificación sobre ese mismo archivo o también añadirlo sobre otro archivo nuevo. Este archivo está dentro del mismo tema donde había estado antes, solo que en los módulos Home Slider, en la línea 106. Bueno pues vuelvo de nuevo, busco el módulo Home Slider, lo selecciono, busco la línea 106, aquí lo tengo, y aquí dentro pues puedo escribir o puedo pegar también lo que tenía el navegador. En mi caso, bueno pues lo voy a escribir sería: cero auto important. Lo guardaré, recargo de nuevo esta página y ya tengo mi "slider" centrado. Cada vez está un poco más terminada mi tienda. Igual que he hecho eso, puedo hacer modificaciones sobre cualquiera del resto de los elementos. Por ejemplo, que estos textos que aparecen aquí estén mejor colocados. Bueno, pues es un poco más de lo mismo. Este contenedor veo que es el total del contenedor. Puedo probar en esa descripción a cambiarle valores. Por ejemplo, quiero que aparezca más arriba, no que aparezca tan abajo. Bueno, pues puedo cambiarle ese valor a un cero, ya veo que parece más arriba, puedo modificarle el "padding", que es la propiedad que controla el espacio que hay entre el borde de la caja y cuando se empieza a escribir ese texto. Con la flecha voy cambiando los distintos valores, selecciono el Padding Top y le puedo poner por ejemplo que tenga solamente diez píxeles. Queda un poco justo, lo cambio por veinte. Y por último, también puedo decirle que el ancho que tenga, en vez ser ese ancho tan estrecho, pues que dependa de la caja sobre la que se está conteniendo y que por ejemplo sea de un 75 % del ancho. Esto está dentro de la línea 102, puedo copiar ese valor, puedo irme de nuevo al archivo CSS, lo guardaría, y ahora cuando lo recargue, pues ya aparece ese texto más ancho y además se adaptará luego mejor también al ancho que tenga disponible para esa ventana. Igual que lo he hecho con estos elementos, puedo cambiar el aspecto de estos botones de abajo, el color de esa barra superior o cualquiera de los elementos. Hay que recordar, no obstante, que todos estos cambios los estamos haciendo sobre este tema. Si cambiásemos de tema, perderíamos esos cambios. Así que es preferible empezar a trabajar con el detalle pequeño sobre estos pequeños estilos cuando ya tenemos nuestra tienda más o menos preparada.

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
Duración:2:13 horas (29 Videos)

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.