Nexus – Footer Configuration

image_pdfimage_print

¿Qué es?

Footer Configuration es otra de las secciones de configuración general del proyecto en Nexus, ubicada junto a Header Configuration en la misma barra de pestañas. Permite definir el footer (pie de página) que se muestra en todas las pantallas del proyecto, con su propio contenido HTML, colores y altura.

Propiedades

  • Enable Footer: casilla para activar o desactivar el footer en todo el proyecto.
  • Background Color: color de fondo del footer (color picker + campo de texto con código hexadecimal, por defecto “#ffffff”).
  • Text Color: color del texto del footer (color picker + campo de texto con código hexadecimal, por defecto “#000000”).
  • Height (px): alto del footer en píxeles (por defecto 60).
  • HTML Content: editor de código donde se escribe el HTML que define el contenido del footer (por defecto <div style="text-align:center;">© 2026 test one</div>, usando el nombre del proyecto).
  • Upload image/asset: permite incorporar una imagen al footer. Incluye:
    • Upload Asset: botón para subir un archivo, que genera una URL pública (ej. “Uploaded URL: http://nexus.rocketbot.com/uploads/…”).
    • Insert <img> in HTML: botón que inserta automáticamente una etiqueta <img> (con alt="footer-logo" y style="height:30px; width:auto;") dentro del HTML Content, en una línea nueva debajo del texto, con la URL del archivo subido.
  • Preview: vista previa en vivo del footer, que se actualiza a medida que se cambian los valores anteriores.
  • Reset: botón para descartar los cambios no guardados.
  • Save Configuration: botón para guardar la configuración del footer.

Ejemplo de uso

Para armar un footer simple con el nombre del proyecto y el año, se activa Enable Footer, se definen los colores y la altura deseados, y en HTML Content se escribe algo como:

<div style="text-align:center;">© 2026 Mi Proyecto</div>

Si además se quiere mostrar un logo en el footer, se sube el archivo con Upload Asset y se presiona Insert <img> in HTML. Por defecto, esto agrega la imagen en una línea aparte, debajo del texto. Para que el texto y el logo queden uno al lado del otro en vez de uno arriba del otro, hay que reemplazar el contenido de HTML Content por un bloque que use display:flex, por ejemplo:

<div style="display:flex; align-items:center; justify-content:center; gap:10px;">
  <span>© 2026 Mi Proyecto</span>
  <img src="URL_DE_LA_IMAGEN_SUBIDA" alt="footer-logo" style="height:30px; width:auto;" />
</div>

Donde display:flex ordena el texto y el logo en una misma fila, align-items:center los alinea verticalmente entre sí, justify-content:center centra el conjunto dentro del footer, y gap:10px deja un pequeño espacio entre ambos elementos. La URL de la imagen es la que entrega Nexus al subir el archivo con Upload Asset.