Cómo personalizar tu tema (versión original)

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

Un tema consiste en una hoja de estilo en cascada global (CSS) que proporciona un aspecto uniforme para 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.

La mayoría de los estilos predeterminados que se proporcionan en el portal de muestra se basan en Bootstrap. Puedes personalizar el tema, obtener una vista previa de este y publicarlo, como se describe en las siguientes secciones.

Mira el siguiente video para aprender a personalizar el tema del portal.

Cómo acceder al editor de temas

Personaliza el tema para tu portal, obtén una vista previa de él y publícalo en el editor de temas. Para abrir el editor de temas, selecciona Tema en el menú desplegable de la barra de navegación superior.

Editor de temas

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

Agregar diseños personalizados

Agrega tu propio código CSS en el panel del editor de estilo para personalizar el tema. Se admiten todos los elementos de estilo CSS.

Para personalizar el tema, haz lo siguiente:

  1. Selecciona Tema en el menú desplegable de la barra de navegación superior.
  2. Agrega tu código CSS personalizado en el panel del editor de estilo que se encuentra en el lado derecho de la página.
  3. Obtén una vista previa de tus cambios en el panel de vista previa haciendo clic en Volver a cargar la vista previa.
    > Nota: Puedes hacer clic en la navegación del portal para obtener una vista previa del contenido de todas las páginas.
  4. Haz clic en Publicar para publicar los cambios de tu tema.
  5. Haz clic en Publicar para confirmar la actualización.

Personaliza la imagen de "Tu logotipo" con el logotipo de tu empresa. Para reemplazar los siguientes archivos de imagen en el administrador de archivos, sube el logotipo con los mismos nombres y tamaños de archivo relativos:

  • logo.png (140 píxeles por 40 píxeles)
  • mobile-logo.png (140 píxeles por 40 píxeles)

Además, modifica el siguiente contenido en la hoja de estilo CSS, según sea necesario:

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}



.navbar-brand img {
  max-height: 50px;
  margin: 0;
  padding: 0;
}

Para obtener más información, consulta Cómo administrar tus activos.

Personaliza la imagen de fondo de la página principal

Personaliza la imagen de fondo de la página principal modificando el siguiente contenido en la hoja de estilo CSS.

  • Modifica el archivo de imagen de fondo y su posición.
    Puedes subir tu propia versión de la imagen portal-hero.jpg al administrador de archivos con el mismo nombre y el mismo tamaño de archivo relativo (1,440 x 540 píxeles). Si desea usar otro nombre de archivo, asegúrese de editar el valor background-image en el CSS que aparece a continuación. 

    /* ==== Jumbotron ====
a billboard for drawing attention, from Bootstrap  */

home-page-jumbotron-bg {
    background-image: url('/files/portal-hero.jpg');
}

  • Modifica el formato del texto que se superpone con la imagen de fondo. 

    .jumbotron {
 text-align: center;
 height: 500px;
 background-size: cover;
 margin: -50px -30px 0 -30px;
 border-radius: 0;
}

.jumbotron h1 {
 font-size: 40px;
 font-weight: 400;
}

.jumbotron h2 {
 font-size: 25px;
 font-weight: 400;
}

.jumbotron a, .jumbotron a:hover {
 font-size: 18px;
}

.jumbotron p {
 max-width: none;
}

Comprende las reglas de especificidad de CSS

En la especificidad de CSS, se describe el método que usa un navegador para determinar la prioridad de las declaraciones de los elementos de estilo de CSS cuando surgen conflictos. La especificidad de CSS se calcula mediante la aplicación de un peso a la declaración específica de un elemento de estilo de CSS en función de su tipo de selector. Cuanto más específico sea el selector de CSS, mayor será el peso. Por ejemplo, un atributo de ID recibirá un peso mayor que un selector de tipo en el cálculo.

Por ejemplo, si defines los siguientes elementos de estilo en el código de CSS, el elemento de párrafo tendrá un color rojo debido a que la declaración del elemento de estilo p dentro de un elemento div es más específica que la declaración del elemento de estilo p.

div p { color: red }  ← More specific  
p { color: blue }

Del mismo modo, si defines las siguientes declaraciones de elemento de estilo en el código de CSS, cualquier texto dentro de etiquetas <div class="test"></div> tendrá un color azul, ya que la declaración de estilo de atributo id dentro de un elemento div es más específica que la declaración del elemento de estilo div.

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

En las declaraciones de elementos de estilo con la misma especificidad, tendrá prioridad la última declaración de elemento de estilo definida. Por ejemplo, dado el orden de las siguientes declaraciones de elementos de estilo, el elemento de párrafo será de color azul. 

p { color: red }  
p { color: blue }  ← Last specified

Publica tu tema

Para publicar en el portal en vivo las personalizaciones de tema y estilo que agregaste, haz lo siguiente:

  1. Selecciona Tema en el menú desplegable del menú de navegación superior.
  2. Haz clic en Publicar.

Para ver tu contenido publicado en el portal en vivo, haz clic en Live Portal en la barra de navegación superior.