Styles
Use Styles to control the visual appearance of the Hosted Pages login box and keep branding consistent across Auth, Profile, and Workflow pages. You create multiple style sets, mark one as Default, and use CSS variables to align surrounding page elements.
Style Sets
- Create one or more style sets in the Admin Console
- Mark a single style set as Default for the template
- Duplicate and adjust style sets to test variations quickly
Properties
Most properties style the login box; Page Background can style the entire page.
- Card: background, text color, border radius, width, padding
- Buttons: primary background, text color, border radius
- Inputs: background, border color, text color, radius
- Social: button style and icon appearance
- Footer: text and link colors
- Page Background: overall page background color
CSS Variables
Use style‑generated CSS variables to keep page elements consistent with the login box.
| Category | Property | CSS Variable | Example Value |
|---|---|---|---|
| Logo | Show Logo | --sdk-show-logo | "true" |
| Logo | Logo URL | --sdk-logo-url | "https://example.com/logo.png" |
| Background | Background Color | --page-background | "#f0f0f0" |
| Typography | Font Family | --sdk-font-family | "Arial, sans-serif" |
| Typography | Text Alignment | --sdk-text-align | "center" |
| Typography | Header Font Size | --sdk-header-font-size | "24px" |
| Typography | Header Font Weight | --sdk-header-font-weight | 700 |
| Typography | Subheader Font Size | --sdk-subheader-font-size | "18px" |
| Typography | Subheader Font Weight | --sdk-subheader-font-weight | 500 |
| Card | Hover Color | --sdk-brand-primary-color | "#007bff" |
| Card | Primary Text Color | --sdk-card-text-color | "#333" |
| Card | Secondary Text Color | --sdk-card-subtext-color | "#666" |
| Card | Background Color | --sdk-card-bg-color | "#ffffff" |
| Card | Width | --sdk-card-width | "400px" |
| Card | Padding Top | --sdk-card-padding-top | "20px" |
| Card | Padding Right | --sdk-card-padding-right | "20px" |
| Card | Padding Bottom | --sdk-card-padding-bottom | "20px" |
| Card | Padding Left | --sdk-card-padding-left | "20px" |
| Card | Box Shadow | --sdk-card-box-shadow | "0 2px 4px rgba(0,0,0,0.1)" |
| Card | Border Radius Top Left | --sdk-card-border-radius-top-left | "8px" |
| Card | Border Radius Top Right | --sdk-card-border-radius-top-right | "8px" |
| Card | Border Radius Bottom Left | --sdk-card-border-radius-bottom-left | "8px" |
| Card | Border Radius Bottom Right | --sdk-card-border-radius-bottom-right | "8px" |
| Card | Border Width Top | --sdk-card-border-top-width | "1px" |
| Card | Border Width Right | --sdk-card-border-right-width | "1px" |
| Card | Border Width Bottom | --sdk-card-border-bottom-width | "1px" |
| Card | Border Width Left | --sdk-card-border-left-width | "1px" |
| Card | Border Color | --sdk-card-border-color | "#ccc" |
| Primary Button | Background Color | --sdk-button-primary-bg-color | "#007bff" |
| Primary Button | Text Color | --sdk-button-primary-text-color | "#ffffff" |
| Primary Button | Border Color | --sdk-button-primary-border-color | "#0056b3" |
| Primary Button | Border Radius | --sdk-button-primary-radius | "4px" |
| Primary Button | Box Shadow | --sdk-button-primary-shadow | "0 1px 3px rgba(0,0,0,0.2)" |
| Secondary Button | Background Color | --sdk-button-secondary-bg-color | "#6c757d" |
| Secondary Button | Text Color | --sdk-button-secondary-text-color | "#ffffff" |
| Secondary Button | Border Color | --sdk-button-secondary-border-color | "#545b62" |
| Secondary Button | Border Radius | --sdk-button-secondary-radius | "4px" |
| Secondary Button | Box Shadow | --sdk-button-secondary-shadow | "0 1px 3px rgba(0,0,0,0.2)" |
| Input Fields | Background Color | --sdk-input-bg-color | "#ffffff" |
| Input Fields | Text Color | --sdk-input-text-color | "#333" |
| Input Fields | Border Color | --sdk-input-border-color | "#ccc" |
| Links | Text Color | --sdk-link-text-color | "#007bff" |
| Links | Font Weight | --sdk-link-font-weight | 500 |
| Social | Layout | --sdk-social-layout | "horizontal" |
| Social | Border Color | --sdk-social-border-color | "#ccc" |
| Social | Text Color | --sdk-social-text-color | "#333" |
| Social | Background Color | --sdk-social-bg-color | "#ffffff" |
| Social | Border Radius | --sdk-social-border-radius | "4px" |
| Social | Box Shadow | --sdk-social-box-shadow | "0 1px 3px rgba(0,0,0,0.1)" |
| Social | Show Icon Only | --sdk-social-icon-only | "true" |
| Footer | Background Color | --sdk-footer-bg-color | "#f8f9fa" |
| Footer | Text Color | --sdk-footer-text-color | "#333" |
| Footer | Border Top | --sdk-footer-border-top | "1px solid #ccc" |
| Additional | Brand Primary Ring Color | --sdk-brand-primary-ring-color | "#007bff" |
| Additional | Favicon URL | --sdk-favicon-url | "https://example.com/favicon.ico" |
Example (surrounding HTML):
<div style="background-color: var(--page-background);">
<h1 style="color: var(--sdk-card-text-color);">Welcome</h1>
<div id="auth-container"></div>
</div>
Example (CustomCSS targeting the login box):
.loginradius-button-container button {
background-color: var(--sdk-button-primary-bg-color);
color: var(--sdk-button-primary-text-color);
border-radius: var(--sdk-button-primary-radius);
}
Best Practices
- Keep one strong Default style; use duplicates for experiments
- Favor variables over hard‑coded values for maintainability
- Validate contrast and readability across desktop and mobile
- Preview changes in the editor before publishing