Difference between revisions of "How to change modern user interface logo"

(How to change the logo of Modern UI ?)
(How to change the application logo of Modern UI ?)
 
(8 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
__FORCETOC__
 
__FORCETOC__
 
<div class="col-md-12 ibox-content">
 
<div class="col-md-12 ibox-content">
=How to change the logo of Modern UI ?=  
+
=How to change the application logo of Modern UI ?=  
 
<hr>
 
<hr>
 
{{KB|{{WIP}}|{{ZCS 9.0}}||||}}  
 
{{KB|{{WIP}}|{{ZCS 9.0}}||||}}  
  
 
====Requirement====
 
====Requirement====
- Replace the application logo of Modern UI with company brand logo.
+
Replace the application logo of Modern UI with company brand logo.
  
 
[[File:Modern_UI_Logo.PNG]]
 
[[File:Modern_UI_Logo.PNG]]
Line 25: Line 25:
 
[[File:Deafult_virtual_host.PNG]]
 
[[File:Deafult_virtual_host.PNG]]
  
If it shows clients/default. Then please follow below steps  
+
If it shows default virtual host. Then please follow below steps  
  
=====Step 1=====
+
*Step 1) Go on below path
*Go on below path
 
 
<pre>cd /opt/zimbra/jetty/webapps/zimbra/modern/clients/default/assets</pre>
 
<pre>cd /opt/zimbra/jetty/webapps/zimbra/modern/clients/default/assets</pre>
  
=====Step 2=====
+
*Step 2) Copy logo.svg with logo.svg.old (As backup)
*Copy logo.svg with logo.svg.old (As backup)
 
 
<pre>cp logo.svg logo.svg.old</pre>
 
<pre>cp logo.svg logo.svg.old</pre>
  
=====Step 3=====
+
*Step 3) Upload company logo name with logo.svg at below path
*Upload your company logo name with logo.svg at below path
 
 
<pre>/opt/zimbra/jetty/webapps/zimbra/modern/clients/default/assets</pre>
 
<pre>/opt/zimbra/jetty/webapps/zimbra/modern/clients/default/assets</pre>
  
If you add your image as root user, you might be want to change the files privileges to Zimbra:
+
If added image as root user, it might be change the files privileges to Zimbra:
 
<pre>chown zimbra:zimbra /opt/zimbra/jetty/webapps/zimbra/modern/clients/default/assets/logo.svg</pre>
 
<pre>chown zimbra:zimbra /opt/zimbra/jetty/webapps/zimbra/modern/clients/default/assets/logo.svg</pre>
  
=====Step 4=====
+
*Step 4) Edit config.json to change the version. Do not use a previously used value.
*Edit config.json to change the version. Do not use a previously used value.
 
 
<pre>vi /opt/zimbra/jetty/webapps/zimbra/modern/clients/default/config.json</pre>
 
<pre>vi /opt/zimbra/jetty/webapps/zimbra/modern/clients/default/config.json</pre>
  
=====Step 5=====
+
*Step 5) Restart the zmmailboxdctl service
*Restart the zmmailboxdctl service
 
 
<pre>zmmailboxdctl restart</pre>
 
<pre>zmmailboxdctl restart</pre>
  
====Customize Virtual Hostname====
+
====B. ZCS environment with customize virtual hostname====
 
[[File:Custom_virtual_host.PNG]]
 
[[File:Custom_virtual_host.PNG]]
  
If It shows the default virtual host name like example.com. Then you need to follow the below step.
+
If it shows the virtual host name like example.com. Then follow the below steps.
  
=====Step 1=====
+
*Step 1) Switch Zimbra user and go on below path
*Switch Zimbra user and Go on below path
 
 
<pre>
 
<pre>
 
su - zimbra
 
su - zimbra
Line 62: Line 56:
 
</pre>
 
</pre>
  
=====Step 2=====
+
*Step 2) Copy default virtual host with virtual hostname
*Copy default virtual host with your virtual hostname
 
 
<pre>cp -r default <virtual hostname></pre>
 
<pre>cp -r default <virtual hostname></pre>
  
=====Step 3=====
+
*Step 3) After that it will show like below. We have example.com virtual host
*After that it will show like below. We have example.com virtual host
 
 
<pre>
 
<pre>
 
zimbra@example:~/jetty/webapps/zimbra/modern/clients$ pwd
 
zimbra@example:~/jetty/webapps/zimbra/modern/clients$ pwd
Line 76: Line 68:
 
</pre>
 
</pre>
  
=====Step 4=====
+
*Step 4) Go on directory assets in virtualhost directory
*You need to go on your directory assets in your virtualhost directory
 
 
<pre>cd /opt/zimbra/jetty/webapps/zimbra/modern/clients/example.com/assets</pre>
 
<pre>cd /opt/zimbra/jetty/webapps/zimbra/modern/clients/example.com/assets</pre>
  
=====Step 5=====
+
*Step 5) Copy logo.svg with logo.svg.old (As backup)
*Copy logo.svg with logo.svg.old (As backup)
 
 
<pre>cp logo.svg logo.svg.old</pre>
 
<pre>cp logo.svg logo.svg.old</pre>
  
=====Step 6=====
+
*Step 6) Upload company logo name with logo.svg at below path
*Upload your company logo name with logo.svg at below path
 
 
<pre>/opt/zimbra/jetty/webapps/zimbra/modern/clients/example.com/assets</pre>
 
<pre>/opt/zimbra/jetty/webapps/zimbra/modern/clients/example.com/assets</pre>
  
 
+
*Step 7) Edit config.json to change the version. Do not use a previously used value.
=====Step 7=====
 
*Upload your company logo name with logo.svg at below path
 
<pre>/opt/zimbra/jetty/webapps/zimbra/modern/clients/example.com/assets</pre>
 
 
 
=====Step 8=====
 
*Edit config.json to change the version. Do not use a previously used value.
 
 
<pre>vi /opt/zimbra/jetty/webapps/zimbra/modern/clients/example.com/config.json</pre>
 
<pre>vi /opt/zimbra/jetty/webapps/zimbra/modern/clients/example.com/config.json</pre>
  
=====Step 9=====
+
*Step 8) Restart the zmmailboxdctl service
*Restart the zmmailboxdctl service
 
 
<pre>zmmailboxdctl restart</pre>
 
<pre>zmmailboxdctl restart</pre>
  

Latest revision as of 09:46, 24 November 2021

How to change the application logo of Modern UI ?


   KB 24383        Last updated on 2021-11-24  




0.00
(0 votes)

Requirement

Replace the application logo of Modern UI with company brand logo.

Modern UI Logo.PNG

Solution

There can be two ZCS environment, one with virtual hostname and the other without virtual hostname. The solution for each will be as follows.

Check virtual host name with below steps.

- Login in Modern UI

- Right-click on the logo and open the logo in new tab.

- It will show default virtual hostname like below, or It will show customize virtual hostname.

A. ZCS environment with default virtual hostname.

Deafult virtual host.PNG

If it shows default virtual host. Then please follow below steps

  • Step 1) Go on below path
cd /opt/zimbra/jetty/webapps/zimbra/modern/clients/default/assets
  • Step 2) Copy logo.svg with logo.svg.old (As backup)
cp logo.svg logo.svg.old
  • Step 3) Upload company logo name with logo.svg at below path
/opt/zimbra/jetty/webapps/zimbra/modern/clients/default/assets

If added image as root user, it might be change the files privileges to Zimbra:

chown zimbra:zimbra /opt/zimbra/jetty/webapps/zimbra/modern/clients/default/assets/logo.svg
  • Step 4) Edit config.json to change the version. Do not use a previously used value.
vi /opt/zimbra/jetty/webapps/zimbra/modern/clients/default/config.json
  • Step 5) Restart the zmmailboxdctl service
zmmailboxdctl restart

B. ZCS environment with customize virtual hostname

Custom virtual host.PNG

If it shows the virtual host name like example.com. Then follow the below steps.

  • Step 1) Switch Zimbra user and go on below path
su - zimbra
cd /opt/zimbra/jetty/webapps/zimbra/modern/clients/
  • Step 2) Copy default virtual host with virtual hostname
cp -r default <virtual hostname>
  • Step 3) After that it will show like below. We have example.com virtual host
zimbra@example:~/jetty/webapps/zimbra/modern/clients$ pwd
/opt/zimbra/jetty/webapps/zimbra/modern/clients
zimbra@example:~/jetty/webapps/zimbra/modern/clients$ ls
example.com  default
zimbra@example:~/jetty/webapps/zimbra/modern/clients$
  • Step 4) Go on directory assets in virtualhost directory
cd /opt/zimbra/jetty/webapps/zimbra/modern/clients/example.com/assets
  • Step 5) Copy logo.svg with logo.svg.old (As backup)
cp logo.svg logo.svg.old
  • Step 6) Upload company logo name with logo.svg at below path
/opt/zimbra/jetty/webapps/zimbra/modern/clients/example.com/assets
  • Step 7) Edit config.json to change the version. Do not use a previously used value.
vi /opt/zimbra/jetty/webapps/zimbra/modern/clients/example.com/config.json
  • Step 8) Restart the zmmailboxdctl service
zmmailboxdctl restart


Submitted by: Ankit Dagdi
Verified Against: ZCS 9.0 Date Created: 2021-11-03
Article ID: https://wiki.zimbra.com/index.php?title=How_to_change_modern_user_interface_logo Date Modified: 2021-11-24



Try Zimbra

Try Zimbra Collaboration with a 60-day free trial.
Get it now »

Want to get involved?

You can contribute in the Community, Wiki, Code, or development of Zimlets.
Find out more. »

Looking for a Video?

Visit our YouTube channel to get the latest webinars, technology news, product overviews, and so much more.
Go to the YouTube channel »


Jump to: navigation, search