Styling der Anmeldeseite für Panelmitglieder

Hinweis: Diese Funktion bezieht sich nur auf Panels, also auch nur auf Konten und Arbeitsbereiche, in denen Panels aktiviert sind.

Übersicht

Die Anmeldeseite für Panelmitglieder erscheint meist in folgenden zwei Szenarien::

• Umfragezugang: wenn eine Umfrage autorisierten Zugang für Panelmitglieder verwendet, z.B. in Arbeitsabläufen, die auf Panel-Synchronisation beruhen.
• Zugriff auf Berichte: wenn Dashboards oder Berichte eine Panel-Autorisierung verwenden.

In beiden Szenarien kann die Anmeldeseite für Panelmitglieder mit benutzerdefiniertem CSS gestaltet werden, um sie an die Markenrichtlinien anzupassen (Farben, Typografie, Abstände, Logos).

Wo die Gestaltung der Login-Seite konfiguriert werden kann

Für die Gestaltung der Anmeldeseite für Panel-Mitglieder gibt es zwei unterstützte Möglichkeiten:

1. Panel-Ebene
   Der zugehörige CSS-Code wird in den Panel-Einstellungen hinzugefügt und immer dann angewendet, wenn die Mitglieder dieses Panels die Anmeldeseite sehen.
2. Umfrage- oder Berichtsebene
   Im CSS-Editor für das Umfrage- oder Berichtslayout wird ein entsprechender CSS-Code hinzugefügt. Damit können Sie die Login-Seiten für bestimmte Umfragen oder Berichte steuern, unabhängig davon, welches Panel sich anmeldet.

Wenn an beiden Stellen verwandter CSS-Code hinzugefügt wird, hat die Ebene Umfragelayout/Berichtslayout Vorrang.

Empfohlene Vorgehensweise

• Verwenden Sie die Gestaltung auf Panel-Ebene, wenn Sie sicherstellen möchten, dass ein bestimmtes Panel immer dasselbe Design für die Anmeldeseite verwendet, unabhängig davon, welche Umfragen oder Dashboards aufgerufen werden.
• Verwenden Sie die Gestaltung auf Umfrage-/Berichtsebene, wenn das Styling für eine bestimmte Umfrage oder einen bestimmten Bericht/Dashboard eindeutig sein muss.

So gestalten Sie die Anmeldeseite auf Panel-Ebene

1. Öffnen Sie das Panel.
2. Öffnen Sie die Registerkarte Variablen.
3. Suchen Sie in den Einstellungen der Seitenleiste den benutzerdefinierten Stil der Login-Seite.
4. Fügen Sie den CSS-Code ein
5. Testen Sie das Design der Anmeldeseite für Panelmitglieder, indem Sie eine beliebige Umfrage mit aktivierter Panel-Synchronisierung öffnen.

So gestalten Sie die Anmeldeseite auf Umfrage- oder Berichtsebene

1. Öffnen Sie das entsprechende Umfrage- oder Berichtslayout in der Bibliothek (wenn Sie keine Layout-Editoren in der Bibliothek sehen, lesen Sie hier weiter)
2. Fügen Sie den CSS-Code in den benutzerdefinierten CSS-Bereich ein.
3. Speichern Sie die Änderungen und validieren Sie das Ergebnis, indem Sie den Ablauf der Anmeldeseite öffnen.

CSS-Code

Kopieren Sie einfach den unten stehenden Code an eine der oben genannten Stellen. Passen Sie Logo und Farben wie gewünscht an.

/* Login Page Logo */
.da-login-container .da-login-logo {
    height: 50px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(REPLACE WITH LOGO URL IN QUOTES);
}
/* Hiding Login Page triangles */
.da-body-login {
    background-image: none;
  }
/* Login Button Color */
.btn.btn-success {
    background-color: #66cc99;
    border-color: #66cc99;
    color: #ffffff;
  }
/* Login Button Color hover */
.btn.btn-success:hover {
    background-color: #49c286;
    border-color: #40bf80;
    color: #ffffff;
  }
/* Login page background */
.da-body-login {
    background-color: #ffffff;
  }
/* login page link (password forgotten) */
sha-report-login > div > div > div:nth-child(4) > div > a {
  color: #000;
}

Fragen und Antworten

Kann ich den Beispielcode für die Anmeldeseite genau gleich gestalten?

Nein, der Beispielcode für die Anmeldeseite ist anders. Sie verwendet dasselbe Umfragelayout und dieselben grundlegenden Designeinstellungen wie die entsprechende Umfrage. Die in diesem Artikel erwähnten Themen haben nichts mit der Beispielseite für die Anmeldung zum Code zu tun.

Fehlerbehebung

Ich sehe keine Änderungen auf meiner Anmeldeseite für Panel-Mitglieder, nachdem ich den CSS-Code in den Panel-Einstellungen eingefügt habe.

Wenn Sie bereits eine benutzerdefinierte Login-Seite haben und diese ändern möchten, ist die wahrscheinlichste Ursache, dass der zugehörige CSS-Code auch im Umfrage- oder Berichtslayout vorhanden ist, das Vorrang vor der Ebene der Panel-Einstellungen hat. Navigieren Sie in diesem Fall zu Bibliothek > zugehöriges Umfragelayout oder Berichtslayout und prüfen Sie dort.

Wenn es sich nicht um das oben genannte Problem handelt, erstellen Sie bitte ein Support-Ticket.