Styling Blocks
You can use the standard out-of-the-box styling for blocks or create a theme that matches your brand guidelines.
Blocks are styled separately from web components as they have different CSS rules and structures. A block's stylesheet can be uploaded to Nitro Studio or stored in an external location that Nitro can access.
Create a Theme
When you activate a theme in the theme builder, all embedded blocks will automatically update their styles to match that theme. If you do not have an active theme, blocks will use the default out-of-the-box styles.
-
Open Nitro Studio > Integrate > Themes.
-
Click New, or click an existing theme to edit.
-
Click Edit (
) and enter a theme name. -
Upload or link to your custom CSS file. Show me the supported characters for a CSS file name
-
Use the Activate Theme toggle to set the theme as the active theme for all blocks.
-
Use the Preview list to view the theme in an Impact or Recognitions block.
-
Click Save.
Only one theme can be set as the active theme. If you delete or deactivate the active theme, all blocks will revert to the default styles.
Common Style Overrides
The following stylesheet contains the common elements you may want to change to match your brand colors. Variables are used to provide consistency and some colors are derived from the variable color.
Additional overrides are available if you need to create a more robust custom theme. Your account team can provide the full stylesheet.
When creating a custom theme, consider that:
-
Some changes may not retain ADA compliance. You must run your own accessibility tests if you implement a custom theme and need to be ADA complaint.
-
Adding a custom font may cause truncation or spacing issues if you have a typeface that uses more horizontal space.
-
Custom fonts must be externally hosted in a location Nitro can access. Show me an example
:root {
/**
* # Customizable Theme CSS Variables
* The `--bb-` variables must be used by name in an element's CSS rule
* for a theme CSS override to apply
*/
/* ## Impact Global Overrides */
/* Brand Color Overrides */
--bb-color-brand-primary: var(--default-color-brand-primary);
--bb-color-brand-secondary: var(--default-color-brand-secondary);
--bb-color-brand-tertiary: var(--default-color-brand-tertiary);
--bb-brand-gradient-stop-001: var(--bb-color-brand-primary);
--bb-brand-gradient-stop-002: var(--bb-color-brand-secondary);
--bb-brand-gradient-stop-003: var(--bb-color-brand-tertiary);
--bb-brand-gradient-backstop: var(--bb-color-brand-primary);
--bb-brand-gradient-text-color: var(--bb-color-text-dark);
/* Text Color Overrides */
--bb-color-text-extra-light: var(--default-color-text-extra-light);
--bb-color-text-medium: var(--default-color-text-medium);
--bb-color-text-dark: var(--default-color-text-dark);
--bb-color-text-extra-dark: var(--default-color-text-extra-dark);
/* Font Style Overrides */
--bb-font-family: var(--default-font-family);
--bb-font-size: var(--default-font-size);
/* ## Targeted Overrides */
/* Button Details */
--bb-primary-button-bg-color: var(--bb-color-brand-primary);
--bb-primary-button-text-color: var(--bb-color-text-extra-light);
--bb-secondary-button-bg-color: var(--bb-color-brand-secondary);
--bb-secondary-button-text-color: var(--bb-color-text-dark);
/* Award Account Details */
--bb-award-account-balance-bg-color: var(--bb-color-brand-secondary);
--bb-award-account-balance-cat-text-color: var(--bb-color-text-dark);
--bb-award-account-balance-amnt-text-color: var(--bb-color-text-extra-dark);
--bb-award-account-redeem-bg-color: var(--bb-component-bg-dark);
--bb-award-account-redeem-text-color: var(--bb-color-text-extra-light);
--bb-award-accoun-claim-bg-color: var(--bb-component-bg-dark);
--bb-award-accoun-claim-text-color: var(--bb-color-text-extra-light);
/* At a Glance Details */
--bb-at-a-glance-point-graph-earned: var(--bb-color-alert-success);
/* Leaderboard Details */
--bb-leaderboard-number-bg-color: var(--bb-color-brand-primary);
--bb-leaderboard-number-text-color: var(--bb-color-text-extra-light);
--bb-leaderboard-avatar-bg-color: var(--default-color-text-extra-dark);
--bb-leaderboard-avatar-text-color: var(--bb-color-text-extra-light);
/*Change At a Glance and missions to show non-circular badges */
.m-glance_badges_image {border-radius:0}
.m-mission-details__reward-badge {border-radius:0}
/*Recognitions Block Styles */
/* colors */
--bb-color-active-light: rgba(12, 111, 253, 1); /*The "Send a recognition" button color */
--bb-color-active: rgba(12, 72, 163, 1); /*The active tab, active tab text, and button border color */
--bb-color-active-hover: rgba(141, 188, 223, 1); /*The inactive tab and text hover color */
--bb-color-reward-light:rgba(255, 246, 222, 1); /*The color of the reward pill */
--bb-color-xlight: rgba(245, 245, 245, 1); /*The color of the secondary reward pill */
/* text colors */
--bb-text-color-white: rgb(255,255,255); /*The color of user's initials in the icon */
.m-block {
background: white; /* The block background color */
}
/*override border to match background of the "Send a recognition" button*/
.m-button--action {
Border:1px solid var(--bb-color-active-light)
}
/*override border of input fields to not use active tab color*/
.m-form__label:has(input[type=checkbox]:checked,input[type=radio]:checked) {
border-color: var(--bb-text-color-dark);
};
/*Exchanges radio buttons color control, set to match typography */
input[type=radio] {
border: 2px solid var(--bb-text-color-dark);
}
input[type=radio]:checked {
background-color: var(--bb-text-color-dark);
}
input:read-only {
background-color: var(--_bb-bgcolor-primary);
}
.m-radio-group:has(input[type=checkbox]:checked,input[type=radio]:checked) {
border-color: var(--bb-text-color-dark);
};
} /* END THEME CSS VARIABLES*/
/*Change At a Glance and missions to show non-circular badges */
.m-glance__badges__image {border-radius: 0}
.m-mission__icon img {border-radius: 0}
.m-mission-details .m-mission-details__reward-badge {
border-radius: 0;
}See also