Personalización del Diseño con CSS

Seguir

Introducción

Los clientes que poseen planes PRO tienen la posibilidad de personalizar por completo su diseño a través de CSS.

El archivo que permite administrar el diseño es el siguiente:

  • screen.css

Para Empezar

  1. Para empezar, elija un tema de la Galería de Temas
    - elija los colores, la imagen de fondo y las fuente
    - Haga clic en Preview para revisar su trabajo
    - Haga clic en Copiar para establecer el tema que ha seleccionado
  2. Esta será la base de su diseño. Con ella, ahorrará gran cantidad de tiempo.
 

Añadir su CSS

  1. Para comenzar, añada su propio CSS en 'screen.css" para cambiar (o suprimir) los elementos de la página que desea personalizar.Tenga en cuenta que"screen.css" solo contendrá su propio CSS, por lo que estará vacío la primera vez que lo vea
  2. Puede ver sus últimos 100 cambios en "Historial". Esta vista también le permite Volver a una versión anterior así como comparar dos versiones

Imágenes

Puede agregar imágenes referentes a su CSS en "Imágenes". Las imágenes se encuentran en la misma "carpeta" que screen.css por lo que puede poner directamente el nombre del archivo en la ruta de la URL cuando utilice una. También puede añadir fuentes que referencien con @font-face.

background-image: url(sample-image.png) no-repeat;

Herramientas Útiles

La parte más difícil de personalizar una fuente es conocer qué clases o IDs editar. Estas herramientas disponibles para el navegador le harán el trabajo mucho más sencillo.

  • Plug-in Firebug para Firefox (http://getfirebug.com/) que supone la manera más sencilla de saber cuál es tu CSS objetivo
  • En Chrome puede utilizar las “Herramientas para Desarrolladores” que facilitan igualmente el trabajo.
  • En Safari, en el menú "Develop" podrá seleccionar "Mostrar Inspector Web".

 

Previsualizar y Publicar

Para controlar su progreso, haga clic en "Vista Previa" y aparecerá una nueva pestaña. Aquí encontrará una explicación más detallada de como usar la Vista Previa.

En la ventana de Vista Previa, puede hacer clic en "Publicar este Diseño" el cuál actualizará su sitio público con los últimos cambios de imágenes, encabezado/pie de página y CSS.

¿Tiene más preguntas? Enviar una solicitud

Comentarios

Tecnología de Zendesk