Cómo usar CSS para modificar el diseño de tu tienda ePages (parte 1)

por Inès de la Ruffie, 19.01.12



Con el editor de ePages puedes modificar el aspecto de tu tienda online para que se ajuste a tus necesidades. Es muy fácil y con sólo con unos conocimientos de diseño básicos, puedes cambiar realmente el aspecto de tu tienda. No obstante, es posible que a veces te encuentres con limitaciones de diseño y quieras ir más allá. Esto lo puedes solucionar con CSS, que puedes insertar en el código fuente de tu sitio web. En el blog de ePages te explicamos algunos trucos y ejemplo para que veas lo que puedes hacer, cómo saber que código necesitas y dónde insertarlo. 

Nota: Recuerda que el uso de CSS es responsabilidad tuya únicamente.

Artículo actualizado el 28/11/2013

Breve introducción a CSS

Si tienes intención de utilizar CSS habitualmente, te recomendamos que leas algunos tutoriales online gratuitos Puedes encontrar una buena introducción a CSS, por ejemplo, en la página html.net (en español) o en la página de W3School (en inglés).

Igualmente, te explicamos a grandes rasgos qué es exactamente CSS. Se trata de un lenguaje de marcado que puedes utilizar para modificar el aspecto del contenido incluido en tu sitio web. CSS corresponde a las siglas en inglés de Cascading Style Sheets (en español, hojas de estilos en cascada).

CSS permite modificar el aspecto del contenido incluido en un sitio web pero, en cambio, no te permite añadir nuevos contenidos a un sitio web ni cambiar las funciones de tu tienda online.

El código CSS siempre se configura de forma inmediata. Primero debes especificar qué es lo que debe modificarse, la parte que se conoce como selector. Después, debes especificar entre llaves qué debe ocurrirle al elemento seleccionado. Este comando consta de dos elementos: una propiedad y un valor.

A continuación presentamos un ejemplo que modifica el color de fondo de un sitio web y le aplica el color rojo (expresado como valor hexadecimal):


Si deseas asignar otra propiedad a un elemento, basta con que especifiques dicha propiedad entre el punto y coma y la segunda llave.

Siguiendo con el ejemplo anterior, queremos que además de que el color de fondo sea rojo , que la fuente del texto sea azul oscuro.

body {
color: 0800FF;
background-color: #FF0000;
}

Podríamos haberlo escrito todo en una sola fila, pero hemos colocado los elementos en distintas líneas para que el código resulte más fácil de leer. Cualquiera de las dos formas es válida para el navegador; lo único que importa es lo que aparece entre llaves. Los navegadores no tienen en cuenta los saltos de línea. Lo que sí es importante es la presencia de un punto y coma al final de cada entrada, puesto que el punto y coma funciona como delimitador.

 

Cómo encontrar el selector correcto en la tienda

Ahora que ya hemos visto la estructura del código CSS, podemos avanzar al siguiente paso. Supongamos que queremos ocultar manualmente un determinado elemento en nuestra tienda. ¿Cómo podemos localizar el selector que debemos ocultar?

Con la ayuda de un conector para Firefox: Firebug. Haz clic en este enlace para instalarlo.

Firebug nos permite realizar búsquedas exhaustivas en nuestra tienda desde el explorador y, entre otras cosas, encontrar el selector correcto para cualquier elemento.

Vamos a utilizar un ejemplo para ver cómo funciona. En las tiendas de ePages, la ruta de navegación (breadcrumb) de un producto se muestra sobre el producto en cuestión. La ruta de navegación se separa del resto de la imagen del producto por medio de una línea de separación. Ahora vamos a intentar ocultar esta línea.

Para ello, debemos abrir nuestra tienda en Firefox y seleccionar un producto para ver sus detalles. Sobre los detalles del producto, veremos una ruta de navegación y una línea de separación.

CSSP1_1

Podemos utilizar Firebug para examinar la página. Para ello, tenemos que hacer clic en el símbolo correspondiente de la barra de menús superior del explorador o hacer clic con el botón derecho en “Inspeccionar elemento con Firefox”.

CSSP1_2

o

Firebug se abrirá en la mitad inferior del navegador. Si queremos ver más detalles de elementos concretos, primero debemos seleccionarlos. Para ello, tenemos que hacer clic en el siguiente símbolo en la barra de menús de Firebug.

Si ahora colocamos el cursor sobre un elemento de nuestro sitio web, se mostrará con un borde de color azul. Al mismo tiempo, el contenido de la ventana de Firebug cambiará y se mostrará el código fuente agregado del elemento en cuestión.

CSSP1_3

En la ventana inferior izquierda vemos el código fuente del elemento y, a la derecha, los comandos CSS que se utilizan para modificar el aspecto del elemento. Podemos jugar con los comandos CSS que hemos utilizado antes y, por ejemplo, modificar el tamaño a modo de prueba. Para ello, vamos a introducir un valor distinto en la propiedad “height”. De este modo, podrás hacerte una idea del aspecto que tendría un elemento si fueses a modificarlo, sin realizar cambios realmente en el código fuente. Por ello, Firebug es la herramienta ideal para experimentar con diseños.

También puedes probar nuevos estilos. Para ello, haz clic con el botón derecho en la ventana de la derecha y, a continuación, añade una nueva propiedad. Como lo que queremos es ocultar la línea de separación, debemos introducir la siguiente propiedad en la ventana de la derecha: “visibility: hidden”.

Ahora la línea discontinua situada bajo la ruta de navegación debería ser invisible. Por cierto, encontrarás este y otros comandos CSS en el tutorial indicado antes.

 

Modificar el código fuente

Lo primero que vamos a hacer es que este cambio en nuestra tienda sea permanente. Para ello, tenemos que insertar el comando en el lugar correcto en el código fuente.

Para este paso:

  • necesitamos la ruta exacta del elemento para poder modificarla;
  • el comando para poder ocultar la línea.

Ya conocemos el comando, por lo que solo nos falta saber la ruta exacta del elemento. Ahora tenemos que encontrarla. Y, para ello, debemos usar el selector de Firebug. Haz clic para resaltar la línea discontinua. La parte relevante del código aparecerá nuevamente en la ventana inferior izquierda. Veremos la ruta CSS del elemento en la barra de menús de Firebug. Tenemos que hacer clic con el botón derecho y seleccionar “Copiar ruta CSS”.

Esta ruta se guardará en la memoria de nuestro ordenador (portapales) y la podemos copiar en un documento en blanco:

html.mozilla body.epages div.Layout1 div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper hr.Separator

Si analizas la ruta de izquierda a derecha, verás que aparece información cada vez más precisa después de cada punto. El último elemento es “hr.Separator”, es decir, la línea discontinua. Si utilizamos toda la ruta, tendremos la certeza de que solo se modificará ese elemento en concreto y no otro elemento de cualquier otro lugar del sitio web que casualmente incluya “hr.Separator”.

 

CSSP1_4

 

Ahora ya tenemos todo lo que necesitamos. Abriremos nuestra interfaz de administración y, en la pestaña “Opciones avanzadas”, en el menú “Opciones / Opciones generales”, introduciremos toda la información en el código fuente de nuestra página.

Ahora el código tendrá este aspecto:

<style type=»text/css»>
body.epages div.Layout1 div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper hr.Separator
{
visibility: hidden !important;
}
</style>

 

A través de <style type=»text/css»> especificamos que queremos realizar cambios en el código CSS; cerramos el código con </style>. Entre medias, se especifica el elemento que debe modificarse (la ruta anterior a hr.Separator) seguido (entre llaves) de la modificación que debe realizarse (visibility: hidden !important).

CSSP1_5

Una vez que hemos introducido el código, hacemos clic en “Guardar” y hacemos clic en Ver sitio web. Si ahora navegamos por nuestra tienda, veremos que la línea discontinua se ha ocultado permanentemente.

 

Si te ves limitado por los editores incluidos en la tienda, sigue los pasos indicados más arriba para realizar pequeños cambios de forma rápida y sencilla. En la próxima entrega de nuestra breve introducción a CSS, que pronto publicaremos en el blog, profundizaremos algo más y explicaremos lo que debes hacer si deseas realizar cambios de más envergadura.

Si vas a experimentar con CSS, es importante que antes te familiarices con su funcionamiento. CSS es la solución perfecta si deseas ir más allá de los parámetros permitidos por la versión estándar de tu tienda, pero recuerda que el uso de CSS es responsabilidad tuya únicamente. Corres el riesgo de desactivar u ocultar involuntariamente funciones importantes de la tienda. Si tu tienda empieza a comportarse de forma extraña, la causa podría ser el código que has introducido. Para comprobarlo, elimina los cambios que hayas realizado en el código fuente de tu sitio web.

 

Sobre este autor


es responsable del Partner Marketing para Sur de Europa. Apasionada del eCommerce y de la experiencia cliente, le gusta compartir tendencias, consejos y experiencias concretas sobre el mercado y de otros usuarios ePages.

Artículos relacionados


Comentarios


Comparte tu opinión con nosotros


*Campo obligatorio

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *