CSS personalizado

Herramientas de IA

⭐

Available in Pro Projects

Aplica cambios de CSS en todo el proyecto y habilita el control total del diseño con CSS personalizado.

¿Necesitas ser más específico?

Si deseas aplicar (o probar) en una versión, puedes usar el selector .customise .version-{{versionSlug}}.

Personalizar el CSS

Para personalizar el CSS:

Abre Project Settings → Customisation.
En la tarjeta Custom code, haz clic en Edit CSS.
Introduce el CSS personalizado y haz clic en Save draft en el menú superior. Esto guardará el CSS en modo borrador, para que puedas probarlo.
Para publicarlo a los lectores, haz clic en Save & publish.
Para descartar los cambios del borrador, haz clic en Revert.

El CSS se aplicará de inmediato.

CSS de la organización

Si tus proyectos pertenecen a una organización, el propietario puede mantener una hoja de estilos compartida entre ellos desde Configuración de la organización → Custom CSS.

Un proyecto no la hereda automáticamente. Para activarla, abre Project Settings → Customisation y activa Use organisation CSS. La hoja de estilos de la organización se aplica primero y el CSS propio del proyecto después, de modo que una regla del proyecto prevalece sobre una regla de la organización con la misma especificidad.

Probar el CSS

Probablemente quieras probar los cambios de CSS antes de enviarlos a tus clientes. Para probar el CSS, haz clic en Save draft en el menú superior mientras editas el CSS. En esta etapa, el CSS se aplicará de inmediato dentro del editor. Para comprobar lo que ven tus lectores, abre la documentación publicada en una ventana de incógnito de tu navegador.

Puedes revertir el borrador con el botón Revert del menú superior.

Revertir el CSS en borrador

Cuando reviertes el CSS, los cambios del borrador se descartan y se pierden.

Probar con la aplicación frontend fijada

Para probar la última aplicación frontend en el sitio de los lectores si tu aplicación frontend está fijada, añade ?deployment_id=latest a la URL. Para confirmar qué versión de la aplicación se está usando, revisa el encabezado X-DeveloperHub-Version en la primera solicitud de red.

Probar el tema oscuro

Para probar el tema oscuro sin habilitarlo para tus lectores, usa la función Change Theme para aplicar el tema sin modificar los ajustes del proyecto.

Desactivar estilos

Para probar si un estilo aplicado con CSS personalizado causa problemas, quizá quieras desactivar momentáneamente todos los estilos personalizados solo en tu navegador. Para ello, añade el parámetro ?disableStyles=true a cualquier URL de la documentación publicada.

Por ejemplo, si tu documentación está disponible en https://example.com/docs, puedes desactivar los estilos personalizados durante tu sesión usando https://example.com/docs?disableStyles=true.

Cuando actualices la página sin disableStyles=true, los estilos personalizados volverán a estar habilitados.

¿Por qué personalizar el CSS?

Al personalizar el CSS, puedes:

Aplicar una imagen al encabezado de navegación.
Cambiar el estilo del índice.
Añadir iconos a las categorías del índice o aplicar una transformación suave de color como en nuestra documentación.
Animar botones.
Importar otro archivo CSS usando @import url(...) .
Usar tu propia fuente personalizada (que no sea de Google Fonts).
Crear una página de inicio personalizada, eliminando barras laterales y títulos.
Cambiar el tema del código.
O cualquier cosa que se te ocurra...

Advertencia

El CSS no está encapsulado y se aplica globalmente. El CSS de DeveloperHub cambia con frecuencia y no podemos garantizar un diseño consistente (consulta Fijar la versión de la aplicación frontend). Quizá quieras añadir !important a tus estilos.

Buenas prácticas de CSS

El CSS de DeveloperHub no está encapsulado y se aplica globalmente. Esto significa que puedes cambiarlo todo, ¡incluido lo que ves en el editor y el propio editor! Un gran poder conlleva una gran responsabilidad, así que sigue estas buenas prácticas. Los ejemplos desarrollarán un caso: "Cómo cambiar el color del título de la página".

Asegura la compatibilidad multiplataforma

Asegúrate de que los cambios de CSS personalizado se adapten a todos los tamaños de pantalla y dispositivos de entrada. El CSS predeterminado está diseñado para teléfonos, tabletas, portátiles y pantallas grandes. Prueba siempre los cambios de CSS en todos los tamaños para garantizar la satisfacción de los lectores.

1 Usa `.customise`

.customise es un selector CSS que probablemente deberías usar en todas tus reglas CSS. .customise encapsula todo lo que no es el editor, que es todo lo que quizá quieras personalizar. Por ejemplo:

/* DON'T DO THIS ❌ - Will change all heading 1 everywhere, in editor, in dashboard... horrible */ h1 { color: green !important; } /* PREFER TO DO THIS - Will change all heading 1 only where it is expected to be changed */ .customise h1 { color: green !important; }

2 Usa `.live`

.live es un selector CSS que probablemente deberías usar en todas tus reglas CSS. .live encapsula el CSS que solo se carga en tu sitio de documentación publicado, pero no en el editor. Cambiar los estilos de la página en el editor podría causar inconsistencias y romper funciones si el CSS no se escribe con mucho cuidado, por lo que es mejor que estos estilos solo se apliquen en el sitio publicado. Por ejemplo:

/* DON'T DO THIS ❌ - Will change all heading 1 only in live docs site and editor */ .customise h1 { color: green !important; } /* PREFER TO DO THIS - Will change all heading 1 only in the live docs site */ .customise.live h1 { color: green !important; }

3 Usa selectores específicos

En los ejemplos anteriores, h1 es un selector bastante vago. Si queremos cambiar el color del título de la página, lo mejor es usar su selector específico y solo en Documentation.

/* DON'T DO THIS ❌ - Will change all heading 1 only in live docs site */ .customise.live h1 { color: green !important; } /* DO THIS INSTEAD ✅ - Will change the page title only in Documentation in the live docs site */ .customise.live .documentation .title-container>.title { color: green !important; }

No cambies estilos genéricos

Cambiar el CSS de selectores genéricos como table, p, .container, .row, img, etc. modificará el aspecto global y probablemente romperá la funcionalidad tanto del editor como de la vista publicada. Usamos Bootstrap intensamente y no se recomienda cambiar sus estilos estándar. En su lugar, busca un selector específico para aplicar los estilos.

Si estás creando una página de inicio, crea selectores específicos. Por ejemplo, si quisieras usar un .container, añade también un selector .x-container en el contenedor y aplica los estilos en .x-container en lugar del genérico .container.

Ejemplos de personalización de CSS

Consulta Personalizaciones populares.

Ejemplos en la página

Como no queremos cambiar el estilo de nuestra documentación (nos encanta tal como es), mostraremos aquí algunos elementos con estilo.

Botón de registro con efecto al pasar el cursor.

Enlaces a otras documentaciones.

Documentation

Reference

Formularios de registro.

We'll send you updates every week

Variables CSS

Hemos configurado variables que puedes cambiar para modificar fácilmente el aspecto. Cuando se establece el tema, esas variables se modifican automáticamente.

:root { --brand: #5368e7; /* Your brand color - auto assigned from project */ --brand-transparent: #5368e754; /* Your brand color with transparency - auto assigned from project */ --reference-hue: 230; /* Your brand color's hue - used in reference right column */ --font: Nunito, "SansSerif"; /* Your font - auto assigned from project */ --font-size: 15px; /* Font size for page content */ --secondary-font-size: 16px; /* Font size for index content */ --link: #ff536b; /* Your link color - auto assigned from project */ --inline-code: #444444; /* Your inline code color */ --inline-code-bg: #f5f7f7; /* Your inline code background color */ --nav-link: #FFFFFF; /* Your navigation link color - auto generated from brand and link colour */ --dominant: #5368e7; /* Your dominant colour - auto generated from brand and link colour */ --code-font: Roboto Mono,Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace; /* Font used for code blocks */ --code-font-size: 13px; /* Size of font used for code blocks */ --bg-color: #FFF; /* Background color */ --alt-bg-color: #FFF; /* Used in some controls for differentiating from background color in dark mode */ --font-color: #444; /* Font color */ --heading-color: #2a2a2a; /* Heading color */ --text-secondary-color: #666; /* Image caption color */ --category-color: #555; /* Category (in index) color */ --toc-link-color: #666; /* TOC text color */ --table-second-color: #FAFAFA; /* Alternating table background color */ --page-border-color: #F1F1F1; /* Left and bottom page border color */ --index-width: calc(var(--secondary-font-size) * 18); /* Width of documentation index */ --reference-index-width: calc(var(--secondary-font-size) * 16); /* Width of reference index */ --dropdown-animation: dropdownIn 500ms cubic-bezier(0, 1, 0.4, 1); /* Animation when dropdown opens */ } .customise .references { --required-text: '*'; /* Text that shows to denote that a field is required in request/response bodies */ }

Para modificar las variables usadas cuando el tema oscuro está habilitado, usa el selector .dark-mode, por ejemplo:

.dark-mode { --brand: #123456; --link: blue; }

Grosores de fuente

Si la fuente que asignaste no tiene todos los grosores que usamos en DeveloperHub, puedes reasignar algunos grosores a otro:

:root { --fw-100: 100; --fw-200: 200; --fw-300: 300; --fw-400: 400; --fw-500: 500; --fw-600: 600; --fw-700: 700; --fw-800: 800; --fw-900: 900; }

Por ejemplo, si el grosor 500 no existe, puedes establecer --fw-500: 600, de modo que se use el grosor 600 siempre que se espere el 500.

Otras variables

Tenemos más variables que no se mencionan aquí, como --shadeX y --helperX, que no están pensadas para que el usuario las modifique. Cambiarlas conducirá sin duda a resultados inesperados.

Fijar la versión de la aplicación frontend

A medida que desarrollamos nuevas funciones para DeveloperHub, es posible que cambiemos el DOM, el CSS y el JavaScript que componen tu sitio de documentación. Estos cambios podrían interferir con tu CSS personalizado (si tienes muchos cambios) y provocar un estilo inesperado en el sitio.

Para evitarlo, puedes fijar la versión de la aplicación frontend a un despliegue concreto. Esto significa que ningún cambio que hagamos en la aplicación de una sola página se reflejará a tus lectores. También podemos fijar automáticamente la versión de tu aplicación frontend cuando hagamos cambios importantes que puedan afectar a tu CSS personalizado.

Para fijar la versión de tu aplicación frontend:

Abre Project Settings → Advanced.
Haz clic en el botón junto a Pin frontend application version.
Elige una versión según su fecha y descripción.

Para dejar de fijar la versión de la aplicación frontend, elige Latest version.

El cambio puede tardar hasta 5 minutos en reflejarse en el sitio de documentación. Solo se refleja en el sitio de los lectores, no en el editor.

Importante

Aunque esto garantiza que tus lectores no vean estilos inesperados, también detiene todas las actualizaciones de tu sitio de documentación. Se espera que modifiques el CSS personalizado lo antes posible y vuelvas a Latest version. No garantizamos que las versiones anteriores sigan funcionando.

Migrar a la última versión de la aplicación frontend

Si tienes fijada otra versión de la aplicación y quieres pasar a la última versión de la aplicación frontend para obtener las funciones más recientes, haz lo siguiente:

Prueba cómo se vería la documentación con la última versión de la aplicación frontend

Para probar la última aplicación frontend en el sitio de los lectores si tu aplicación frontend está fijada, añade ?deployment_id=latest a la URL. Para confirmar qué versión de la aplicación se está usando, revisa X-DeveloperHub-Version header en la primera solicitud de red.

Carga al menos la página de inicio, una página de documentación y la referencia de la API con ?deployment_id=latest al final de la URL y comprueba que las páginas se vean como esperas. Si no, modifica el CSS/JS en modo borrador y sigue iterando hasta que las páginas se vean perfectas.

?deployment_id=latest es temporal

Asegúrate de añadir ?deployment_id=latest cada vez que recargues la página y quieras verla en la última versión de la aplicación.

Publica los cambios de CSS/JS

Como tus cambios de CSS/JS ya son perfectos, publícalos para tus lectores.

Deja de fijar la versión de la aplicación frontend

Para dejar de fijar la versión de tu aplicación frontend:

Abre Project Settings → Advanced.
Haz clic en el botón junto a Pin frontend application version.
Elige "Latest".

customisation

Última actualización por Zaid Daba'een el Aug 17, 2026

Anything missing? Leave us feedback