Los fragmentos de CSS son bloques preescritos de código CSS que puedes insertar directamente en el editor CSS personalizado de Document360 con un solo clic. En lugar de escribir CSS desde cero, seleccionas el fragmento que necesitas, lo insertas en el editor y modificas los valores para que se ajusten a tus necesidades. Document360 ofrece siete fragmentos precargados que cubren las personalizaciones de sitios más comunes de la base de conocimiento.
Cuándo usar fragmentos de CSS
Usa fragmentos de CSS cuando quieras hacer un cambio visual común en tu base de conocimientos rápidamente, sin escribir CSS desde cero:
- Cambia la tipografía : actualiza la tipografía del cuerpo o del encabezado en todos los artículos para ajustarla a las directrices de tu marca.
- Personaliza los estilos de las tablas : aplica bordes consistentes, colores de fondo y relleno a todas las tablas de tu base de conocimiento.
- Alinear imágenes : centrar-alinear imágenes en el contenido del artículo a nivel de todo el sitio usando un solo fragmento.
- Modifica los colores de las señales : cambia los colores de fondo y borde de las llamadas de Información, Advertencia, Error y Éxito para que coincidan con la paleta de tu marca.
- Cambia el fondo del héroe de la página principal : actualiza el color de fondo o degradado de la sección de héroes usando CSS.
- Desactiva el botón de atrás arriba : oculta el botón flotante de volver arriba si entra en conflicto con el diseño de tu sitio.
Los fragmentos de CSS son un atajo hacia las personalizaciones más comunes. Para cambios que no cubren los fragmentos precargados, puedes escribir tu propio CSS directamente en el editor de código. Consulta CSS personalizado para orientación.
Cómo acceder a fragmentos de CSS
- Navega a Configuración () > Sitio de la base de conocimientos } en la barra de navegación izquierda del portal de la Base de conocimiento.
- 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 .
- Haz clic en Añadir fragmentos de código en la esquina superior derecha del editor de código. Aparece el panel de fragmentos.
El panel contiene siete fragmentos precargados:
| Fragmento | Qué hace |
|---|---|
| Cambiar la fuente del texto principal | Actualiza la familia de fuentes y el color del contenido del cuerpo del artículo |
| Cambiar la fuente del encabezado | Actualiza la familia de fuentes y el color para las etiquetas de encabezado H1–H4 |
| Cambiar estilos de tabla | Aplica bordes, relleno, colores de fondo y colores de fila alternos a las tablas |
| Imágenes de alineación central en los artículos | Centra todas las imágenes en el contenido del artículo |
| Cambiar el fondo de la sección de héroes del creador de página principal | Cambia el estilo de fondo de la sección de héroes de la página principal |
| Cambiar los colores de la llamada | Actualiza los colores de fondo y borde de los cuatro tipos de callout |
| Desactivar el botón de 'volver arriba' | Oculta el botón flotante de volver hacia arriba en toda la web |
- Haz clic en cualquier fragmento para insertarlo en el editor CSS.
- Modifica los valores del código insertado para que coincidan con tus requisitos.
- Pulsa Ctrl + S o haz clic en Guardar para aplicar tus cambios.
También puedes escribir tu propio código CSS directamente en el área de texto sin usar los fragmentos precargados. Cualquier CSS válido introducido en el editor se aplica globalmente al sitio de la base de conocimiento.
Guías de fragmentos disponibles
Para recorridos detallados de cada fragmento —incluyendo el código CSS, ejemplos de resultados y consejos de modificación— véase los artículos individuales a continuación:
- Personalización de callouts
- Personalización de la fuente del cuerpo
- Personalización de la fuente del encabezado
- Personalización de estilos de tablas
- Personalización de la alineación de imágenes
Mejores prácticas
- Siempre previsualiza después de guardar : los cambios en fragmentos se aplican globalmente. Revisa cómo se ve el cambio en tipos de artículos, tablas y señalamientos antes de continuar.
- Modifica un fragmento a la vez: inserta y prueba un fragmento antes de añadir el siguiente. Esto facilita identificar qué fragmento causó el problema si algo parece mal.
- Elimina fragmentos antiguos antes de añadir uno nuevo de alineación : si añades un fragmento de alineación de imagen nuevo mientras uno antiguo sigue activo, ambos se ejecutarán y pueden entrar en conflicto. Borra primero el fragmento anterior.
- Usa el fragmento como punto de partida : los valores precargados son valores predefinidos sensatos. Sustituye los nombres de fuentes, los códigos de colores y los valores de tamaño por valores específicos de tu marca.
Preguntas frecuentes
¿Puedo añadir mis propios fragmentos CSS personalizados además de los precargados?
Sí. Puedes escribir y pegar tu propio código CSS directamente en el área de texto de la pestaña CSS. Los fragmentos precargados y tu código personalizado coexisten en el mismo editor — simplemente añade tu código debajo o junto a los fragmentos insertados.
¿Los cambios en fragmentos afectan a todos los espacios de trabajo?
Sí. El CSS se configura a nivel de proyecto y se aplica universalmente en todos los espacios de trabajo. No hay forma de asignar un fragmento a un espacio de trabajo específico a través del editor CSS.
¿Cómo puedo quitar un fragmento que ya no necesito?
Selecciona el código fragmentado en el editor CSS y pulsa Suprimir en tu teclado para eliminarlo. Haz clic en Guardar para aplicar el cambio.