Logo Settings

It is necessary to customize logos, used in Jelastic dashboard, via JCA.

At the dashboard two logos are used:

  • at the sign-up/in window
  • in the top left corner of the dashboard

To place your own logos navigate to System Settings and configure the following parameters in the jclient expandable list:

HOSTER_LOGO
HOSTER_LOGO_SMALL

The value has to be of the following format:
{““url”":""[path]/[file].png”",““width”":""[img width]"”,““height”":""[img height]""}

The required size of the logos:

LOGO: 180-300px by 50-80px
SMALL_LOGO: 50-60px by 20-22px

Confirm the changes by clicking the Apply button.

Custom Logo for Activation Form

In order to set a separate logo image to be used at the account activation form, follow the next instruction:

  1. Access the resources' application of your platform (app.{platform_domain}) via FTP: 1

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

  3. Then, either create a new activation folder inside the root public_html directory (if you haven’t the signup verification enabled yet) or just find and enter it.

Put the header.html file (which is used for stating the custom dashboard styles - see the details here) with your desired settings specified to this folder: 3

Here is an example of the code, which can be inserted to the header.html file for defining the custom activation form’s 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}/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>

Due to the internal system requirements, text in this file should be written in one line, e.g.:

 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.{domain name}/images/image.png) no-repeat;
    width:180px;
    height:236px;
    padding-left:180px;
}
</style>

You can use the cssminifier.com service (or any other preferred of a kind) in order to minify your configuration for being displayed in such a way.

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