CSS personalizado

El CSS personalizado le permite a un club con el plan Pro darle sus propios toques finales a su sitio web público: una tabla de partidos más compacta, una tarjeta con una sombra más suave, un título con un poco más de espacio entre letras. Hay dos lugares donde escribirlo: una hoja de estilos de todo el sitio para el sitio web completo, y un campo CSS personalizado en cada sección de página para dar estilo solo a esa sección.

Todo lo que escribes se revisa antes de guardarse y se vuelve a revisar cada vez que se muestra una página. Lo que podría perjudicar a tus visitantes o romper la página se quita, y se te dice qué se quitó y por qué.

Quién puede usar esto

• Los administradores de tu organización pueden cambiar el CSS de todo el sitio. Los moderadores pueden abrir la página, pero no editarla.
• El CSS de una sección lo puede escribir cualquier persona que pueda editar esa página.
• El CSS personalizado se muestra en tu sitio web solo mientras tu organización esté en el plan Pro. En un plan inferior puedes seguir viendo la página, con una nota sobre el plan.

Qué hay en la página

Abre Tema en la barra lateral de administración y sigue el enlace CSS personalizado junto al tema activo. La página tiene un cuadro de texto grande para tu hoja de estilos, un contador de tamaño (el límite es de 20 KB) y dos botones:

• Revisar lee tu CSS y muestra lo que se quitaría, sin guardar.
• Guardar lo guarda. Tu sitio web público lo muestra de inmediato.

Para una sola sección, abre la página en el editor de páginas, despliega Diseño y estilo en la sección y usa el cuadro CSS personalizado de la parte inferior (el límite es de 2 KB por sección). Muestra lo que se va a quitar mientras escribes.

Paso a paso

Dar estilo a todo tu sitio web

1. Ve a Tema y haz clic en CSS personalizado.
2. Escribe tu CSS. Escribe los selectores como lo harías normalmente, por ejemplo .card { border-radius: 12px }.
3. Haz clic en Revisar para ver si se va a quitar algo.
4. Haz clic en Guardar y luego en Ver tu sitio para ver el resultado.

Dar estilo a una sección

1. Abre la página en el editor de páginas y despliega Diseño y estilo en la sección.
2. En CSS personalizado, escribe reglas para los elementos que hay dentro de la sección, como .stat { font-size: 2rem }.
3. Para dar estilo a la sección en sí, empieza el selector con &, por ejemplo &:hover { opacity: .9 }.
4. Guarda la página como siempre.

Referencia de campos

Qué puedes usar. Diseño (flex, grid, gap, ancho, alto, relación de aspecto), espaciado (margin, padding), bordes, radio de las esquinas y sombras, colores y fondos, tipografía, transformaciones, transiciones y animaciones con @keyframes, además de @media, @supports y @container. Los colores de tu tema están disponibles como variables, como var(--color-primary).

Qué se quita y por qué:

• @import y @font-face: el CSS personalizado no puede cargar otros archivos. Agrega las fuentes en el editor del tema.
• url() que apunte a cualquier lugar que no sean tus propias imágenes subidas, e imágenes en cualquier propiedad que no sea background o background-image.
• position: fixed y position: sticky, y un z-index mayor que 10: pueden tapar toda tu página, incluido el menú.
• content: con texto: las palabras agregadas por CSS pueden confundir a los visitantes, y los lectores de pantalla las omiten.
• Selectores de atributo en campos de formulario (por ejemplo, input[value]): es una forma conocida de leer lo que alguien escribe.
• Propiedades personalizadas (--anything: …): define los colores y las fuentes en el editor del tema.
• @layer, @page, @charset, @namespace, @property, las propiedades con prefijo de navegador y todo lo que el revisor no pueda leer.

Qué se rechaza por completo. Un selector que apunta a :root, html o body, o uno que empieza con *, no se guarda en absoluto, y se te dice por qué. Tu CSS ya se aplica solo a tu sitio web, así que estos selectores no pueden hacer lo que esperarías.

Consejos y preguntas frecuentes

• ¿Cambia la administración? No. El CSS personalizado solo aparece en tu sitio web público, nunca en esta administración, así que nadie puede confundirse con una pantalla de administración con otro estilo.
• ¿Qué pasa si dejamos el plan Pro? Tu CSS se conserva, pero deja de mostrarse en tu sitio web. Vuelve en cuanto estés otra vez en Pro.
• ¿Qué pasa cuando cambiamos de tema? Nada: el CSS personalizado pertenece a tu organización, no a un tema, así que se mantiene.
• ¿Por qué desapareció mi regla después de guardar? Usaba algo de la lista de lo que "se quita" de arriba. Haz clic en Revisar para ver el motivo de cada parte.
• El CSS de mi sección se ve distinto después de guardar. Se guarda en una sola línea, con & delante de cada selector y sin lo que se quitó. Las reglas que se conservaron significan exactamente lo que escribiste.
• ¿Puedo usar una imagen? Sí, como background o background-image, si es una imagen que subiste a tu propio sitio (la dirección empieza con /api/media/). Los visitantes la ven solo si la imagen en sí es pública: una imagen guardada en una página en borrador sigue siendo privada, así que el fondo queda vacío hasta que esa página se publique.
• Para colores, fuentes y botones, usa el editor de Tema; para tu logotipo, consulta Identidad visual.