How do I customize buttons, CTAs, and close icons in Identity Management templates?

1. Where button and CTA styles live

Most button styling for Identity Management screens (login, register, custom forms, my account) inherits from the Piano ID Layout template's CSS tab. Anything you add there applies globally to every Identity Management screen.

• For global changes, edit Manage → Templates → Piano ID Layout → CSS.

• For one specific custom form, add CSS in that custom form's own CSS tab (custom form CSS loads after the Layout CSS, so it overrides it).

• For the My Account screens, the relevant template is Piano ID profile in My Account (also called My Account User Profile Components); use that template's CSS tab.

Because cascade order is layout-first then form, you often need to raise specificity or append !important for site CSS or form-level CSS to win against defaults — particularly when targeting checkboxes, close icons, or anything inside #piano-id-container.

2. Customizing the appearance of CTA buttons

To change the look of a CTA button (font size, color, padding), target the button's CSS class in the appropriate template's CSS tab. For example, to enlarge a "Sign in" button, target .pn-main__sign-button and add a font-size. If enlarging the text causes it to break onto multiple lines, add white-space: nowrap to keep it on one line.

For My Account-specific buttons:

Example — change the Add Card button:

button.btn-add-card {
  background-color: darkred !important;
}

Add hover rules separately if needed. Apply these in the My Account Style template or in the Piano ID profile in My Account CSS.

3. Customizing the "Send" button in custom forms

The submit button in a Piano ID custom form template uses the .btn.prime class. To resize it, target that class in the Piano ID Layout template CSS:

.btn.prime {
  padding: 14px 28px;
  font-size: 18px;
}

If saves fail or time out, do not work with a sandbox app and production app open in the same browser at the same time — that combination causes timeouts. Work from one app at a time, then test the change in a different browser (or after clearing cookies) so you see the deployed result rather than a cached version.

4. Changing the CTA action — launching a registration or checkout form

The main CTA button in a Piano template can be configured to launch a registration form or a checkout flow directly, rather than redirecting to a separate URL. The mechanism is custom fields in Identity Management: bind the button to a custom field configuration that opens the relevant screen. See the Piano docs on custom fields and on displaying registration / checkout inside templates for the specific wiring.

5. The modal close (X) icon — global, not per-template

The close button on a Identity Management modal is rendered outside the iframe. That means CSS placed inside a Identity Management template (Layout or otherwise) does not affect it. To change the close icon's size or position, add the CSS to your site's global CSS (not the Piano dashboard).

Position the close icon

.tp-modal .tp-close.tp-active {
  top: -20px;
}

If the rule does not take effect, add !important:

.tp-modal .tp-close.tp-active {
  top: -20px !important;
}

Resize the close icon

.tp-modal .tp-iframe-wrapper.piano-id-modal-ver-2 .tp-close {
  width: 32px !important;
  height: 32px !important;
}

Both rules go in the site CSS, not the template. Verify on staging first.

6. Inconsistent close-button styling across modals

If the close icon looks different on different Identity Management modals, the inconsistency typically traces to the .piano-id-modal-ver-2 class being applied to some modals and not others. Two fixes:

• Override the .piano-id-modal-ver-2 close-button styles so they match the older modal class.

• Decouple the close button from .piano-id-modal-ver-2 by writing a single close-icon rule that does not depend on the version class — for example, target .tp-modal .tp-close directly.

Either approach gets you to one consistent appearance across all Identity Management modals.

7. Fixing display issues on the close button

If the close icon doesn't render correctly, the cause is usually unrelated site CSS being applied to all elements. Two mitigations:

• Exclude the close button from the bulk rule by adding :not(.tp-close) to your selector. For example:

css button:not(.tp-close) { /* your existing rules */ } 

• Override directly by editing the _close-button_ class inside the Piano ID Layout template's CSS and setting the desired height and width. As a last resort, you can add an inline style to the close button HTML on a specific page (for example, ), but this affects only that one instance.

8. Closing a custom form template — use

For Piano ID custom form templates (including ACP / cancellation reasons flows), the Skip / Close action must use the directive — the default in Piano ID custom form templates. Do not use ng-click="close()"; the checkoutClose event does not fire reliably for Identity Management templates, so the close-by-script approach can fail silently.

Working pattern:

<a actionSkip class="link"><t>Skip</t></a>

This both closes the template and keeps the button label translatable through .

9. Customizing input fields alongside buttons (My Account)

When you are restyling buttons in My Account, you often want input-field borders and spacing to match. The relevant selectors live in the Piano ID Profile component:

input[type="text"], input[type="password"], input[type="number"] {
  border: 2px solid #ee77ac;
}

.tp-form .control-group {
  margin-bottom: 30px;
}

Add these to your custom CSS file or to the Piano ID profile in My Account template's CSS. Load the rules after the default Piano styles so they override correctly.

Last updated: July 03, 2026