Styling inlogpagina panelleden

Opmerking: deze functie heeft alleen betrekking op Panels, dus ook alleen op accounts en workspaces waar Panels zijn ingeschakeld.

Overzicht

De inlogpagina voor panelleden kan in twee veelvoorkomende scenario’s verschijnen:

• Enquêtetoegang: wanneer een enquête geautoriseerde toegang gebruikt voor panelleden, bijvoorbeeld in workflows die afhankelijk zijn van panelsynchronisatie.
• Rapportagetoegang: wanneer dashboards of rapporten gebruikmaken van panelautorisatie.

In beide scenario’s kan de inlogpagina voor panelleden gestyled worden met custom CSS om deze in lijn te brengen met de merkrichtlijnen (kleuren, typografie, spatiëring, logo’s).

Waar login-pagina styling kan worden geconfigureerd

Er zijn twee manieren om de inlogpagina voor panelleden te stylen:

1. Panel niveau
   CSS-code wordt toegevoegd in de instellingen van het panel en wordt toegepast wanneer de leden van dat panel de inlogpagina zien.
2. Enquête- of rapportniveau
   CSS-code wordt toegevoegd in de CSS-editor Enquête Layout of Rapport layout. Dit maakt het mogelijk om inlogpagina’s voor een specifieke enquête of een specifiek rapport te beheren, ongeacht het panel dat zich aanmeldt.

Als CSS-code op beide plaatsen wordt toegevoegd, dan krijgt de Enquête layout /Rapport layout prioriteit.

Aanbevolen aanpak

• Gebruik styling op panelniveau als het doel is om ervoor te zorgen dat één specifiek panel altijd dezelfde styling gebruikt voor inlogpagina’s, ongeacht welke onderzoeken of dashboards worden geopend.
• Gebruik styling op enquête layout/rapport layout niveau als de styling uniek moet zijn voor een specifieke enquête of een specifiek rapport/dashboard.

Hoe de inlogpagina stylen op panelniveau

1. Open het paneel.
2. Open het tabblad Variabelen.
3. Zoek in de zijbalkinstellingen naar inlogpagina aangepaste stijl.
4. Plak de CSS-code
5. Test het ontwerp van de inlogpagina voor panelleden door een enquête te openen waarbij panelsynchronisatie is ingeschakeld.

Hoe de inlogpagina op enquête- of rapportniveau te stylen

1. Open de relevante enquête layout of rapport layout in de bibliotheek (als u geen layout editors ziet in de bibliotheek, leest u hier meer)
2. Plak de CSS-code in het gebied Aangepaste CSS.
3. Sla de wijzigingen op en valideer het resultaat door de inlogpagina te openen.

CSS-code

Kopieer de onderstaande code en plak deze op een van de hierboven genoemde plaatsen. Pas het logo en de kleuren naar wens aan.

/* 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;
}

V&A

Kan ik de inlogpagina voor code beperkte toegang (samples) op dezelfde manier opmaken?

Nee, de inlog pagina voor code beperkte toegang tot enquêtes is anders. Deze maakt gebruik van dezelfde enquête layout en basisontwerpinstellingen als de gerelateerde enquête. Onderwerpen die in dit educatie-artikel worden vermeld, zijn niet gerelateerd aan de aanmeldpagina voor sample leden met een code.

Problemen oplossen

Ik zie geen wijzigingen op mijn inlogpagina voor panelleden nadat ik CSS-code heb geplakt in de panelinstellingen.

Als u al een aangepaste inlogpagina met een eigen merk hebt en u wilt deze wijzigen, dan is de meest waarschijnlijke oorzaak dat de gerelateerde CSS-code ook aanwezig is in de enquêtelay-out of rapportlay-out, die voorrang heeft op het niveau van de panelinstellingen. Navigeer in dat geval naar Bibliotheek > Gerelateerde enquêtelay-out of rapportlay-out en controleer deze daar.

Als dit niet het bovenstaande probleem is, maakt u een support ticket aan.