Panel members login page styling

Note: This feature relates only to Panels, so also only to accounts and workspaces where Panels are enabled.

Overview

The panel member login page may appear in two common scenarios:

• Survey access: when a survey uses authorized access for panel members, for example in workflows that rely on panel synchronization.
• Reporting access: when dashboards or reports use panel authorization.

In both scenarios, the panel member login page can be styled with custom CSS to align it with brand guidelines (colors, typography, spacing, logos).

Where login-page styling can be configured

There are two main supported ways for styling panel member login page:

1. Panel level
   Related CSS code is added in the Panel settings and is applied whenever that panel’s members see the login page.
2. Survey or report level
   Related CSS code is added in the Survey Layout or Report Layout CSS editor. This allows to control login-pages to specific survey or report, regardless of which panel logs-in.

If related CSS code is added in both places, then priority takes Survey Layout/Report Layout level.

Recommended approach

• Use panel-level styling when the goal is to ensure that one specific panel always uses the same login page styling, regardless of which surveys or dashboards are accessed.
• Use survey/report-level styling when the styling must be unique for a specific survey or a specific report/dashboard.

How to style the login page at panel level

1. Open the Panel.
2. Open the Variables tab.
3. In the sidebar settings, locate Login page custom style.
4. Paste the CSS code
5. Test panel member login page design by opening any survey with panel synchronization enabled.

How to style the login page at survey or report level

1. Open relevant survey layout or report layout in the library (if you don’t see layout editors in the library, read more here)
2. Paste the CSS code into the custom CSS area.
3. Save changes and validate the result by opening the login page flow.

CSS code

Just copy-paste code below to one of the places mentioned above. Adjust logo and colors as desired.

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

Q&A

Can I style the same way Sample code access log-in page?

No, sample code access login page is different. It is using same survey layout and basic design settings as related survey. Topics mentioned in this education article are not related to sample code access login page.

Trouble-shooting

I don’t see any changes to my panel member log-in page after I paste CSS code in panel settings.

If you already have custom branded login-page and you want to change it, then the most probable cause is that related CSS code is also present in survey layout or report layout, which takes priority over panel settings level. In that case, navigate to Library > related survey layout or report layout and check there.

If it’s not the issue above, please create support ticket.