CSS personalizado

El Editor de CSS personalizado te permite personalizar la apariencia de tu tema sin tener que crear un tema secundario ni preocuparte por si las actualizaciones del tema sobrescriben los cambios personalizados.

Ahora, este módulo está activado por defecto. Si no puedes ver la funcionalidad descrita a continuación, visita la página Control Jetpack’s Modules on One Page (Controlar los módulos de Jetpack en una página) para obtener información sobre cómo activarla.

A partir de WordPress 4.7, puedes añadir CSS personalizado a tu tema directamente desde el Personalizador. Para empezar, selecciona la pestaña CSS adicional al personalizar tu tema actual.

El módulo CSS personalizado de Jetpack permite añadir más funciones al Editor de CSS, tal y como se explica a continuación.

Añadir un CSS personalizado

Para empezar, abre el Editor de CSS siguiendo esta ruta: Apariencia → Personalizar → CSS adicional.

Si es la primera vez que accedes al Editor de CSS (o todavía no has añadido ningún código CSS personalizado), verás un mensaje sobre marcadores de posición en la ventana de edición. Lee bien el mensaje, porque incluye consejos prácticos para dar los primeros pasos.

Cuando estés listo para empezar a añadir el código CSS personalizado, borra el mensaje o añádelo después de este.

Opciones de edición

Tienes algunas opciones para editar la hoja de estilo. Puedes encontrarlas directamente debajo del editor:

• Preprocesador: el Editor de CSS es compatible con los preprocesadores CSS de LESS y Sass (sintaxis SCSS). Se trata de una opción avanzada para los usuarios que quieran aprovechar las extensiones de CSS, como las variables y los «mixins». Para obtener más información, visita los sitios web de LESS y Sass.
• Complemento: al hacer cambios en el diseño de tu sitio, añadirás tus personalizaciones en la parte de arriba de la hoja de estilo del tema actual por defecto. Sin embargo, puedes sustituir la hoja de estilo del tema actual con tu propio CSS mediante la opción Nuevo comienzo. Si quieres empezar solo con la estructura HTML del tema y recrear todo el CSS desde cero, elige la segunda opción. Utiliza la hoja de estilo original del tema como referencia y asegúrate de tener todas las reglas y todos los estilos que se representan. Si te falta algún elemento, es posible que el blog se muestre desajustado en la vista pública. Con esta opción, solo se aplicará el código CSS de la ventana de edición a tu blog.
• Ancho de medios: utiliza esta opción si has modificado el ancho del área de contenido principal mediante CSS personalizado. El ajuste de ancho de medios se utiliza como tamaño por defecto para imágenes de tamaño completo al insertarlas en tu blog. Ten en cuenta que esta opción no afecta al tamaño de las imágenes que hayas añadido antes de modificar el ajuste (según cómo se hayan insertado), y es posible que tengas que volver a insertarlas una vez modificado.

Vista previa y guardado

Al editar el CSS, podrás ver una vista previa de los cambios antes de guardarlos (sea cual sea tu nivel de habilidad).

Si te gusta y quieres guardar los cambios, haz clic en el botón Guardar y publicar en la parte superior de la ventana del personalizador.

Historial de CSS

Las revisiones de CSS muestran las versiones anteriores del CSS personalizado. Cada vez que guardas los cambios, se guarda una revisión. Jetpack guarda hasta 25 revisiones del CSS que se hagan en cualquier tema del blog.

Para ver estas revisiones, puedes hacer clic en Ver todo el historial en la parte inferior de la ventana de CSS adicional del Personalizador.

Se abrirá el historial de revisiones de CSS personalizado del tema seleccionado.

Para comparar revisiones de CSS, elige una fecha con el deslizador de contenido de la parte superior de la pantalla Revisiones. La revisión que elijas aparecerá al lado de la versión actual, para destacar las diferencias entre ambas. Una marca roja indica que se ha eliminado algo y una marca verde, que se ha añadido.

Para restaurar una versión anterior del CSS personalizado, haz clic en Restaurar para la fecha en cuestión y se restablecerá el CSS personalizado.

Notas

Por defecto, Jetpack incluirá el CSS personalizado como hoja de estilo integrada dentro del documento. Sin embargo, si el CSS personalizado tiene más de 2000 caracteres, Jetpack generará una hoja de estilo externa y la enlazará.

Información de privacidad

Esta función está activada por defecto. Aunque no hay controles para esta función en el área de configuración principal de Jetpack, se puede desactivar en cualquier momento siguiendo las instrucciones de esta guía.