Como personalizar la Interfaz Web de Carbonio CE

⚠️ Importante: Estas modificaciones no son persistentes tras actualizaciones. Se debe ejecutar nuevamente este proceso para su reaplicación.

🖼️ Especificaciones de los archivos

Para comenzar necesitaremos los siguientes archivos:

• Fondo de Pantalla en la Pantalla de Inicio de Sesión
  Formato: JPG
  Dimensiones: 1920×1080 px
  Nombre: wallpaper.jpg

• Logotipo de la Empresa en la Pantalla de Inicio de Sesión
  Formato: JPG
  Dimensiones: 602×108 px
  Nombre: login.png
  Color de fondo: Blanco

• Logotipo de la Empresa dentro del Webmail
  Formato: JPG
  Dimensiones: 602×108 px
  Nombre: inside_logo.png
  Color de fondo: Transparente

🗂️ Estructura de los Directorios

Cada dominio debe tener su propio directorio en /opt/zextras/web/logos/, donde se almacenarán sus imágenes personalizadas:

mkdir -p /opt/zextras/web/logos/novati.com.ec
mkdir -p /opt/zextras/web/logos/otrodominio.com

Copia tus imágenes personalizadas donde corresponda de acuerdo al dominio que manejes.

cp wallpaper.jpg login.png inside_logo.png /opt/zextras/web/logos/novati.com.ec

Luego, crea enlaces simbólicos para cada alias que apunte al dominio correspondiente, por ejemplo, si los usuarios acceden de la siguiente forma -> https://correo.novati.com.ec, crearemos el enlace para correo.novati.com.ec de la siguiente manera:

cd /opt/zextras/web/logos/
ln -s novati.com.ec correo.novati.com.ec

🔧 Modificación de la Pantalla de Login

Primero realizamos un respaldo del directorio original:

cp -a /opt/zextras/web/login /opt/zextras/web/login.orig

Identifica el archivo JS que contiene las referencias de las imágenes, ejecutando el siguiente comando:

grep -l "8b90fe7b942c6f389f1ddd01103d3b0e.jpg" /opt/zextras/web/login/*.js

El resultado deberá ser similar al siguiente:

/opt/zextras/web/login/590.js

El archivo ‘590.js’ es el que modificaremos a continuación, ten en cuenta que, el archivo JS puede tener otro nombre, deberás colocar el nombre que te muestra en tu servidor.

sed -i '2 i const multidomain = window.location.hostname.toString();' /opt/zextras/web/login/590.js

sed -i s@assets/8b90fe7b942c6f389f1ddd01103d3b0e.jpg@'../logos/"+multidomain+"/wallpaper.jpg'@g /opt/zextras/web/login/590.js

sed -i s@assets/a2ca34c391de073172d480fe7977954a.jpg@'../logos/"+multidomain+"/wallpaper.jpg'@g /opt/zextras/web/login/590.js

sed -i s@assets/c469e23959fd19cc40fbb5e56c083c86.png@'../logos/"+multidomain+"/login.png'@g /opt/zextras/web/login/590.js

Asegúrate de colocar el nombre del archivo JS que te muestre en tu servidor.

📨 Modificación del logo del Webmail al Iniciar Sesión

Primero ubicamos el archivo que contiene el logo en formato SVG:

grep "M306.721" /opt/zextras/web/iris/carbonio-shell-ui/* -rl

El resultado nos dará dos archivos: un archivo «js.map» y un archivo «.js«. El que necesitamos solamente es el archivo que termina con «,js», ten en cuenta que, el nombre del archivo y su directorio cambian en cada versión de Carbonio:

/opt/zextras/web/iris/carbonio-shell-ui/d7c3b71f3eac4bc8a54eb5a88b8045bcbe7a73ae/499.2dca47e7.chunk.js

Realizamos un respaldo del archivo original por si se requiere regresar al anterior:

cp -a /opt/zextras/web/iris/carbonio-shell-ui/d7c3b71f3eac4bc8a54eb5a88b8045bcbe7a73ae/499.2dca47e7.chunk.js /opt/zextras/web/iris/carbonio-shell-ui/d7c3b71f3eac4bc8a54eb5a88b8045bcbe7a73ae/499.2dca47e7.chunk.js.orig

Modificamos el archivo para reemplazar el logo de Carbonio por el que se desea usar, ejecutando el siguiente comando:

sed -i '2 i const multidomain = window.location.hostname.toString();' /opt/zextras/web/iris/carbonio-shell-ui/d7c3b71f3eac4bc8a54eb5a88b8045bcbe7a73ae/499.2dca47e7.chunk.js

sed -i s@createElement\(\"svg\".*402-35.626\"@'createElement("img",(({src:"/static/logos/" + multidomain + "/inside_logo.png",height:"30"'@g /opt/zextras/web/iris/carbonio-shell-ui/d7c3b71f3eac4bc8a54eb5a88b8045bcbe7a73ae/499.2dca47e7.chunk.js

Asegúrate de colocar el nombre del archivo y directorio que te muestre en tu servidor.

🌐 Modificación del título del Webmail en el navegador

Primero ubicamos el archivo que contiene el texto «Carbonio Client»:

grep "Carbonio Client" /opt/zextras/web/iris/carbonio-shell-ui/* -rl

El resultado nos dará dos archivos: un archivo «js.map» y un archivo «.js«. El que necesitamos solamente es el archivo que termina con «,js», ten en cuenta que, el nombre del archivo y su directorio cambian en cada versión de Carbonio:

/opt/zextras/web/iris/carbonio-shell-ui/d7c3b71f3eac4bc8a54eb5a88b8045bcbe7a73ae/499.2dca47e7.chunk.js

Si aun no lo has hecho, realizamos un respaldo del archivo original por si se requiere regresar al anterior:

cp -a /opt/zextras/web/iris/carbonio-shell-ui/d7c3b71f3eac4bc8a54eb5a88b8045bcbe7a73ae/499.2dca47e7.chunk.js /opt/zextras/web/iris/carbonio-shell-ui/d7c3b71f3eac4bc8a54eb5a88b8045bcbe7a73ae/499.2dca47e7.chunk.js.orig

Modificamos el archivo para reemplazar el titulo por uno personalizado, ejecutando el siguiente comando:

sed -i s/"Carbonio Client"/"Correo NOVATI"/g /opt/zextras/web/iris/carbonio-shell-ui/d7c3b71f3eac4bc8a54eb5a88b8045bcbe7a73ae/499.2dca47e7.chunk.js

Asegúrate de colocar el nombre del archivo y directorio que te muestre en tu servidor.

✅ Validación Final

Accede al webmail y verifica que carguen correctamente:

1. El Logotipo de la Empresa en la Pantalla de Inicio de Sesión
2. El Fondo de Pantalla en la Pantalla de Inicio de Sesión
3. El Logotipo de la Empresa dentro del Webmail
4. El Título del Webmail en el Navegador