Voici un petit mémo pour m’aider à reproduire les modifs de personnalisation sur ma webmail Zimbra.
Documentation utile officielle :
https://wiki.zimbra.com/index.php?title=Customizing_Themes_and_Adding_Zimbra_Powered_Logo_-_Open_Source_Edition
https://files.zimbra.com/docs/skins/Themes.html
1> Logo et bannière
Pour changer le logo et la bannière, essentiellement sur la page de login ainsi qu’en haut à gauche de l’écran de la webmail, la manipulation ce fait en 2 temps.
Dans un premier temps je modifie toutes les images souhaitez ce trouvant dans le dossier logos de base /jetty_base/webapps/zimbra/skins/_base/logos/
Puis dans un second temps je redirige tous les appels de logos vers un nouveau dossier qui contiendra toutes les images modifiées.
Il faut créer un dossier dans la direction suivante
/jetty_base/webapps/zimbra/skins/_base/logos/n1
Puis j’ai uploadées toutes les images dans ce dossier.
Enfin pour rediriger tous les appels vers ce nouveau dossier de logo, il faut éditer tous les skin.properties de chaque skins
Sur tous les skins.properties, aussi bien de base que de chaque skins, y compris les skins “_base” :
/jetty_base/webapps/zimbra/skins/nomduskins/skin.properties
La modif ce fait vers la ligne 42, je commente les anciennes ligne et rajoute les miennes avec la redirection vers le nouveau dossier n1
# LogoImgDir = @AppContextPath@/skins/_base/logos # LogoURL = https://www.zimbra.com LogoImgDir = @AppContextPath@/skins/_base/logos/n1 LogoURL = http://www.n1-web.fr
2> La page de Login
Personnellement j’ai changé légèrement son apparence en reprenant la base du skin carbon et en rendant le bg plus sombre dans le même style que le skin carbon toujours.
De plus j’ai rajouté des mentions légales et un peu de texte ainsi qu’un logo de plus grande taille.
/jetty_base/webapps/zimbra/public/login.jsp
Pour adapter la taille du logo sur la login page, voir ligne 486 rajout du code suivant :
<!-- Rajout n1-Web.fr -- DEBUT -->
<style>
.LoginScreen H1, .SplashScreen H1 {
margin: -10px 0 40px 0px !important;
}
.ImgLoginBanner {
background-position: center center !important;
width: 500px !important;
height: 100px !important;
}
</style>
<!-- Rajout n1-Web.fr -- FIN -->
Rajout d’un texte publicitaire sur le bas de la boite de login, voir ligne 664 rajout du code suivant :
<!-- Rajout n1-Web.fr -- DEBUT --> <hr width="72%" style="border-color: transparent transparent white; height: 0;"><br> <div class="copyright" align="center"> <em>Solution d'hébergement de boite email professionnelle proposée par n1-Web.fr<br>Offres à partir de 30€ annuel (soit 2.5€ mensuel) plus d'information sur ce <a href="http://www.n1-web.fr/webhosting/11-boite-email-professionnelle.html" target="_blank">lien</a>.</em> </div> <!-- Rajout n1-Web.fr -- FIN -->
Enfin rajout des mentions légales de mon entreprise en footer, juste au dessus des mentions de bases, voir ligne 676 rajout du code suivant :
<!-- Rajout n1-Web.fr -- DEBUT --> <div class="copyright"> <em><a href="http://www.n1-web.fr" target="_blank">n1-Web.fr</a> :: RCS Carcassonne :: SIREN 751 369 208</em> </div> <!-- Rajout n1-Web.fr -- FIN -->
Enfin petit réglage pour changer le dégradé du background de la page de login
/jetty_base/webapps/zimbra/skins/_base/base3/skin.properties
Lignes 87 commentées et remplacées changement du bg gradient.
#LoginBkgdGrad = @grad(LoginBkgdC1,LoginBkgdC2,linear-vertical)@ LoginBkgdGrad = @grad(#5C5C5C,#484848,linear-vertical)@
Voilà pour la page de login 🙂
3> Skin de départ
Petit tweak, je change le skin de départ vers une version que je préfère, ce qui n’empêche pas les utilisateurs de pouvoir changer dans leur préférences si ils le souhaitent.
/jetty_base/etc/zimbra.web.xml.in
Ligne 52 indiquer le skin par défaut
<context-param> <param-name>zimbraDefaultSkin</param-name> <param-value>carbon</param-value> </context-param>
4> Changement de la taille des logos
Vue que j’ai voulu faire des bannières un peu plus grande que celle d’origine, j’ai dût légèrement adapter le rendu des skins.
/jetty_base/webapps/zimbra/skins/_base/base/skin.properties
Lignes 202 et 206 commentées et remplacées pour adapter la taille des images login et bannière.
#LoginBannerWidth = 450px LoginBannerWidth = 500px #AppBannerWidth = 120px AppBannerWidth = 540px
/jetty_base/webapps/zimbra/skins/_base/base2/skin.properties
Lignes 86, 90 et 102 commentées et remplacées pour adapter la taille des images login et bannière mais aussi le placement sur de celle ci.
#LoginH1 = margin:40px 30px; LoginH1 = margin:0px 0px 50px 30px; #LoginBanner = @img(, LoginBannerImg, 450px, 100px)@ LoginBanner = @img(, LoginBannerImg, 500px, 100px)@ #AppBanner = @img(, AppBannerImg, 200px, 35px)@ AppBanner = @img(, AppBannerImg, 540px, 35px)@
/jetty_base/webapps/zimbra/skins/_base/base3/skin.properties
Lignes 96, 102, 104 et 114 commentées et remplacées pour adapter la taille des images login et bannière, ainsi que le placement de celle ci.
#LoginH1 = margin:0px 30px 30px; overflow:hidden; LoginH1 = margin:0px 0px 50px 30px; #LoginBanner = @img(, LoginBannerImg, 440px, 60px)@ LoginBanner = @img(, LoginBannerImg, 500px, 100px)@ #LoginBannerPosition = background-position:bottom left; LoginBannerPosition = background-position:0 0; #AppBanner = @AppBannerPos@ @img(, AppBannerImg, 200px, 35px)@ AppBanner = @AppBannerPos@ @img(, AppBannerImg, 540px, 35px)@
/jetty_base/webapps/zimbra/skins/carbon/skin.properties
Ligne 88 et 89 commentées et remplacées pour adapter le position de l’image sur l’écran de login
#LoginH1 = margin:0px 0px 50px 30px; #LoginBanner = @img(, LoginBannerImg, 367px, 60px)@ LoginH1 = margin:-10px 0px 40px 0px; LoginBanner = @img(, LoginBannerImg, 500px, 100px)@
/jetty_base/webapps/zimbra/skins/pebble/skin.properties
Lignes 81 et 87 commentées et remplacées pour adapter la taille des images login et bannière.
#AppBanner = @AppBannerPos@ @img(, AppBannerImg, 200px, 35px)@ @LogoOpacity@ AppBanner = @AppBannerPos@ @img(, AppBannerImg, 540px, 35px)@ @LogoOpacity@ #LoginBanner = @img(, LoginBannerImg, 440px, 60px)@ @LogoOpacity@ LoginBanner = @img(, LoginBannerImg, 500px, 100px)@ @LogoOpacity@
5> Conclusion
Voici le rendu final de la page de login avec changement de skin par défaut, de couleur de bg, de rajout de texte, et d’utilisation d’un logo plus grand et replacé.
Le gros du job peut ce faire en gardant un backup du dossier “/opt/zimbra/jetty_base/webapps/zimbra/skins/*”
Malgré les différentes maj, les skins n’ont quasiment pas évolués, et donc on peut facilement récupérer ces anciens réglages en important sont ancien dossier skins.
Enfin point important, pour voir les changements préférer un navigateur comme Firefox qui ne force pas l’utilisation du cache, ou bien vider / désactiver le cache de google Chrome.
Puis surtout pour prise en compte des changements il faut impérativement redémarrer le serveur zimbra
# su zimbra # zmcontrol restart