We’ve migrated our documentation to a new site, which means some URLs have changed.
Subscriptions
Subscriptions
Breadcrumbs

How do I style Piano Identity Management templates with CSS (layout, width, modal, input fields, form appearance)?

1. Where to add CSS

For all Identity Management templates, the canonical place to add CSS is the CSS tab of the Identity Management Layout template:

  1. Manage → Templates dropdown.

  2. Open the Identity Management Layout template.

  3. Click Edit code, then CSS in the top right.

The Identity Management Layout is the centralized styling template. Individual templates such as Piano ID new password page or Restore Password do not have their own CSS tab - they inherit from the Layout. Use this central tab rather than inline <style> blocks for maintainability.

For Identity Management Custom Forms, CSS goes in the custom form's own Layout CSS. Custom forms have their own code base and render in their own Identity Management Layout.

2. Set the width of Identity Management templates

2.1 JavaScript tp.pianoId.show({ width: '…' })

Applies to modal and inline templates:

// Inline register screen, 1000px wide
tp.pianoId.show({
  displayMode: 'inline',
  screen: 'register',
  containerSelector: '#your-container',
  width: '1000'
});

// Modal register screen, 1000px wide
tp.pianoId.show({
  displayMode: 'modal',
  screen: 'register',
  width: '1000'
});

// Login modal at 600px
tp.pianoId.show({
  displayMode: 'modal',
  screen: 'login',
  width: '600'
});

Button binding:

<button onclick="tp.pianoId.show({displayMode:'modal',screen:'register',width:'600'});">Register</button>

2.2 <config width="…"> in the template 

<config width="400"></config>

Useful when the default width is too narrow (e.g. a 46px default seen in some configurations) or to size the Composer-hosted template that launches the login/register buttons. For the Composer launching template: <config width="600"></config>.

2.3 CSS on body in Identity Management Layout 

body {
  width: 800px !important;
}

Mobile override:

@media only screen and (max-width: 600px) {
  body {
    width: 200px !important;
  }
}

Or desktop + mobile combo:

body {
  width: 600px !important;
}
@media only screen and (max-width: 500px) {
  body {
    width: 100% !important;
  }
}

This applies globally - design so the width works for every template that uses the Layout.

2.4 Container width fix

If the Identity Management login modal renders too narrow because the container is locked to 300px:

.piano-id-container {
  width: 100%;
}

Add this to your site's stylesheet (not the template).

2.5 Width in checkout vs standalone

A login/registration form opened inside checkout inherits the checkout template's width; standalone uses the Identity Management template width. Options:

  • Align checkout width to Identity Management width.

  • Restrict Identity Management via CSS:

css body { max-width: 400px; margin-left: 150px; } 

  • Dynamically adjust the iframe width via JavaScript after render (more complex; requires testing).

3. Differentiate inline (checkout) vs modal (direct) styling

The Identity Management Layout exposes two classes to differentiate context:

  • .piano-id-inline - rendered inside checkout

  • .piano-id-modal - rendered directly via tp.pianoId.show()

Use them to style the same screens differently:

.piano-id-inline { color: red; }
.piano-id-modal { color: green; }

4. Configure transition width between mobile and desktop

Use the <config> directive (Section 2.2). Note: only one template per type is supported (one login, one registration, one reset). Use directives like isCheckout or stage inside a single template to render different states rather than maintaining multiple templates of the same type. For inline registration offers inside checkout, only one markup version is allowed; for standalone Identity Management windows you can use stage to render different states.

5. Style input fields

In Identity Management Layout → CSS, the basic placeholder style is:

.placeholder { color: red; }

This affects all input fields. To target specific fields, scope by the field's icon class. .icon-email + t and .icon-password + t target the placeholder text next to the email and password icons:

/* Email input field placeholder */
.icon-email + t { color: red; }

/* Password input field placeholder */
.icon-password + t { color: red; }

Use the same <icon-name> + t pattern for other fields whose markup follows the icon-plus-text convention.

6. Style the modal header and language selector

Target language-selector inside header:

header language-selector {
  height: 48px;
}

To align the close and language buttons with the header, remove the padding on the div inside language-selector and set a height for the close button (.tp-close):

language-selector div { padding: 0; }
.tp-close { height: 48px; }

For extra white space / a second banner caused by header padding, add a class to the first <header> element and target it:

<header class="no-banner">…</header>

.no-banner { padding-top: 0px; }

To change the checkout banner background (e.g. aubergine):

.account-popup-header {
  background: linear-gradient(180deg, #%, #30004b 64px, #fff 64px, #fff 149px, #fff 149px) !important;
}

(The #% placeholder in the recipe should be replaced with the desired starting color.)

Test header CSS changes in Sandbox/Staging before publishing.

7. Style the "OR" divider

The "OR" divider in Piano ID login page is plain HTML. Adjust styling inline on the last element:

<div class="divider"><t style="font-size:18px;">or</t></div>

The same inline-style technique works for any text in the template - change size, color, weight directly on the <t> element.

8. Style buttons, links, and section colors

To recolor login / signup / forgot-password buttons, edit the btn. and a, .link rules in Identity Management Layout → CSS:

a, .link { color: red !important; }
.btn-primary { background-color: #003366 !important; }

For My Account links such as "Change Password", apply the same selector inside the Piano ID profile in My Account template:

a, .link { color: red !important; }

To remove image borders on the login/signup section, modify the .logo rule's border - see the Logo & Branding article for details.

9. Override default styles (specificity & !important)

Custom CSS in Identity Management Layout can be overwritten by Piano's hosted default styles. Two reliable approaches:

  1. Increase specificity of your selector: target #piano-id-container .my-class instead of .my-class.

  2. Use !important:

css .my-custom-class { color: red !important; } 

For progressive registration forms, target the parent component's class to override default styles. Audit your Identity Management Layout to ensure no rule in your own CSS is being inadvertently overridden.

10. Caching considerations

Custom CSS changes are typically visible immediately, but server-side caching can occasionally delay them by 1-2 hours. If you observe this:

  • Hard-refresh (Ctrl+F5) and clear browser cache.

  • For persistent delays, contact support. Support can make a minor non-impactful template change to measure actual propagation time.

For Identity Management Custom Forms, caching plus periodic backend deployments can mask recent changes. Always hard-refresh after a Custom Form edit.

11. Custom forms and Identity Management Layout interaction

Identity Management Custom Forms render in their own Identity Management Layout. To customize:

  • Use specific selectors or custom classes to avoid conflicts with default Piano styles.

  • Target #piano-id-container to keep layout consistent.

  • For multi-step templates, scope CSS to the intended elements to prevent hiding or mispositioning fields.

  • Add JavaScript in <custom-script> blocks to manage interactions between custom and standard fields.

For multi-step onboarding, the registration form is centrally managed; adjustments apply to all registrations. For tailored multi-step UX, use a Composer experience that conditionally displays different form sections.

12. Scripts in Identity Management templates

Use <custom-script> rather than <script>. The standard <script> tag may be filtered out by Identity Management templates. <custom-script> is recognized and its JavaScript executes correctly.

Identity Management templates support AngularJS 1.2.22 with built-in directives such as ng-model, ng-class, and ng-click. Custom AngularJS directives are not supported - functions referenced from directives like ng-click must be defined inside a <custom-script> block.

13. Verify changes are reaching the right template

If your CSS changes are not visible:

  • Confirm the changes are in Identity Management Layout (or the appropriate per-template CSS like Piano ID profile in My Account for that template's elements).

  • Individual templates such as login or register pages do not have their own CSS tab; CSS lives in the Layout.

  • Verify Piano is initialized on the page where the form renders. Styling changes won't take effect if Piano isn't loaded.

  • Check the correct template category - confirm you're editing Piano ID profile in My Account for My Account changes rather than a generic login or register template.

14. Best practices

  • Centralize all Identity Management styling in Identity Management Layout → CSS. Avoid inline <style> blocks except for one-off edge cases such as the "OR" divider.

  • Test in Sandbox / Staging before publishing.

  • Use specific selectors to scope styles (.piano-id-inline vs .piano-id-modal; #piano-id-container for custom forms).

  • For mobile-vs-desktop variants, use @media only screen and (max-width: …) blocks rather than separate templates.

  • Reserve !important for overriding Piano default styles - it should be the exception, not the rule.

Last updated: