Customizing Carbonio CE appearance

Carbonio is pretty and modern but you’ll like to have it into your style, with a different background and your logo. Me too!

I’ll show you how to do it, juts follow the steps below.

This way you can have different wallpapers and logo for each domain hosted on your server.

ALERT: all this changes will not survive a version upgrade. So you’ll have to do it after every upgrade

Files specifications

• Background wallpaper

Type: JPG
Dimensions: 1920×1080 pixels
Filename: wallpaper.jpg

• Company Logo on Login screen

Type: PNG
Dimensions: 602×108 pixels
Filename: login.png
Background color: white

• Company Logo inside webmail

Type: PNG
Dimensions: 602×108 pixels
Filename: inside_logo.png
Background color: transparent

Directories structure

This hack requires you to create a specific directory structure, like this:

/opt/zextras/web/logos/example.com/
/opt/zextras/web/logos/otherdomain.com/

Once each domain hosted on your server have it’s own directory copy it’s files into it

Be aware to make links of all virtualhosts you’re using to the domain on that structure. So let’s say you access it using webmail.example.com create a link for it. Like that:

cd /opt/zextras/web/logos/
ln -s webmail.example.com example.com
ln -s mail.example.com example.com

ln webmail.otherdomain.com otherdomain.com

Customizing login screen

• Make a backup

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

• Fixing login javascript file

sed -i '2 i const multidomain = window.location.hostname.toString();' /opt/zextras/web/login/932.js
sed -i s@assets/8b90fe7b942c6f389f1ddd01103d3b0e.jpg@'../logos/"+multidomain+"/wallpaper.jpg'@g /opt/zextras/web/login/932.js
sed -i s@assets/a2ca34c391de073172d480fe7977954a.jpg@'../logos/"+multidomain+"/wallpaper.jpg'@g /opt/zextras/web/login/932.js
sed -i s@assets/c469e23959fd19cc40fbb5e56c083c86.png@'../logos/"+multidomain+"/login.png'@g /opt/zextras/web/login/932.js

• Fixing in webmail javascript file

Carbonio webmail theme is called Iris and it has many parts. We want to fix a javascript file in there, but we don’t know which one because that “CARBONIO” logo is a svg code inside some file. Run the command below to figure which one needs to be fixed:

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

This will reveal two files: one “js.map” and one “.js“. We want the one that’s just “.jc” and it will have a name like “index.415ef93c.js”. This number in the file name and it’s path changes accordingly with Carbonio version. In this example I’ll use this file:

/opt/zextras/web/iris/carbonio-shell-ui/9ceabdf04180d0e705062c10577b648eedcda77c/index.415ef93c.js

Do not forget to make a copy of it, so you can restore it if needed.

• Replacing “svg” entry by “img” entry

To fix that file to replace Carbonio logo by the one you are using on the login page run the command below, replacing the file name by yours.

sed -i '2 i const multidomain = window.location.hostname.toString();' /opt/zextras/web/iris/carbonio-shell-ui/9ceabdf04180d0e705062c10577b648eedcda77c/index.415ef93c.js
sed -i s@createElement\(\"svg\".*626Z\"@'createElement("img",(({src:"/static/logos/" + multidomain + "/inside_logo.png",height:"30"'@g /opt/zextras/web/iris/carbonio-shell-ui/9ceabdf04180d0e705062c10577b648eedcda77c/index.415ef93c.js

• Fixing browser tab title

Run the command below to figure which file has the title on it:

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

This will reveal two files: one “js.map” and one “.js“. We want the one that’s just “.jc” and it will have a name like “487.17b771c1.chunk.js”. This number in the file name and it’s path changes accordingly with Carbonio version. In this example I’ll use this file:

/opt/zextras/web/iris/carbonio-shell-ui/9ceabdf04180d0e705062c10577b648eedcda77c/487.17b771c1.chunk.js

Do not forget to make a copy of it, so you can restore it if needed.

Now that we know what file needs to be fixed and we have a copy of it, run te command below replacing “YourSiteName” by the name you want to see on that tab:

sed -i s/"Carbonio Client"/"YourSiteName"/g /opt/zextras/web/iris/carbonio-shell-ui/9ceabdf04180d0e705062c10577b648eedcda77c/487.17b771c1.chunk.js

Reload and enjoy!