Logo Settings

You can customize the logos used across the platform via the admin panel.

To provide your own logos, navigate to System Settings and search for the logo keyword to find the corresponding settings.

By default, you need to configure the following settings with your custom logos (the same logo can be used for several settings if needed):

HOSTER_FAVICON - favicon for the user dashboard
HOSTER_JCA_FAVICON - favicon for the admin panel
HOSTER_EMAILS_LOGO - displayed in the email notifications sent to users
HOSTER_JCA_LOGO - shown at the admin panel’s sign-in window
HOSTER_JCA_LOGO_SMALL - shown at the top left corner of the admin panel
HOSTER_LOGO - displayed at the dashboard’s sign-up/in window
HOSTER_LOGO_SMALL - shown at the top left corner of the dashboard
HOSTER_LOGO_ACTIVATION_FORM - displayed at the account activation form
HOSTER_LOGO_TUTORIAL - shown at the dashboard tutorial
HOSTER_MAINTENANCE_LOGO - displayed on the maintenance page
HOSTER_PRELOADER_LOGO - shown while loading the dashboard
HOSTER_PRELOADER_JCA_LOGO - shown while loading the admin panel

Note: Based on the additional components you have in your platform, you may have to provide additional logo settings (e.g., HOSTER_KEYCLOAK_LOGO_DARK for Keycloak integration).

The value must use the following JSON format:

1
{"url":"[path or URL]","width":"[img width]","height":"[img height]"}

Where:

url - the direct link to the image file or the path to the image file in the platform resources
width - the width of the image in pixels.
height - the height of the image in pixels.

Confirm the changes by clicking the Apply button.

Note: Logos for resellers can be configured in the same way via the reseller’s admin panel.

Custom Logo for Activation Form

To set a separate logo image for the account activation form, follow the instructions below:

1. Access the platform resources folder.

2. Once connected, upload a new logo file (with the .png extension) that should be displayed above the activation form to the Images folder.

3. Then, either create a new activation folder inside the public_html directory (if signup verification is not enabled yet) or find and open it. Place the header.html file (which is used for stating the custom dashboard styles) with your desired settings in this folder.

Here is an example that can be inserted into the header.html file to define the custom activation form logo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<style>
.logo {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url('https://app.{platform_domain}/res/images/image.png') no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}
</style>

Note: Due to the internal system requirements, we recommend providing this text in one line, e.g.:

1
<style>.logo{display:block;-moz-box-sizing:border-box;box-sizing:border-box;background: url('https://app.{platform_domain}/res/images/image.png') no-repeat;width:180px;height:236px;padding-left:180px}</style>

You can use the cssminifier.com service (or any other similar service you prefer) to minify your configuration so it can be displayed in this format.

4. Once the new settings are saved, open the https://reg.{platform_domain}/activation/rebuild link in your browser to apply the changes. As a result, the content of this file will be automatically fetched to the index.html page with the activation form.

Logo Settings

Custom Logo for Activation Form

What’s next?