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

Estás viendo la documentación de Apigee Edge.
Ir a la documentación de Apigee X. info

Un tema consiste en una hoja de estilo en cascada (CSS) 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.

La mayoría de los diseños predeterminados que se proporcionan con el portal de ejemplo 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.

Accede al editor de temas

Personaliza, obtén una vista previa y publica el tema de tu portal 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

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

Agrega diseños personalizados

Personaliza tu tema agregando tu propio código CSS en el panel del editor de estilos. Se admiten todos los elementos de estilo CSS.

Para personalizar tu 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. Para obtener una vista previa de los cambios en el panel de vista previa, haz clic en Recargar 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 en el tema.
  5. Haz clic en Publicar para confirmar la actualización.

Personaliza la imagen "Tu logotipo" con el logotipo de tu empresa y reemplaza los siguientes archivos de imagen en el administrador de archivos. Para ello, sube tu 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 de 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 Administra tus recursos.

Personaliza la imagen de fondo en la página de inicio

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

  • Modificar el archivo de imagen de fondo y su ubicación
    Puedes subir tu propia versión de la imagen portal-hero.jpg al administrador de archivos con el mismo nombre y tamaño relativo de archivo (1,440 píxeles x 540 píxeles). Si quieres usar un nombre de archivo diferente, asegúrate de editar el valor background-image en el CSS que se muestra 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 a 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.