En casi todas las comisiones directivas hay alguien que sabe un poco de CSS. Armó el sitio de su negocio, hizo un curso de diseño web o simplemente le gusta toquetear. Tarde o temprano mira la web del club y dice: "Si me dejara, arreglo ese espaciado en dos líneas".
El CSS personalizado se lo permite. Bien usado, es ese último diez por ciento de detalle que hace que el sitio se sienta de tu club. Mal usado, es una maraña de reglas que nadie más entiende, que se rompe la primera vez que cambia la plataforma y que se convierte en un problema de traspaso en la siguiente asamblea anual.
Esta guía explica cuándo la web de un club necesita de verdad CSS personalizado, qué probar antes, qué debería permitir y rechazar una función de CSS personalizado segura (y por qué), y los hábitos que mantienen útil una hoja de estilos cuando quien la escribió ya no está.
Qué es el CSS, en un párrafo
El CSS es el lenguaje que controla cómo se ve una página web: colores, tamaños, espaciado, bordes, tipografías y distribución. El contenido de la página dice "esto es un título, esto es una foto, esto es una lista de patrocinadores"; el CSS dice "los títulos son verde oscuro y en negrita, las fotos tienen las esquinas redondeadas, los logotipos de los patrocinadores van en fila con espacio entre ellos". Un cuadro de CSS personalizado te permite agregar tus propias reglas encima de las que ya usa la plataforma.
Prueba primero los ajustes integrados
La mayor parte de lo que los clubes intentan resolver con CSS se puede hacer sin escribir una sola línea. Antes de que alguien abra una hoja de estilos, revisa si los ajustes integrados (el tema, el editor de navegación y los estilos de sección del editor de páginas) ya lo cubren:
- Colores. Los colores del club como paleta del sitio, aplicados a botones, títulos y enlaces en todas partes.
- Tipografías y títulos. La elección de tipografías, el tamaño y el grosor de los títulos, y títulos que se adaptan entre el tamaño del celular y el de la computadora.
- Forma. El redondeo de las esquinas en tarjetas y botones, y los estilos de botón.
- Diseños de encabezado y pie de página. Dónde va el logotipo, cómo se organiza el menú, el fondo del encabezado y un pie de página con una franja de patrocinadores.
- Estilos de sección. Un banner principal, una franja destacada en el color de tu marca, una columna de lectura estrecha, dos columnas o una imagen a todo lo ancho, aplicados a una sección a la vez.
Los ajustes integrados tienen dos grandes ventajas sobre el CSS: la siguiente persona voluntaria puede verlos y cambiarlos sin leer código, y siguen funcionando cuando la plataforma se actualiza. Si un ajuste puede hacerlo, usa el ajuste. Nuestra guía para diseñar el logotipo de un club cubre las decisiones de marca que deberían venir antes de todo esto.
Buenas razones para usar CSS personalizado
El CSS personalizado se gana su lugar en ajustes pequeños y concretos para los que el tema nunca iba a tener una opción:
- Ajustar el espaciado de un tipo de sección que se siente apretada o demasiado vacía.
- Darles a las fotos esquinas redondeadas, un borde o una sombra sutil para que combinen con el estilo de tu material impreso.
- Ajustar una sola sección, como una franja de patrocinadores, una tabla de resultados o una cita, sin afectar el resto de la página.
- Retoques para pantallas pequeñas con una consulta de medios (media query), para una sección que se lee mejor en el celular con un tamaño un poco distinto.
- Una transición suave o un efecto al pasar el cursor sobre tarjetas o botones.
Fíjate en el patrón: todas son pequeñas y estéticas. Una hoja de estilos hecha de reglas así es fácil de leer y fácil de borrar.
Malas razones para usar CSS personalizado
Algunos usos del CSS causan más problemas de los que resuelven:
- Ocultar contenido que prefieres no mantener. Si una sección está desactualizada, actualízala o quítala. El contenido oculto se sigue enviando a cada visitante y los buscadores lo siguen leyendo.
- Rehacer la distribución. Si estás reescribiendo cómo se organiza toda la página, estás peleando contra la plataforma. Usa secciones y barras laterales, o pide ayuda.
- Trucos de color con poco contraste. Un texto gris claro sobre fondo blanco se ve elegante en una maqueta y es ilegible en un celular a pleno sol. La guía sobre una web de club accesible explica por qué el contraste importa para tus socios.
- Copiar una hoja de estilos grande de otro lado. Una hoja de estilos escrita para otro sitio está escrita para el código de ese sitio. La mayor parte no hará nada, y una parte hará algo raro.
Qué permite una función de CSS personalizado segura y qué rechaza
Un cuadro de CSS personalizado es potente justamente porque el navegador confía en él. Por eso mismo una plataforma que aloja cientos de sitios de clubes tiene que ponerle límites. Así traza la línea ClubHelix, y por qué.
Lo que puedes hacer. Dar estilo a la distribución, el espaciado, los tamaños, los bordes, los colores, los fondos, la tipografía, las transformaciones, las transiciones y las animaciones. Usar consultas de medios, de características y de contenedor, y animaciones con fotogramas clave (media queries, feature queries, container queries y keyframes). Leer las variables de color y de tipografía de tu propio tema, para que tus reglas sigan al tema cuando cambie.
Lo que se rechaza, y por qué:
- Cargar cualquier cosa desde otro sitio web. Se rechaza importar otra hoja de estilos, cargar una tipografía web o traer una imagen de otro lugar. Todo lo que se carga desde otro sitio le permite a ese sitio ver a tus visitantes y puede cambiar sin que te enteres. Las imágenes de tu CSS solo pueden venir de tus propios archivos subidos.
- Superposiciones fijas y pegajosas. Se rechaza posicionar algo para que quede encima de la página, y el orden de apilamiento está limitado a un número bajo. Una superposición es la forma en que una página termina tapada por un cuadro que no debería estar ahí, ya sea por accidente o por algo peor.
- Dar estilo fuera de tu sitio. Cada regla se limita automáticamente a tu sitio público. Las reglas dirigidas a toda la ventana del navegador, como la raíz o el cuerpo de la página, se rechazan con un mensaje en lugar de reescribirse en silencio, porque nunca podrían hacer lo que pretendías. Tus pantallas de administración nunca se ven afectadas, así que un error jamás puede impedirte entrar a corregirlo.
- Definir variables nuevas. Puedes leer las variables del tema, pero no declarar las tuyas, porque una variable puede usarse para colar un valor que las reglas rechazarían.
- Seleccionar campos de formulario por su contenido. Hay un truco de CSS conocido que puede leer lo que alguien escribe en un formulario, carácter por carácter, usando selectores de atributo. Esos selectores se rechazan en los campos de formulario.
Todo se revisa dos veces: al guardar y de nuevo cada vez que se sirve una página. Si se elimina una regla, el editor te dice cuál y por qué, y conserva el resto.
Cómo funciona en ClubHelix
El CSS personalizado forma parte del plan Pro. Hay dos lugares donde ponerlo:
- Para todo el sitio, en Tema → CSS personalizado: una hoja de estilos de hasta 20 KB para todo el sitio público.
- Por sección, en el panel Diseño y estilo de cualquier sección de la columna principal de una página: hasta 2 KB, aplicado solo a esa sección.
El CSS personalizado se aplica solo a tu sitio web público. Si tu organización pasa a un plan inferior, el CSS se conserva pero no se muestra, y vuelve cuando regresas a Pro. La página de temas e identidad visual cubre todo lo que el tema puede hacer sin código, y el editor de páginas en lienzo es donde viven los estilos de sección y el CSS por sección.
Mantén tu hoja de estilos fácil de traspasar
Una hoja de estilos sobrevive a quien la escribe. Estos hábitos evitan que se convierta en la única parte de la web que nadie se atreve a tocar:
- Que sea corta. Si la hoja de estilos de todo el sitio ya ocupa más de una o dos pantallas, pregúntate si el tema o un estilo de sección podría hacer parte del trabajo.
- Una tarea por regla. Una regla que ajusta una sola cosa es fácil de entender y fácil de borrar.
- Anota el porqué. Deja una nota breve en el documento de traspaso de la comisión directiva: para qué sirve cada regla y a qué página afecta. La lista de verificación para el traspaso de la comisión directiva es un buen lugar para ella.
- Revisa en el celular. La mayoría de los visitantes verán tus reglas en una pantalla pequeña. Mira ahí primero.
- Revisa el contraste. Si una regla cambia colores, comprueba que el texto se siga leyendo con facilidad.
- Quita lo que ya no necesitas. Las reglas viejas para secciones que ya no existen son inofensivas hasta que dejan de serlo.
Preguntas frecuentes
¿Necesitamos saber CSS para tener una web de club atractiva?
No. Los colores, las tipografías, los botones, los diseños de encabezado y pie de página y los estilos de sección se configuran sin código. El CSS personalizado es para pequeños ajustes después de eso, y muchos clubes nunca lo usan.
¿Por qué se eliminó parte de mi CSS al guardarlo?
Porque pedía algo que las reglas rechazan, como cargar un archivo desde otro sitio web, fijar una superposición encima de la página o dar estilo fuera de tu sitio. El editor muestra cada regla eliminada y el motivo, y conserva todo lo demás.
¿Puede el CSS personalizado romper nuestras pantallas de administración?
No. El CSS personalizado se aplica solo a tu sitio web público, así que siempre puedes volver a entrar para corregir un error.
¿Qué pasa con nuestro CSS si cambiamos de plan?
Se conserva pero no se muestra por debajo del plan Pro. Vuelve a Pro y aparece de nuevo, sin cambios.
¿Podemos usar nuestra propia tipografía web?
No a través del CSS personalizado: se rechaza cargar tipografías desde otros sitios web. Elige entre las veinte tipografías que el editor de temas sirve a cada visitante o, en el plan Pro, sube los archivos de tipografía WOFF2 propios de tu club en el tema. Nuestra guía sobre tipografías e identidad visual de la web del club explica cómo elegir una combinación y revisar la licencia de una tipografía.
¿Quieres que la web de tu club se parezca a tu club, con código o sin él? Empieza gratis con ClubHelix y configura tu tema esta misma noche.
