CSS personalizado en Document360 te permite aplicar tu propio código CSS para cambiar la apariencia visual de tu base de conocimientos más allá de lo que ofrecen los ajustes de personalización integrados del sitio. Escribes las reglas CSS directamente en el portal y se aplican globalmente en todo tu sitio de base de conocimiento. Esta es la herramienta adecuada cuando necesitas un control preciso sobre la tipografía, los colores, el espaciado, los estilos de tablas, la alineación de imágenes o cualquier otro elemento visual que no pueda configurarse con los ajustes estándar.
Cuándo usar CSS personalizado
Usa CSS personalizado cuando las opciones de estilo integradas en la personalización del sitio no te den el nivel de control que necesitas:
- Anular estilos predeterminados : cambia la apariencia de elementos que no están expuestos en la configuración de Personalizar sitio, como los colores de llamada, los bordes de la tabla o el botón de "volver arriba".
- Aplica una tipografía coherente con la marca : establece una familia de fuentes, tamaño o peso específicos en todos los artículos para que se ajusten a las directrices de diseño de tu producto.
- Corregir problemas de disposición o espaciado : ajustar márgenes, relleno o alineación para elementos específicos que aparezcan de forma diferente a la prevista.
- Aplica tratamientos visuales a las imágenes : alinea imágenes centradas en los artículos, añade sombras o establece dimensiones consistentes para las ilustraciones de los artículos.
Para personalizaciones comunes - fuente de cuerpo, fuente de encabezado, estilos de tablas, alineación de imágenes, colores de referencia y fondo de sección de héroes - Document360 ofrece fragmentos CSS predefinidos que puedes insertar con un solo clic. Consulta fragmentos de CSS antes de escribir CSS personalizado desde cero.
Antes de que empieces
- Debes tener una cuenta de equipo con acceso a nivel de administrador al portal de la Base de conocimientos.
- El CSS personalizado se aplica globalmente a todo el sitio de la base de conocimiento: los cambios afectan a todas las páginas y a todos los lectores.
- Document360 no valida ni elimina tu código CSS, por lo que los errores no se marcarán automáticamente.
- CSS mal formado o contradictorio puede romper el diseño del sitio. Prueba bien tus cambios antes de guardar.
:::
Cómo añadir CSS personalizado
- Navega a Configuración () > Sitio de la base de conocimientos en la barra de navegación izquierda del portal de la base de conocimientos.
- En el panel de navegación izquierdo, navega hasta personalización del sitio.
- Haz clic en CSS y JavaScript personalizados.
- Selecciona la pestaña CSS . Aparece el editor de código CSS.
- Introduce tu código CSS en el área de texto.
- Pulsa Ctrl + S o haz clic en Guardar para aplicar tus cambios.
El CSS ahora se aplica a tu sitio de base de conocimientos. Visita el sitio para adelantar los cambios.
Cómo usar fragmentos de CSS
Los fragmentos de CSS son bloques de código preescritos que puedes insertar directamente en el editor CSS. Cubren las tareas de personalización más comunes y están diseñadas para adaptarse a tus necesidades específicas.
- Navega a Configuración () > Sitio de la base de conocimientos Personalización del sitio > CSS y JavaScript personalizados.
- Selecciona la pestaña CSS .
- Haz clic en Añadir fragmentos de código en la esquina superior derecha del editor de código.
- En el panel de fragmentos, haz clic en el fragmento deseado. El código se inserta en el editor CSS.
5. Modificar el código insertado según sea necesario, por ejemplo, reemplazar el nombre de la fuente, el código de color o el valor de tamaño.
6. Pulsa Ctrl + S o haz clic en guardar.
Para recorridos detallados de cada fragmento, consulta fragmentos CSS.
Mejores prácticas
- Usa los fragmentos precompilados como punto de partida ; incluso si necesitas personalizar mucho, empezar desde un fragmento garantiza los selectores y la estructura correctos para el HTML de Document360.
- Usa selectores específicos : evita los selectores amplios, como
bodyo*a menos que sea intencionado. Los selectores específicos reducen el riesgo de anular accidentalmente otros estilos. - Comenta tu código : añade comentarios para explicar qué hace cada bloque, especialmente si varios miembros del equipo gestionan el CSS. Ejemplo:
/* Centers all article images — added June 2026 */ - Prueba tanto en modo claro como oscuro : los estilos que se ven correctos en modo claro pueden tener problemas de contraste o visibilidad en modo oscuro. Siempre previsualiza ambos antes de guardar.
- Haz una copia de seguridad : antes de hacer cambios importantes, copia el CSS actual a un archivo de texto. Document360 no mantiene un historial de versiones de los cambios personalizados en CSS.
Preguntas frecuentes
¿Puedo aplicar archivos de .css personalizados en Document360?
Sí. Document360 te permite consultar y aplicar archivos personalizados .css para adaptar la apariencia y el estilo de tu documentación.
Si gestiono varias marcas, ¿necesito un espacio de trabajo separado para cada una?
Puedes gestionar varias marcas ya sea creando espacios de trabajo separados dentro de un mismo proyecto, o comprando proyectos adicionales para cada marca. CSS configurado a nivel de proyecto se aplica universalmente en todos los espacios de trabajo. Aún puedes personalizar el estilo de las landing pages y otros elementos para cada espacio de trabajo individualmente.
¿Por qué no aparece CSS personalizado en el enlace de vista previa compartible?
Las integraciones personalizadas de CSS, JavaScript y HTML no se aplican en el enlace de vista previa compartible. Este es un comportamiento esperado: estas personalizaciones están intencionadamente desactivadas en los previos compartidos para garantizar un rendimiento y seguridad consistentes cuando el contenido se comparte externamente. Para ver la apariencia final de tus cambios en CSS, publica el artículo y accede directamente desde la base de conocimiento, o utiliza un entorno sandbox.