Das Logo des Clients anpassen

Info

Der JustRelate CRM Web-Client erlaubt es, das Produktlogo auf dem Anmeldebildschirm sowie einige Farben für die Darstellung des "Login"-Buttons und der Textelemente sowie das Logo in der Top-Leiste des Web-Clients anzupassen.

Um optimale Ergebnisse zu erzielen, wird dringend empfohlen, das Logo im SVG-Format bereitzustellen. Andere unterstützte Formate sind PNG und JPEG. Es wird in einer Box mit 296px Breite und 41px Höhe gerendert.

Logobild anpassen

  • Als Name der Bilddatei werden logo.svg, logo.png und logo.jpg unterstützt, dem tatsächlichen Format entsprechend. Der Web-Client sucht nach benutzerdefinierten Logobildern in genau dieser Reihenfolge.
  • Die Datei muss im Ordner "custom" des Webclients abgelegt werden. Der Name dieses Ordners besteht aus "custom-" und dem eigentlichen Namen der Webanwendung.
    Der Standard ist custom-pisasales. Wenn der Web-Client beispielsweise als "pisatest" bereitgestellt wird, lautet der vollständige Name custom-pisatest.
  • Der Ordner "custom" befindet sich auf dem Webserver-Computer. Sein übergeordneter Ordner wird durch die Umgebungsvariable PSCWEBCLI_WORK referenziert.

Beispiel

$ ls -al $PSCWEBCLI_WORK/custom-pisasales/
total 13
drwxr-xr-x 1 tomcat tomcat 0 Jun 20 16:12 ./
drwxr-xr-x 1 tomcat tomcat 0 Jun 20 10:12 ../
drwxr-xr-x 1 tomcat tomcat 0 Aug 9 2021 bkg/
drwxr-xr-x 1 tomcat tomcat 0 Jun 20 16:12 css/
drwxr-xr-x 1 tomcat tomcat 0 Feb 21 09:17 fonts/
-rw-r--r-- 1 tomcat tomcat 316 Jun 20 10:09 logo.svg

Farben anpassen

  • Legen Sie eine Datei mit dem Namen Ihrer Wahl und der Erweiterung .css in einem Unterordner namens css des Ordners "custom" ab, siehe oben.
$ ls -al $PSCWEBCLI_WORK/custom-pisasales/css/
total 5
drwxr-xr-x 1 tomcat tomcat 0 Jun 20 16:12 ./
drwxr-xr-x 1 tomcat tomcat 0 Jun 20 16:12 ../
-rw-r--r-- 1 tomcat tomcat 576 Jun 20 10:11 mylogin.css
  • Das folgende Beispiel zeigt, wie Sie die Farben der Schaltfläche "Anmelden" und anderer Elemente auf der Anmeldeseite anpassen können. Ändern Sie einfach die Farben nach Ihren Wünschen.
/* login button */
div.loginButton {
background-color: #d32a00;
color: #fff;
font-size: 24px;
}
div.loginButton:hover {
background-color: #eb2f00;
color: #fff;
}
div.loginButton:active {
background-color: #bd2600;
color: #fff;
}
 
/* "legals" links etc. on login page */
div.loginLegals {
color: #d32a00;
}
 
/* info and language buttons on login page */
div.infoButton {
color: #d32a00;
}
div.infoButton:hover {
color: #d32a00;
}
div.infoButton:active {
color: #d32a00;
}

/* license info text */
div.infoText {
color: #d32a00;
}