Cómo personalizar el tema

Estás consultando la documentación de Apigee Edge.
Consulta la documentación de Apigee X.
Información

Un tema es una colección de archivos que define el aspecto de un sitio. El portal de servicios para desarrolladores se define inicialmente con un tema predeterminado que puedes personalizar. Esto te permite seleccionar tus preferencias para la apariencia de tu portal. De manera más específica, puedes cambiar el color de los vínculos, los fondos, el texto y otros elementos de temas. También puedes cambiar el mensaje de bienvenida que aparece en la portada del portal para desarrolladores.

Puedes personalizar el tema a través de la IU del portal para desarrolladores o escribiendo código en un archivo de tema personalizado para anular el archivo de tema predeterminado.

Según la versión del portal para desarrolladores, tendrás varios temas para elegir:

Tema Descripción

Tema responsivo de Apigee

Basado en Bootstrap 3, el tema predeterminado para las versiones posteriores del portal. Este tema es compatible con dispositivos con anchos de 768 a 1,400 píxeles. Todas las funciones de Bootstrap 3 están disponibles en este tema.

Nota: Para usar el tema responsivo de Apigee, asegúrate de que el tema Bootstrap 7.x-3.0 esté habilitado.

Tema de DevConnect de Apigee

El tema predeterminado del portal anterior al tema responsivo de Apigee.

Los portales existentes se pueden actualizar al nuevo tema responsivo de Apigee, pero primero debes asegurarte de que todos los bloques, las plantillas y otro contenido sea compatible con Bootstrap 3, y que el tema Bootstrap 7.x-3.0 esté habilitado.

Tema básico de Apigee

Un tema superior para el tema DevConnect de Apigee y no diseñado para usarse por sí solo.

Cómo configurar el tema predeterminado

Si tu portal aún usa el tema anterior de Apigee DevConnect, es posible que veas una advertencia con el siguiente formato:

"Apigee DevConnect theme" is out of date 

Puedes usar el siguiente procedimiento para configurar el tema predeterminado del portal. Siempre debes probar un tema nuevo en un sistema que no sea de producción antes de implementarlo en ese entorno.

Para establecer el tema predeterminado, haz lo siguiente:

  1. Accede a tu portal como un usuario con privilegios de administrador o de creación de contenido.
  2. En el menú de administración de Drupal, selecciona Appearance. Aparecerá la lista de temas habilitados.
  3. Elige Establecer como predeterminado para el tema que quieras usar como predeterminado.
    Para usar el tema responsivo de Apigee, asegúrate de que el tema Bootstrap 7.x-3.0 también esté habilitado en esa página.
  4. Guarde la configuración.

Personaliza el tema responsivo de Apigee

En esta sección, se describe cómo configurar el tema responsivo de Apigee, incluidos los siguientes temas:

  • Personalización de formularios modales
  • Cómo personalizar la configuración general

Para personalizar la compatibilidad con formularios modales, sigue estos pasos:

El portal usa el módulo de zona de pruebas Formularios modal de Drupal de arranque para mostrar los formularios de Drupal como modales. De forma predeterminada, los formularios de acceso y registro funcionan como modales. Puedes inhabilitar esta función para que esos formularios aparezcan como páginas individuales.

  1. Accede al portal para desarrolladores como un usuario con privilegios de administrador.
  2. Selecciona los formularios Configuration > User Interface > Bootstrap Modal en el menú de administración de Drupal.
  3. Habilita o inhabilita la compatibilidad modal para formularios.
  4. Selecciona Guardar configuración.

Para personalizar la configuración general del tema responsivo de Apigee, haz lo siguiente:

  1. Accede a tu portal como un usuario con privilegios de administrador o de creación de contenido.
  2. Selecciona Appearance en el menú de administración de Drupal. Aparecerá la lista de temas habilitados.
  3. En el área Capacidad de respuesta de Apigee (tema predeterminado) de la página, selecciona Configuración (no selecciones el botón Configuración en la parte superior de la página).
  4. Aparecerá la página de configuración del tema responsivo de Apigee.
  5. En la siguiente tabla, se describen las áreas de esa página que puedes usar para configurar el tema. Si cambias alguno de estos parámetros, selecciona Guardar configuración.

    Área Sección Descripción

    Configuración de arranque

    Componentes

    Controla la visualización de las rutas de navegación, la posición del menú principal (llamado barra de navegación en la configuración) y la visualización de los pozos regionales:

    • Rutas de navegación: Oculta o muestra la ruta de navegación, activa o desactiva el vínculo a la página principal dentro de la ruta de navegación.
    • Navbar: Cambia la posición de la barra de navegación (menú principal) a posiciones fijas, estáticas o normales para que el diseño sea más dinámico.
    • Pozos regionales: Agrega una clase de pozo a cualquier región del sitio para agregar un fondo más oscuro a la región.

    JavaScript

    Controla la visualización de anclas, ventanas emergentes y información sobre la herramienta:

    • Fijos: Corrige las posiciones de los anclajes y habilita un desplazamiento fluido.
    • Elementos emergentes: Los elementos emergentes agregan pequeñas superposiciones de contenido a cualquier elemento. Habilita o inhabilita las ventanas emergentes y configura su uso.
    • Sugerencias sobre herramientas: Configura cómo se usan los cuadros de información. Puedes forzar que cada cuadro de información se muestre a la derecha, izquierda, superior o inferior de cada elemento del formulario y configurar otras opciones de visualización.

    Avanzado

    Controla la manera en que el portal usa BootstrapCDN para actualizar los archivos de tema de Bootstrap. Puedes inhabilitar la dependencia del portal en BootstrapCDN, pero luego debes proporcionar tu propia implementación del framework de Bootstrap.

    Configuración de DevConnect

    Configura el mensaje de bienvenida, los colores predeterminados y el tamaño del logotipo que aparece en el menú principal.

    Cómo anular la configuración global

    Activa o desactiva la pantalla

    Habilitar e inhabilitar la visualización de diferentes áreas del portal

    Configuración de la imagen del logotipo

    Especifica la imagen que se muestra en el menú principal.

    Configuración de los íconos de accesos directos

    Especifica la imagen que se muestra en la barra de direcciones de un navegador o para que se agregue a los favoritos del portal.

Personaliza el tema de DevConnect de Apigee

El tema DevConnect de Apigee es el tema predeterminado del portal para las versiones anteriores del portal y se puede actualizar al nuevo tema responsivo de Apigee. Sin embargo, primero debes asegurarte de que todos los bloques, las plantillas y otro contenido sean compatibles con Bootstrap 3 antes de realizar la actualización.

Para personalizar la configuración general del tema de DevConnect de Apigee, haz lo siguiente:

  1. Accede a tu portal como un usuario con privilegios de administrador o de creación de contenido.
  2. En el menú de administración de Drupal, selecciona Appearance > Apigee DevConnect theme > Settings. Se mostrará la configuración inicial del tema. Las opciones de configuración de color se especifican como valores hexadecimales.

  3. Cambia la configuración según tus preferencias.
    Por ejemplo, agrega o modifica el mensaje de bienvenida, o bien cambia el color de fondo del encabezado. El color de fondo del encabezado se establece inicialmente en algo similar a naranja (#FF4300). Puedes cambiarlo a otro color, como el azul (#0000FF).
  4. Cuando hayas terminado de cambiar la configuración, haz clic en Guardar.

Cómo personalizar un tema creando un subtema

Todos los archivos y recursos que definen los temas predeterminados que se envían con el portal se encuentran en el directorio profiles/apigee/themes, en el directorio de instalación del portal. Este directorio se encuentra en /var/www/html/profiles/apigee/themes si instalaste el portal en la ubicación predeterminada.

Si quieres editar un tema para modificar el aspecto del sitio, no modifiques directamente los archivos de tema en profiles/apigee/themes. Si lo haces, se reemplazarán los cambios la próxima vez que actualices el portal.

En su lugar, crea un subtema del tema que quieres modificar copiando los archivos de temas predeterminados en el directorio /sites/all/themes. Para obtener instrucciones sobre los subtemas, consulta la documentación de Drupal en https://www.drupal.org/node/225125.

La documentación de Drupal especificada anteriormente incluye información detallada sobre la creación de un subtema, pero a continuación se indican los pasos generales para crear un subtema del tema responsivo de Apigee:
  1. Copia la carpeta profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit en la carpeta /sites/all/themes.
  2. Cambia el nombre de la carpeta apigee_responsive_starterkit por YOUR_THEME_NAME.
  3. Cambie el nombre del archivo apigee_responsive_starterkit.info por YOUR_THEME_NAME.info.
  4. Cambia el nombre de css/apigee_responsive_starterkit.css a css/YOUR_THEME_NAME.css.
  5. Cambia el nombre de js/apigee_responsive_starterkit.js por YOUR_THEME_NAME.js.
  6. Edita el archivo YOUR_THEME_NAME.info y reemplaza las siguientes líneas:

    stylesheets[all][] = css/apigee_responsive_starterkit.css
    scripts[] = js/apigee_responsive_starterkit.js


    con:

    stylesheets[all][] = css/YOUR_THEME_NAME.cs][js]
  7. Cambia el nombre del tema en el archivo YOUR_THEME_NAME.info de Apigee Responsive Starter Kit por YOUR_NAME.
  8. Si deseas agregar una nueva captura de pantalla para tu tema, reemplaza el archivo screenshot.png existente.
  9. Si deseas agregar un logotipo nuevo a tu tema, reemplaza el archivo logo.png existente.
  10. Si deseas agregar un nuevo ícono de página a tu tema, reemplaza el archivo favicon.ico existente.