El CSS personalizado

El CSS personalizado te permite ir más allá del tema: botones más cuadrados, subtítulos de color, tarjetas más compactas. Tus reglas se añaden después del tema en cada página y sobreviven a las actualizaciones. Esta lección te enseña dónde escribirlas y qué variables usar, con ejemplos probados en el sitio de Atelier Nova.

¿Dónde se escribe tu CSS personalizado?

1. Abre Ajustes › Apariencia y baja hasta el campo CSS personalizado, debajo del texto del pie de página.
2. Pega o escribe tus reglas.
3. Haz clic en Guardar: la caché del sitio se vacía y tus reglas se aplican al instante en todas las páginas.

El propio campo lo recuerda: tu CSS «se añade después del tema en cada página y tiene prioridad sobre él». Se inserta en la etiqueta <style> de cada página, después de la hoja base y de la del tema o la dirección de arte: a igualdad de selector, gana tu regla. Se guarda con tus datos, en data/, una carpeta que la actualización no toca, y forma parte de la copia de seguridad ZIP de la página Seguridad.

Las reglas de seguridad del campo

Como este CSS se inserta en cada página, Éclair lo limpia antes de guardarlo:

• se elimina el carácter <, para que ninguna regla pueda cerrar la etiqueta de estilo: por eso la sintaxis @media (width < 40rem) no funciona; escribe @media (max-width:40rem);
• se eliminan las reglas @import: ninguna hoja externa puede bloquear la visualización;
• se suprimen los caracteres de control invisibles;
• el tamaño está limitado a 64 KB, y por encima se rechaza el guardado;
• tus comentarios /* … */ se quedan en el campo, pero la página recibe una versión compacta, sin ellos.

Las variables del tema que debes usar

El tema describe sus colores y sus formas con variables CSS. Úsalas en lugar de valores fijos: en modo oscuro automático, el tema redefine esas variables y tus reglas se adaptan sin esfuerzo. Una regla con background:#fff seguiría blanca en un sitio que se ha vuelto oscuro; con background:var(--card), se adapta.

Las direcciones de arte definen las mismas variables, más --btn-r para el redondeo de los botones: tus reglas funcionan con ambas. Una excepción: no redefinas --accent. Éclair calcula a partir del color principal el texto de los botones y el color de los enlaces; un color cambiado con CSS escaparía a ese cálculo de contraste.

Ejemplos comentados para Atelier Nova

Cada ejemplo se pega tal cual. Añádelos de uno en uno y mira el resultado antes de pasar al siguiente.

/* Esquinas más discretas y columna de lectura algo más ancha */
:root{--radius:10px;--text-w:46rem}

/* Botones: esquinas a juego con las tarjetas, texto en mayúsculas espaciadas */
.btn{border-radius:var(--radius);text-transform:uppercase;letter-spacing:.06em}

/* Subtítulos H2 de tus textos: color de los enlaces, contraste verificado */
.content>h2{color:var(--link-c)}

La regla .content>h2 solo afecta a los subtítulos de tus textos: los títulos de unas FAQ o de un bloque Puntos fuertes están en su propia sección y no cambian.

/* Banner: título menos macizo, entradilla en el color del texto */
.hero-title{font-size:clamp(2rem, 1.5rem + 2.4vw, 3.2rem)}
.hero-lead{color:var(--text)}

/* Tarjetas de artículos: foto en formato 4/3, extracto limitado a 2 líneas */
.card-img img{aspect-ratio:4/3}
.card-excerpt{-webkit-line-clamp:2}

/* FAQ: la pregunta abierta se distingue */
.faq details[open]{border-color:var(--accent)}
.faq details[open] summary{color:var(--link-c)}

/* Recuadros con una línea a la izquierda, pie de página subrayado */
.callout{border-left:4px solid var(--accent)}
.site-footer{border-top:3px solid var(--accent)}

/* En el móvil, banner más compacto */
@media (max-width:40rem){.hero{padding-top:2rem;padding-bottom:1rem}}

Dos marcadores del tema también funcionan en tu CSS. Las reglas situadas entre /*dark*/ y /*/dark*/ desaparecen cuando el modo oscuro está en «Siempre claro». Las situadas entre /*shop*/ y /*/shop*/ solo se envían si la tienda está abierta.

/*dark*/@media (prefers-color-scheme:dark){
  .hero-img img{filter:brightness(.9)}
}/*/dark*/

/*shop*/
.price .price-now{color:var(--link-c)}
/*/shop*/

¿Por qué no se aplica tu regla?

Tu CSS llega el último: a igualdad de selector, gana. Pero un selector más preciso del tema se impone de todos modos. Tres casos reales: la letra capitular de los artículos del tema Editorial (.content.post>p:first-of-type::first-letter), las imágenes de las tarjetas en modo lista (.cards-list .card-img img) y las fotos cuadradas de los productos (.product-card .card-img img). La solución es repetir el mismo selector:

/* Tema Editorial: sin letra capitular al principio del artículo */
.content.post>p:first-of-type::first-letter{float:none;font:inherit;margin:0;color:inherit}

Para apuntar a un tipo de página, la etiqueta <body> lleva clases útiles: is-post para un artículo, is-page para una página, is-list para el blog y las categorías, hdr-center para la cabecera centrada, cards-list para las listas en modo lista. Evita !important: la regla se vuelve muy difícil de corregir después.

Probar tus reglas sin sorpresas

1. Escribe una regla cada vez, con un comentario que diga lo que hace.
2. Haz clic en Guardar y mira la Vista previa en directo: el inicio, un artículo y la tienda si está abierta, en Ordenador y en Móvil.
3. Abre una página en el editor en modo Visual y pasa al ancho de 390 px.
4. Si el modo oscuro está en «Automático», pon tu dispositivo en modo oscuro y recarga el sitio.
5. Conserva una copia fechada de tu CSS en un archivo de texto.

Para recordar

• Tu CSS se escribe en Ajustes › Apariencia, se añade después del tema y sobrevive a las actualizaciones.
• Escribe con las variables del tema (--bg, --text, --link-c…) para seguir el modo oscuro.
• No cambies nunca el color principal con CSS: usa el ajuste previsto.
• Se eliminan el carácter < y los @import, y el campo admite 64 KB como máximo.
• Guarda y después comprueba en la vista previa, en el modo Visual y en modo oscuro.

Para saber más

• Elegir un tema y ajustar la apariencia: lo que cada tema ya ajusta, antes de escribir una sola línea.
• Personalizar las plantillas del tema: cuando el CSS ya no basta y hay que modificar el HTML.
• Rendimiento: mantener 100 sobre 100: por qué cuenta cada kilobyte de CSS.
• Fuentes: el uso de las propiedades personalizadas de CSS y prefers-color-scheme (en inglés), en MDN.

Todas las lecciones de la ruta