Personaliza tu tema

Esta página se aplica a Apigee y Apigee Hybrid.

Consulta la documentación de Apigee Edge.

Un tema consiste en una hoja de estilo global que proporciona una sensación y un aspecto uniformes a todas las páginas de tu portal. El objetivo de un tema es permitirte cambiar el aspecto de todas las páginas del portal a la vez.

Puedes personalizar el tema, obtener una vista previa de este y publicarlo, como se describe en las siguientes secciones.

Explora el editor de temas

Personaliza el tema, obtén una vista previa de este y publícalo para el portal en el editor de temas.

Para acceder al editor de temas, haz lo siguiente:

  • Selecciona Publicar > Portales en la barra de navegación lateral, selecciona el portal y haz clic en Tema en la página de destino.
  • Cuando edites un portal, haz clic en Tema en el menú desplegable de la barra de herramientas en la parte superior de la navegación.

Editor de temas

Tal como se destaca en la figura anterior, el editor de temas te permite hacer lo siguiente:

Información acerca del tema base

La mayoría de las reglas de estilo del tema base que definen la apariencia del sitio se basan en un material design angular. El material design angular usa diseños basados en cuadrículas y componentes y estilos coherentes para proporcionar una experiencia interactiva unificada.

Las reglas de estilo se definen mediante la hoja de estilos de cascada con SASS (SCSS). SCSS es un superconjunto de hojas de estilo en cascada (CSS) que ofrece las siguientes ventajas:

  • Variables globales que se pueden volver a usar a lo largo de la hoja de estilo
  • Reglas anidadas para ahorrar tiempo en el desarrollo de hojas de estilo
  • La capacidad de crear mixins y funciones

Por ejemplo:

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

SCSS se compila y se convierte en CSS sin formato antes de que el contenido se renderice en la página web.

El tema base usa una hoja de estilo de material angular, el archivo de SCSS de aplicación de temas materiales (material-theming.scss). En esta hoja de estilo, se declaran variables, funciones y mixins que se pueden anular mediante variables personalizadas y secciones de SCSS, como se describe en Personaliza el tema mediante el editor de temas avanzado.

En función de las selecciones de temas de IU, se declaran varias variables de SCSS, que definen la tipografía, el color y el estilo del diseño, y que la hoja de estilo base consume. Puedes anular las variables que se enumeran en la referencia de variables de temas.

Personaliza la paleta de colores

Personaliza la paleta de colores mediante el editor de estilos básicos o la anulación de las variables del tema.

Información acerca de las categorías de la paleta de colores

Las definiciones de la paleta de colores para el portal integrado se agrupan en las siguientes categorías, que se definen mediante el diseño de colores de material design en el tema base.

Categoría Estilos
Principal Barras de herramientas de navegación, encabezados, encabezados de tarjetas y botones
Secundario Texto <pre> y <code>
Destacado Navegación, vínculos y botones destacados
Advertencia Advertencias y errores

Personaliza la paleta de colores mediante el editor de estilo básico

Personaliza las paletas de colores principales y destacadas con rapidez mediante el editor de estilos básico.

Para personalizar la paleta de colores mediante el editor de estilos básico, haz lo siguiente:

  1. Accede al editor de temas.
  2. Para personalizar el color principal, selecciona un color en el menú desplegable Color principal o haz clic en Personalizado y, luego, ingresa un valor de color hexadecimal personalizado en el cuadro de texto.
  3. Para personalizar el color de los elementos destacados, selecciona un color en el menú desplegable Color de los elementos destacados o haz clic en Personalizado y, luego, ingresar un valor de color hexadecimal personalizado en el cuadro de texto.
  4. Haz clic en Guardar para guardar los cambios.
  5. Visualiza los cambios en el panel de vista previa o haz clic en Preview (Vista previa) para obtener una vista previa de los cambios en el portal en un navegador.
    Nota: Puedes hacer clic para navegar por el portal en el panel de vista previa con el fin de visualizar los cambios en todas las páginas.
  6. Haz clic en Publicar para publicar tu tema. Se te pedirá que confirmes la actualización.

Personaliza la paleta de colores mediante la anulación de las variables del tema

Si deseas personalizar la paleta de colores mediante la anulación de las variables del tema, accede al editor de temas avanzado e incluye una o más de las siguientes variables con valores ajustados en la sección Variables para cambiar los colores principales, secundarios, los de los elementos destacados o los de los mensajes de advertencia, respectivamente. Consulta Información acerca de las categorías de la paleta de colores.

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

Visualiza el contenido del archivo importado de SCSS de aplicación de temas materiales (material-theming.scss) con el fin de identificar las variables de color predefinidas (como $mat-grey). Los valores numéricos indican los valores de sombras de los elementos predeterminados, los más claros y los más oscuros, respectivamente.

Como alternativa, puedes crear tu propia variable de color. Por ejemplo:

$my-color-variable: (
    50 : #f9f0e7,
    100 : #f0d8c2,
    200 : #e6bf9a,
    300 : #dba572,
    400 : #d49153,
    500 : #cc7e35,
    600 : #c77630,
    700 : #c06b28,
    800 : #b96122,
    900 : #ad4e16,
    A100 : #ffebe0,
    A200 : #ffc9ad,
    A400 : #ffa77a,
    A700 : #ff9661,
    // Color to render text presented on a background of the same level
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

Luego, úsalo para cambiar la paleta de colores, como se muestra en el siguiente ejemplo:

$primary: mat-palette($my-color-variable, 900, 200, 400);

Personaliza los estilos y la familia de fuentes

Personaliza los estilos y la familia de fuentes mediante el editor de estilos básico o la anulación de las variables del tema. También puedes importar una fuente personalizada.

Personaliza los estilos y la familia de fuentes mediante el editor de estilos básico

Personaliza los estilos y la familia de fuentes con rapidez mediante el editor de estilos básico, como se muestra en la siguiente figura.

Para personalizar los estilos y la familia de fuentes mediante el editor de estilos básico, haz lo siguiente:

  1. Accede al editor de temas.
  2. Para cambiar la familia de fuentes, selecciona un valor en el menú desplegable Fuente.
  3. Si deseas cambiar los estilos de fuentes, expande la sección Estilos de fuentes y edita los estilos según sea necesario, incluidos el tamaño de la fuente, la altura de la línea y el grosor de la fuente para los elementos HTML deseados.
  4. Haz clic en Guardar para guardar los cambios.
  5. Visualiza los cambios en el panel de vista previa o haz clic en Preview (Vista previa) para obtener una vista previa de los cambios en el portal en un navegador.
    Nota: Puedes hacer clic para navegar por el portal en el panel de vista previa con el fin de visualizar los cambios en todas las páginas.
  6. Haz clic en Publicar para publicar tu tema. Se te pedirá que confirmes la actualización.

Personaliza los estilos y la familia de fuentes mediante la anulación de las variables del tema

Si deseas personalizar los estilos y la familia de fuentes mediante la anulación de las variables del tema, accede al editor de temas avanzado e incluye una o más de las variables de estilo y familia de fuentes con valores ajustados en la sección Variables.

Por ejemplo, para cambiar la fuente predeterminada a Arial, define la siguiente variable:

$typography-main-font-family: 'Arial';

Importa una fuente personalizada

Importa una fuente de Google (que no esté incluida en el conjunto de fuentes predeterminadas) o tu propia fuente personalizada. Luego, haz referencia a la fuente personalizada en la hoja de estilo, como se describe a continuación.

Importa una fuente de Google

Para importar una fuente de Google, accede al editor de temas avanzado y, luego, importa la fuente en la sección Estilos personalizados, como se muestra a continuación:

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

Importa una fuente personalizada

Importa tu propia fuente personalizada mediante la regla de CSS @font-face. La regla @font-face es compatible con varios tipos diferentes de formatos de archivo, incluidos TrueType (TTF), Web Open Font Format (WOFF) y mucho más.

Para importar tu propia fuente personalizada, haz lo siguiente:

  1. También puedes subir el archivo de fuente al administrador de activos, como se describe en Sube un archivo.
  2. Accede al editor de temas avanzado y agrega la regla @font-face a la sección Estilos personalizados, en la que font-family especifica el nombre de la fuente y url especifica la ubicación de del archivo de fuente (en este caso, el administrador de activos), MyCustomFont.tff es el nombre del archivo de fuente personalizado y format especifica el formato de la fuente.

    @font-face {
       font-family: 'MyCustomFont';
       src: url('files/MyCustomFont.tff') format('truetype')
    }
    

Haz referencia a la fuente personalizada en la hoja del estilo

Haz referencia a la fuente personalizada en una de las variables del estilo y la familia de fuentes en la sección Variables. Por ejemplo:

$typography-main: mat-typography-config(
    $font-family: '"Indie Flower", "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

Puedes personalizar los logotipos que se usan en el portal en las siguientes ubicaciones:

Ubicación del logotipo Tamaño del archivo predeterminado
Barra de herramientas de navegación de computadoras de escritorio 196 x 32 píxeles
Barra de herramientas de navegación de dispositivos moviles156 x 32 píxeles
Ícono de página en la barra de direcciones del navegador (y otras ubicaciones)32 x 32 píxeles
Página de acceso392 x 64 píxeles

Personaliza el logotipo en la barra de herramientas de navegación para pantallas de computadoras de escritorio y dispositivos móviles. Según el ancho del navegador, puede que veas la versión del logotipo para computadoras de escritorio o dispositivos móviles.

No puedes borrar el logotipo principal; solo puedes reemplazarlo. Si no especificas un logotipo para la pantalla de dispositivos móviles, se usará el logotipo principal de forma predeterminada.

Para personalizar el logotipo que se usa en la barra de herramientas de navegación para pantallas de computadoras de escritorio y dispositivos móviles, haz lo siguiente:

  1. Obtén una o más copias del logotipo de tu empresa que sean adecuadas para su uso.
    Consulta la tabla anterior para ver los tamaños recomendados.
  2. Accede al editor de temas.
  3. A fin de reemplazar el logotipo en la barra de herramientas de navegación superior para las pantallas de computadoras de escritorio, haz lo siguiente:
    a. En Estilos básicos en el panel derecho, haz clic en debajo del campo Logotipo principal.
    Busca la versión para computadoras de escritorio de tu logotipo en el directorio local.
    c. Haz clic en Abrir para subir el archivo.
  4. A fin de reemplazar el logotipo en la barra de herramientas de navegación superior para las pantallas de dispositivos móviles, haz lo siguiente:
    a. En Estilos básicos en el panel derecho, haga clic en Opciones para logotipos y, luego, en en el campo Logotipo para dispositivos móviles.
    b. Busca la versión para dispositivos móviles de tu logotipo en el directorio local.
    c. Haz clic en Abrir para subir el archivo.
  5. Haz clic en Guardar para obtener una vista previa de los cambios en el panel izquierdo.
  6. Haz clic en Publicar para publicar los cambios en tu portal. Confirma la operación cuando se te solicite.

Personaliza el ícono de página

Para personalizar el ícono de página que se usa en la barra de direcciones del navegador web (y otras ubicaciones), haz lo siguiente:

  1. Obtén una copia del logotipo de tu empresa que sea adecuado para usar como ícono de página.
    Consulta la tabla anterior para ver el tamaño recomendado.
  2. Accede al editor de temas.
  3. En Estilos básicos en el panel derecho, expande Opciones de logotipos y haz clic en en el campo Ícono de página.
  4. Busca la versión para ícono de página de tu logotipo en tu directorio local.
  5. Haz clic en Abrir para subir el archivo.
  6. Haz clic en Guardar para obtener una vista previa de los cambios en el panel izquierdo.
  7. Haz clic en Publicar para publicar los cambios en tu portal. Confirma la operación cuando se te solicite.

Personaliza el logotipo en la página de acceso cuando configures la experiencia de registro y acceso del programa para desarrolladores, como se describe en Administra la información de la empresa.

A continuación, se proporcionan algunas sugerencias rápidas para personalizar la barra de navegación:

Personaliza la imagen de fondo

Para personalizar la imagen de fondo de la página de inicio, realiza cualquiera de las siguientes tareas:

  • Sube tu propia versión de la imagen home-background.jpg al administrador de recursos con el mismo nombre y el mismo tamaño relativo de archivo (3,000 píxeles x 1,996 píxeles). Para obtener más información, consulta Administra tus recursos.

  • Para modificar el nombre de archivo de la imagen de fondo y su relleno, accede al editor de temas avanzado e incluye la siguiente SCSS con valores ajustados en la sección Estilos personalizados:

    #index {
      &.main {
        .main-content {
          padding: 0;
          background-image: url('/files/home-background.jpg');
          background-size: cover;
        }
      }
    }
    
  • Para agregar una imagen de fondo a todas las páginas del portal, accede al editor de temas avanzado e incluye la siguiente SCSS con el valor ajustado en la sección Estilos personalizados:

     body {
        background-image: url('/files/background-image.jpg');
     }
    
    

Personaliza la tipografía

Para personalizar la tipografía, accede al editor de temas avanzados y ajusta los valores de una o más de las siguientes variables de tipografía en la sección Variables:

  • $typography-main
  • $typography-header
  • $typography-footer
  • $typography-context-bar

Por ejemplo:

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags