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.
Nitro supports updating the variables in the base stylesheet to align with brand standards. However, making additional changes beyond these standard variables could affect ADA compliance and cause issues as new features are released. Any customizations outside the standard stylesheet variables are done at your own risk and will not be supported.
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.
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.
-
Use the Preview list to view the theme in an Impact or Recognitions block.
-
Click Save.
Stylesheet Best Practices
-
Only add necessary overrides to the stylesheet. Remove elements you're not changing to keep the stylesheet easier to read and process.
-
Keep the color format consistent. Nitro supports RGB, HSL, and HEX values. We recommend using the same format throughout.
-
Use comments to separate declarations. When updating the stylesheet, comments help isolate the areas changed so anyone can review and update.
-
Maintain ADA compliance. Impact meets WCAG 2.0 standards in its default configuration. If you make changes and are concerned with maintaining ADA compliance, run a contrast checker tool once your changes are in place.
Common Style Overrides
To override a variable, find the property you want to update and change the value to your custom setting. All variable overrides must be inside the root. Show me an example
The following are elements you may want to change to support your brand. 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.
|
Block |
Element to Change |
Property |
|---|---|---|
|
Nitro Impact |
The color of the call-to-action buttons in mission tiles (Get Started, Continue, View, etc.) and the circles highlighting positions 1-3 in leaderboard. |
--bb-color-brand-primary: |
|
The color of the award account balance background and secondary button’s background. |
--bb-color-brand-secondary: |
|
|
The background color of Impact. By default, this is light gray. |
--bb-color-brand-background: |
|
|
The color of the award account balance background. |
--bb-award-account-balance-bg-color: |
|
|
The color of the graph in the At a Glance section. |
--bb-at-a-glance-point-graph-earned: |
|
|
Recognitions
|
The color of the "Send a recognition" button. |
--bb-color-active-light: |
|
The color of the active tab, active tab text, and "Send a recognition" button border. |
--bb-color-active: |
|
|
The color of the inactive tab and text hover. |
--bb-color-active-hover: |
|
|
The color of the reward pill. |
--bb-color-reward-light: |
|
|
The color of the secondary reward pill. |
--bb-color-xlight: |
Custom Fonts
When styling blocks, Nitro supports default fonts, Adobe and Google fonts, and custom fonts that are externally hosted in a location Nitro can access. Code is added to the theme's stylesheet to render the selected font.
Show me how to use a default font
Show me how to use a Google font
Show me how to use an Adobe font
Show me how to use a custom font
See also