Personalizar una plantilla Responsive con CSS

Disen o sin ti tulo 6

Tener una página web original y bonita es muy importante ya que así, los internautas disfrutarán de una mejor experiencia. Hayas aplicado el Tema Blogger o cualquier otro que te proponemos en el manager, puedes personalizarlo completamente gracias a los estilos CSS. El formulario de personalización simple no cubre todos los aspectos gráficos de tu página. Si quieres una personalización más avanzada deberás escribir algunas normas en CSS.

En esta entrada del blog dejaremos algunos principios de base a respetar para que los estilos CSS que vas a añadir completen esos que ya existen y conserven la lógica del diseño web Responsive.

¡Ojo! Aquí no vas a aprender el CSS desde cero, ¡para eso existen muchas páginas web que lo explican muy bien! Encontrarás en internet muchas fuentes que te van a permitir adquirir fácilmente las bases de este lenguaje potente e indispensable, siempre que quieras darle a tu página una apariencia personalizada.

¿Dónde escribir los estilos de CSS personalizados?

En el manager te proponemos dos formas de añadir tus estilos CSS. Las encontrarás en Configuración > Diseño :

  • En la parte alta del formulario de personalización, haz clic en el Avanzado : allí podrás editar la hoja de estilo concebida por el Web Designer de emiweb. Esta hoja de estilo retoma los parámetros definidos en el formulario de personalización (color del texto, de los enlaces, etc…).
  • Debajo del formulario de personalización, en la sección Editar / Añadir código CSS a la plantilla : los nuevos estilos CSS que añadas al sitio se escribirán tras los elementos ya escritos en la hoja de estilo concebida por el Web Designer de emiweb. Ya que los estilos se añaden al final de la hoja de estilo del tema, estos puede que se contradigan con algún estilo existente.
  • También, puedes añadir CSS desde Configuración > Ajustes > Zonas editables. Los estilos que ocupen esta zona se cargaran también al final de la hoja de estilo de la plantilla.

Cada uno de estos métodos tiene sus ventajas y sus inconvenientes

  • Escoger el Avanzado ofrece la ventaja de tener a mano todo el control de la hoja de estilo utilizada para editar la apariencia de tu página. Podrás así modificar el CSS existente o eliminar algunos estilos. El inconveniente es que una vez editada esta hoja de estilo, no podrás beneficiarte de las posibles modificaciones de la hoja de estilos propuestas por el Web Designer de emiweb. Además, si deseas modificar un color por ejemplo, tendrás que especificar un código hexadecimal (por ejemplo #ffffff para el blanco). Ya no podrás escogerlo desde el formulario de personalización. Esta solución esta dedicada a las personas que tienen un buen conocimiento de CSS y que desean tener el control total de la apariencia del sitio.
  • Optar por añadir CSS desde la selección Editar / Añadir código CSS a la plantilla te permite al contrario, continuar beneficiándote de las posibles modificaciones de la hoja de estilos de tu plantilla. El inconveniente es que para modificar un estilo existente, deberás reescribirlo, lo que aumentará in fine, el peso de la hoja de estilo y por consecuente, el tiempo de carga. Privilegia este método si tus conocimientos en CSS son limitados y si deseas beneficiarte de las posibles correcciones gráficas.

Sea cual sea la solución escogida, intenta escribir todos los estilos CSS de tu página en un solo y mismo sitio, esto facilita su acceso y su mantenimiento.

Estilos CSS y diseño Responsive

Partimos del principio que tu sitio es Responsive, es decir, que le has aplicado una plantilla basada en los frameworks CSS Bootstrap (versión 2) o EMS Framework.

Los Break Points

¿A qué llamamos Break Points (puntos de interrupción) en Web Design? El principio de un sitio web llamado Responsive es que se pueda adaptar a todos los formatos de pantalla, sea cuál sea su tamaño. Gracias al CSS podemos modificar la apariencia de un elemento en función del tamaño de la pantalla. Aquí tienes un ejemplo de las principales resoluciones evaluadas en CSS para definir en que tipo de pantalla se muestra una página web.

Ancho de pantalla Tipo de terminal
>=1200 px Pantalla panorámica, portátiles y de escritorio
>=980 px Tabletas como el iPad en posición horizontal
>=768 px Tabletas en posición vertical
<=480 px Dispositivos con pantallas pequeñas, como los smartphones en posición horizontal
<=320 px Dispositivos con pantallas pequeñas, como los smartphones en posición vertical

Un punto de interrupción es entonces un límite a partir del cual aplicamos los estilos CSS. En esta tabla, el límite esta exprimido en pixeles pero se puede exprimir también en otras unidades de medida (vw, rem, etc.).

Ya que tu página es Responsive, antes de escribir un estilo CSS, es importante que te preguntes antes ¿Qué tipo de pantalla estará afectada por este estilo? Si la respuesta no es ¡Todas las pantallas!, tendrás que adaptar tu estilo CSS a un tipo de pantalla predefinida.

Quédate con la idea de que los estilos CSS son concebidos para una anchura de pantalla por defecto. Todos los estilos CSS no adaptados a este tamaño deberán lógicamente figurar en un @media query correspondiente.

Consulta el tutorial Personalizar una plantilla con CSS para entender la lógica de declaración de estilos.

Página web Mobile First, si o no?

Antes de continuar, es importante que te hagas una segunda pregunta, que te ayudará a ordenar tus estilos CSS : ¿Voy a concebir el CSS de mi sitio prioritariamente para los terminales mobiles?, o dicho de otra forma ¿Mi página web es Mobile First?

¿Cómo saber si el CSS de mi página es Mobile First?

En emiweb, es muy simple:

  • Todas las plantillas basadas en el framework CSS Bootstrap v2 (las reconocerás gracias al sufijo [Bootstrap]) no son Mobile First.
  • Todas las plantillas basadas en el framework CSS EMS Framework (las reconocerás gracias al sufijo EMS Framework) son Mobile First.

El diseño y el contenido deben adaptarse en cualquier circunstancia, en una pantalla grande o en una pequeña. No te olvides nunca de este aspecto cuando personalices tu página con CSS!

responsive Diseño web