Guía de aprendizaje: Creación de un tema personalizado para el Portal del desarrollador

Personalice el aspecto de la página de inicio del Portal del desarrollador , generando un subtema, configurando el archivo overrides.css e instalando el tema recién personalizado.

Antes de empezar

Debe tener un Portal del desarrollador habilitado y debe tener acceso de administrador para completar esta guía de aprendizaje. La guía de aprendizaje Creación del portal explica cómo habilitar el portal si todavía no lo ha hecho.
Importante: No tiene permiso para incluir ningún código IBM® API Connect dentro de los temas personalizados que cree.

Acerca de esta guía de aprendizaje

La forma de crear un tema personalizado es crear un subtema personalizado del tema API Connect estándar que el Portal del desarrollador utiliza de forma predeterminada. El subtema hereda todos los recursos del tema padre y, a continuación, puede alterar temporalmente recursos específicos para configurar las personalizaciones necesarias.

Esta guía de aprendizaje le lleva a través de las lecciones siguientes:
  1. Creación de un subtema utilizando el generador de temas.
  2. Personalización del archivo overrides.css.
  3. Instalación y habilitación del tema personalizado.

Creación de un subtema

  1. Inicie sesión en el Portal del desarrollador como administrador.
  2. Haz clic en Apariencia > Generar subtema. Se visualiza la ventana Generar subtema .
  3. En la pestaña Generar, introduce un Nombre del subtema, y selecciona CSS para el Tipo de subtema. (Si lo prefiere, puede seleccionar SCSS, pero esta extensión de CSS es para desarrolladores de temas avanzados, y no está cubierta por este tutorial.)Generar ventana de subtema.
  4. Seleccione la plantilla Predeterminada en la que basar su sub-theme . Puede crear un subtema basado en una plantilla de color. Sin embargo, para esta guía de aprendizaje utiliza la plantilla Tema de conexión predeterminado .
  5. Pulse Generar.
  6. Descargue el subtema generado en una ubicación de su elección y extraiga todos los archivos del archivo .zip .
    Nota: El subtema generado está disponible para su descarga durante 24 horas.

Personalización del archivo overrides.css

En el sistema, vaya a los archivos que ha extraído. Busque el archivo overrides.css aquí: <extract_folder>/css/overrides.css. Ahora puede personalizar el archivo overrides.css .

  1. Abra el archivo overrides.css en el editor elegido.
  2. Personalice el subtema especificando los siguientes elementos en el archivo overrides.css :
    /* Body of the home page */
body.path-frontpage.contexthome {
  color: #152935;
  background-color: #d1f0f7;
}

/* Header of the home page */
.navbar {
  background-color: #a0a0a0;
}

/* Footer of the home page */
footer.footer {
background-color: #dee0e2;
}

footer.footer ul.nav > li > a {
color: #454A4C;
}
    Copie el bloque de código proporcionado en el archivo css
  3. Guarde el archivo overrides.css.

Instalación y habilitación del tema personalizado

  1. Cuando haya terminado de actualizar el archivo overrides.css , vuelva a comprimir todos los archivos de tema en el archivo de subtema .zip que ha descargado originalmente.
    Nota: También puedes incluir tu propio logotipo y favicon personalizados en los archivos de tu tema, y estos se incluirán como parte de tu tema cuando se instale. Estos archivos deben utilizar la convención de nomenclatura logo.svg, y favicon.ico, respectivamente. También puedes cambiar el logotipo y el favicon más adelante, consulta Cambiar el logotipo del sitio y Cambiar el icono de acceso directo.
  2. En el Portal del desarrollador, haz clic en Apariencia > + Añadir tema nuevo. Se visualiza la ventana Add new theme .
  3. En Cargar un módulo o archivador de tema, pulse Examinary vaya al archivo de tema comprimido recién actualizado.
  4. Pulse Continuar para instalar el tema en el sitio.
  5. Pulse Habilitar temas recién añadidosy busque el tema nuevo en la lista de Temas inhabilitados. Pulse Habilitar y establecer como predeterminado para establecer el nuevo subtema personalizado como el tema predeterminado para el sitio.
  6. Vuelva a la página de inicio del Portal del desarrollador pulsando Volver al sitio. Ahora puede ver el tema personalizado.
    La página de inicio con el tema actualizado

Qué ha hecho en esta guía de aprendizaje

En esta guía de aprendizaje, ha llevado a cabo las siguientes tareas:
  • Ha creado un subtema del sitio Portal del desarrollador utilizando el generador de temas.
  • Ha configurado algunos elementos de página de inicio personalizados en el archivo overrides.css del subtema.
  • Ha cargado e instalado el tema personalizado en el sitio del Portal del desarrollador .
  • Se ha personalizado correctamente el aspecto de la página de inicio del Portal del desarrollador .