Cómo personalizar el tema

Estás viendo la documentación de Apigee Edge.
Ve a la Documentación de Apigee X. información

Un tema es una colección de archivos que define el aspecto de un sitio. El 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. Más específicamente, puedes cambiar el color de los vínculos, los fondos, el texto y otros elementos del tema. Tú también puedes cambiar el mensaje de bienvenida que aparece en la página principal del portal de desarrolladores.

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

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

Tema	Descripción
Tema responsivo de Apigee	Basado en Bootstrap 3, el tema predeterminado para versiones posteriores del portal. Este tema admite dispositivos con anchos de 768 píxeles 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 botón de arranque Se habilitó el tema 7.x-3.0.
Tema de Apigee DevConnect	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 se deben actualizar garantizar que todos los bloques, las plantillas y demás contenido sean compatibles con Bootstrap 3 que el tema Bootstrap 7.x-3.0 esté habilitado.
Tema de Apigee Base	Un tema superior para el tema de Apigee DevConnect y no diseñado para usarse en su por sí solas.

Cómo establecer el tema predeterminado

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

"Apigee DevConnect theme" is out of date 

Puedes usar el siguiente procedimiento para establecer el tema predeterminado para el portal. Deberías siempre prueba un tema nuevo primero en un sistema que no sea de producción antes de implementarlo en producción.

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. La lista de habilitados temas.
3. En el tema que quieres usar como predeterminado, selecciona Establecer como predeterminado.
   Para usar el tema responsivo de Apigee, asegúrate de que el tema Bootstrap 7.x-3.0 sea habilitado en esa página.
4. Guarde la configuración.

Cómo personalizar el tema responsivo de Apigee

En esta sección, se describe cómo configurar el tema responsivo de Apigee, incluido lo siguiente:

• Cómo personalizar los formularios modales
• Cómo personalizar la configuración general

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

El portal usa el arranque de Drupal Módulo de zona de pruebas de formularios modales para mostrar formularios de Drupal como modales. Los formularios de inicio de sesión y registro de predeterminada como modales. Puedes inhabilitar esta funcionalidad para que esos formularios aparezcan como páginas individuales.

1. Accede al portal para desarrolladores como un usuario con privilegios de administrador.
2. Selecciona Configuración > Interfaz de usuario > Las formas modales de arranque en la Menú de administración de Drupal
3. Habilita o inhabilita la compatibilidad modal para los 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. En el menú de administración de Drupal, selecciona Apariencia. La lista de temas habilitados .
3. En el área Apigee Responsivo (tema predeterminado) de la página, selecciona Settings (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 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 (denominado Barra de navegación en la configuración) y la visualización de los pozos de región: Rutas de navegación: Permite ocultar o mostrar la ruta de navegación y activar o desactivar el vínculo de 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 fija/estática/normal, lo que hace que el diseño sea más dinámico. Buenos regionales: Agrega una clase de bien a cualquier región del sitio para agregar un fondo más oscuro a la región.
   	JavaScript	Controla cómo se muestran los anuncios fijos, las ventanas emergentes y los cuadros de información: Anclas: Fija las posiciones de los anclajes y habilita la suavidad. el desplazamiento. Ventanas emergentes: Las ventanas emergentes agregan pequeñas superposiciones de contenido a . Habilita o inhabilita las ventanas emergentes y configura cómo se usan. Sugerencias: Configura cómo se usan los cuadros de información. Puedes forzar cada cuadro de información para mostrar a la derecha, izquierda, superior o inferior de cada elemento del formulario y establecer otras opciones de visualización.
   	Avanzado	Controla cómo el portal usa BootstrapCDN. para actualizar los archivos de tema de arranque. Puedes inhabilitar la dependencia del portal en BootstrapCDN, pero debes proporcionar tu propia implementación del en un framework de aplicaciones.
   	Configuración de DevOps	Establece el mensaje de bienvenida, los colores predeterminados y el tamaño del logotipo que aparece. en el menú principal.
   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 del ícono de acceso directo	Especifica la imagen que se muestra en la barra de direcciones de un navegador o para que se muestre el portal.

Personaliza el tema de Apigee DevConnect

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

Personalizar la configuración general de Apigee DevConnect tema:

1. Accede a tu portal como un usuario con privilegios de administrador o de creación de contenido.
2. Selecciona Apariencia > Tema de Apigee DevConnect > Configuración en Drupal de administración. Se mostrará la configuración inicial del tema. La configuración de color es se especifican como valores hexadecimales.

   

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

Crea un subtema para personalizar un tema

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

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

En su lugar, copia el tema predeterminado para crear un subtema del tema que quieres modificar a /sites/all/themes . Para obtener instrucciones sobre subtemas, consulta el en https://www.drupal.org/node/225125.

1. Copia la carpeta profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit a /sites/all/themes carpeta.
2. Cambia el nombre de la carpeta apigee_responsive_starterkit. a YOUR_THEME_NAME.
3. Cambie el nombre del archivo apigee_responsive_starterkit.info a 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 a YOUR_THEME_NAME.js.
6. Edita el archivo YOUR_THEME_NAME.info y reemplaza las siguientes líneas:
   
   hojas de estilo[all][] = css/apigee_responsive_starterkit.css
   scripts[] = js/apigee_Adaptive_starterkit.js
   
   con:
   
   hojas de estilo[all][] = css/YOUR_THEME_NAME.css
   scripts[] = js/TU_NOMBRE_TEMA.js
7. Cambia el nombre del tema en YOUR_THEME_NAME.info del kit de inicio de respuesta de Apigee por TU TEMA. NAME
8. Si quieres agregar una nueva captura de pantalla para tu tema, reemplaza el archivo screenshot.png existente.
9. Si deseas agregar un nuevo logotipo a tu tema, reemplaza el archivo logo.png existente.
10. Si quieres agregar un nuevo ícono de página a tu tema, reemplaza el archivo favicon.ico existente.