Made in DeveloperHub
DeveloperHub admite las siguientes personalizaciones: interfaz, CSS, pie de página, tema (modo oscuro), tema de código, logotipos, color del encabezado, color de los enlaces, fuente y enlaces de navegación.
CSS y pie de página personalizados
Consulta las páginas CSS personalizado y Pie de página personalizado.
Cambiar el logotipo
Para cambiar el logotipo:
Abre Project Settings → Customisation.
En la tarjeta Brand assets, haz clic en Upload logo junto a Logo.
Elige el nuevo logotipo.
La barra superior transparente de Matcha muestra tu logotipo sobre el color de la página, que es casi negro en modo oscuro. Si tu logotipo no se distingue sobre fondo oscuro, haz clic en Upload logo junto a Logo for dark backgrounds y elige una versión para el modo oscuro. Si se deja vacío, se usa el logotipo normal en ambos modos.
También puedes cambiar la URL a la que se navega al hacer clic en el logotipo.
Lo mejor es un logotipo ancho con fondo transparente.
Para cambiar el icono del sitio web (favicon):
Abre Project Settings → Customisation.
En la tarjeta Brand assets, haz clic en Upload favicon junto a Favicon.
Elige el nuevo favicon.
Reescalamos automáticamente tu favicon si es demasiado grande. Ten en cuenta que el favicon solo se muestra en modo en vivo, no en modo de edición.
Los logotipos y el favicon se guardan automáticamente al cambiarlos, sin confirmación.
Cambiar la interfaz
DeveloperHub ofrece tres interfaces: Original, Next y Matcha.
Interfaz Original
La interfaz Original es la primera interfaz de DeveloperHub, destacada por su barra de búsqueda flotante. Las distintas secciones y versiones están ocultas en un menú desplegable, y el índice tiene categorías de colores.
Interfaz Next
La interfaz Next es la nueva interfaz. Presenta un diseño elegante donde las distintas secciones son visibles en la navegación superior, y un índice rediseñado con márgenes más claros y animación. También ofrece una mejor experiencia de búsqueda.
Interfaz Matcha
Matcha es Next con un nuevo estilo, con una barra superior de una sola fila y un índice en árbol. A menos que hayas elegido una fuente, usa IBM Plex Sans. Los proyectos nuevos empiezan con Matcha.
Barra superior transparente
En Matcha, la barra superior puede tomar el color de la página (blanco en modo claro, casi negro en modo oscuro) en lugar del color del encabezado:
Abre Project Settings → Customisation.
En la tarjeta Colour & typography, activa Transparent top bar.
Haz clic en Save changes en el menú superior.
Añade un logotipo para fondos oscuros para que tu logotipo se siga viendo en modo oscuro.
Elegir una interfaz
Para cambiar la interfaz:
Abre Project Settings → Customisation.
En la tarjeta Look and feel, en UI version, elige Original, Next o Matcha.
Haz clic en Save changes en el menú superior.
Si tienes CSS personalizado, compruébalo con la nueva interfaz antes de cambiar. Añade ?ui=3 a la dirección de cualquier página de tu documentación publicada para verla en Matcha (?ui=2 para Next), sin cambiar nada para tus lectores.
En Next y Matcha, las distintas secciones se disponen en la barra de navegación superior. En Matcha, las secciones que no caben pasan a un menú More al final de la barra. En el diseño móvil, se contraen en un menú desplegable selector de secciones.
Eliminar la marca de DeveloperHub
La documentación publicada lleva el nombre de DeveloperHub: un crédito Powered by DeveloperHub al pie de cada página, o un logotipo bajo el índice en el plan gratuito. Puedes publicar sin ella:
Abre Project Settings → Customisation.
En la tarjeta Look and feel, activa Remove DeveloperHub branding.
Haz clic en Save changes en el menú superior.
Eliminar la marca requiere un plan que lo incluya. Consulta Precios.
Cambiar los colores
Los colores del encabezado, los enlaces y la navegación se pueden modificar. Para cambiar los colores:
Abre Project Settings → Customisation.
En la tarjeta Colour & typography, haz clic en la muestra junto al color que quieras cambiar.
Elige el color deseado. Te avisaremos si el color no tiene suficiente contraste. El cambio se previsualiza en vivo en la vista previa del lector integrada en la parte superior del panel.
Haz clic en Save changes en el menú superior.
Asegúrate de que el color de los enlaces sea distinto del color de la fuente. Suele ser el color secundario de tu marca. El texto de tus páginas es casi negro en el tema claro (blanco en el tema oscuro), por lo que necesitas un enlace colorido para que se distinga.
Cambiar la fuente
Para cambiar la fuente de todo el proyecto:
Abre Project Settings → Customisation.
En la tarjeta Colour & typography, haz clic en la fila Font.
Elige de la lista de Google Fonts disponibles. La fuente se previsualiza de inmediato en la documentación actual y en la vista previa del lector integrada en la parte superior del panel.
Haz clic en Save changes en el menú superior.
Cambiar la fuente es una función exclusiva de los planes de pago
Si no usas Google Fonts, puedes servir tu propia fuente en tu portal de documentación como se describe en nuestra entrada del blog: Usar tu propia fuente personalizada
Si la fuente que usas no tiene todos los pesos de fuente que esperamos, puedes cambiar el peso real por uno esperado. Consulta Pesos de fuente.
¿Necesitas más personalización?
Consulta también nuestras personalizaciones populares.
Cuéntanos qué necesitas, ¡nos encantará ayudarte!