Styling Blocks

Blocks can be easily styled using a theme. Together with our imagery and character recommendations, a theme helps you create a personalized user experience. Our base theme is built with CSS variables, which you can modify to align with your brand guidelines. Variables ensure reusability, consistency, and simplified maintenance within the theme.

Nitro supports updating the variables in the base stylesheet to align with brand standards. However, making additional changes beyond the 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.

1. Open Nitro Studio > Integrate > Themes.

2. Click New, or click an existing theme to edit.

3. Click Edit () and enter a theme name.

4. Upload or link to your custom CSS file. If a stylesheet is stored in an external location, Nitro must have access to that location. Show me the supported characters for a CSS file name

5. 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.

6. Use the Preview list to view the theme in an Impact or Recognitions block.

7. Click Save.

Note: If you're testing a theme by uploading the same stylesheet multiple times and your changes aren't reflected in the theme preview, try changing the name of the CSS file and uploading again.

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.

• 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.

• Keep the color format consistent. Nitro supports RGB, HSL, and HEX values. We recommend using the same format throughout. Show me

• Use comments to separate declarations. When updating the stylesheet, comments help isolate the areas changed so anyone can review and update. Show me

• Ensure your declarations are properly closed and you did not omit a semi-colon. Show me

• Ensure you properly replace the value with your custom override. Show me

• Ensure your declarations are inside the :root {}. The exception to this is the @embed code for custom fonts which is outside the root. Show me

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. 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.

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

Default fonts, such as Arial or Times New Roman, are widely supported and installed on all computers. These steps use Times New Roman as an example.

1. Get the information for the font you want to use.

2. Add the font to the stylesheet within the root using the --bb-font-family variable.

   Variable	Value
   --bb-font-family:	"Times New Roman", serif;

Show me how to use a Google font

These steps use Poppins as an example.

1. Get the @import embed code for the font you want to use.

2. Add the embed code to the top of the stylesheet before the root. Only add the @import information. Do not add the <style> tags.

3. Add the font to the stylesheet within the root using the --bb-font-family variable.

   Variable	Value
   --bb-font-family:	"Poppins", serif;

Show me how to use an Adobe font

These steps use Komet as an example.

1. Get the @import embed code for the font you want to use.

2. Add the embed code to the top of the stylesheet before the root. Only add the @import information. Do not add the <style> tags.

3. Add the font to the stylesheet within the root using the --bb-font-family variable.

   Variable	Value
   --bb-font-family:	"komet", sans-serif;

Show me how to use a custom font

The following are general configuration steps to use a proprietary/custom font. Setup may differ depending on server settings, privacy policies, and so on.

1. Upload your custom font to an htdocs folder on your server.

2. Configure the server's CORS policy (Cross-Origin Resource Sharing) through the .htaccess file to allow Nitro access to the font. Show me

The following are provided as examples. You will need to determine how you want to allow access based on server policies, etc.

3. Add @font-face to the top of the stylesheet before the root. Each font or font style/weight must be referenced individually. Show me an example

4. Add the font to the stylesheet within the root using the --bb-font-family variable. Show me

   Variable	Value	Fallback Type and Use
   --bb-font-family:	"customFont", sans-serif;	Sans-serif fallback: Will try to load the custom font. If the custom font is not available, it will load the default sans-serif font from the user's computer.
   --bb-font-family:	"customFont", serif;	Serif fallback: Will try to load the custom font. If the custom font is not available, it will load the default serif font from the user's computer.
   --bb-font-family:	"customFont", Arial, Helvetica, sans-serif;	Multi-font fallback: Will try to load the custom font, then Arial, then Helvetica. If the first three are not available, it will load the default sans-serif font from the user's computer.

5. If the font is not displaying as expected, verify the following:

   • Confirm the https path is correct. If you enter the URL of the font into a browser, you should be able to download the font.

   • Check the console log for errors. If the CORS policy is not properly configured, you will see an error. You can also test a CORS policy using tools such as Codepen.

   • Confirm that the name you chose for the font matches the name you used in the --bb-font-family variable.

   • Confirm there are no spaces or special characters in the font-family name.

Example Themes

The following examples change the font, the buttons in Impact and recognitions from blue to red, and the mission tile gradient to grays.

Show me an example using a Google font

@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');

:root {
/* ## Global Customer Overrides */

    /* Brand Color Overrides */
    --bb-color-brand-primary:               #EC111D;
    --bb-color-brand-secondary:             #100102;
    --bb-brand-gradient-stop-001:           #e6e7e8;
    --bb-brand-gradient-stop-002:           #e6e7e8;
    --bb-brand-gradient-stop-003:           #b24b51;
    --bb-brand-gradient-backstop:           #8b7274;

    /* Font Style Overrides  */
    --bb-font-family:                       "Saira", sans-serif;

    /* Award Account Details */
    --bb-award-account-balance-bg-color:    #bec1c3;

    /* At a Glance Details */
    --bb-at-a-glance-point-graph-earned:    #EC111D;

/*Recognitions Block Styles */
 
 /* colors */
  --bb-color-active-light: #EC111D; /*The "Send a recognition" button color */
  --bb-color-active: #EC111D; /*The active tab, active tab text, and button border color */ 
  --bb-color-active-hover: #f56f76; /*The inactive tab and text hover color */  

} /* END  THEME CSS VARIABLES*/

Show me an example using a custom font with one weight

@font-face{
    font-family:'CustomFont';
    src: url('https://demo.com/fonts/CustomFont.woff2') format('woff2')
         url('https://demo.com/fonts/CustomFont.woff') format('woff'),
         url('https://demo.com/fonts/CustomFont.ttf') format('truetype'),
         url('https://demo.com/fonts/CustomFont.eot?#iefix') format('embedded-opentype')
         url('https://demo.com/fonts/CustomFont.svg#CustomFont') format('svg')
    font-weight:normal;
    font-style:normal;
    font-display:swap;
    }

:root {
/* ## Global Customer Overrides */

    /* Brand Color Overrides */
    --bb-color-brand-primary:               #EC111D;
    --bb-color-brand-secondary:             #100102;
    --bb-brand-gradient-stop-001:           #e6e7e8;
    --bb-brand-gradient-stop-002:           #e6e7e8;
    --bb-brand-gradient-stop-003:           #b24b51;
    --bb-brand-gradient-backstop:           #8b7274;

    /* Font Style Overrides  */
    --bb-font-family:                       "CustomFont", sans-serif;

    /* Award Account Details */
    --bb-award-account-balance-bg-color:    #bec1c3;

    /* At a Glance Details */
    --bb-at-a-glance-point-graph-earned:    #EC111D;

/*Recognitions Block Styles */
 
 /* colors */
  --bb-color-active-light: #EC111D; /*The "Send a recognition" button color */
  --bb-color-active: #EC111D; /*The active tab, active tab text, and button border color */ 
  --bb-color-active-hover: #f56f76; /*The inactive tab and text hover color */  

} /* END  THEME CSS VARIABLES*/

Show me an example using a custom font with multiple weights

@font-face{
    font-family:'CustomFont';
    src: url('https://demo.com/fonts/CustomFont.woff2') format('woff2')
         url('https://demo.com/fonts/CustomFont.woff') format('woff'),
         url('https://demo.com/fonts/CustomFont.ttf') format('truetype'),
         url('https://demo.com/fonts/CustomFont.eot?#iefix') format('embedded-opentype')
         url('https://demo.com/fonts/CustomFont.svg#CustomFont') format('svg')
             font-weight:normal;
             font-style:normal;
             font-display:swap;
    }  
@font-face{
    font-family:'CustomFont';
    src: url('https://demo.com/fonts/CustomFontBold.woff2') format('woff2')
         url('https://demo.com/fonts/CustomFontBold.woff') format('woff'),
         url('https://demo.com/fonts/CustomFontBold.ttf') format('truetype'),
         url('https://demo.com/fonts/CustomFontBold.eot?#iefix') format('embedded-opentype')
         url('https://demo.com/fonts/CustomFontBold.svg#CustomFont') format('svg')
             font-weight:700;
             font-style:normal;
             font-display:swap;
    }  
    
:root {
/* ## Global Customer Overrides */

    /* Brand Color Overrides */
    --bb-color-brand-primary:               #EC111D;
    --bb-color-brand-secondary:             #100102;
    --bb-brand-gradient-stop-001:           #e6e7e8;
    --bb-brand-gradient-stop-002:           #e6e7e8;
    --bb-brand-gradient-stop-003:           #b24b51;
    --bb-brand-gradient-backstop:           #8b7274;

    /* Font Style Overrides  */
    --bb-font-family:                       "CustomFont", sans-serif;

    /* Award Account Details */
    --bb-award-account-balance-bg-color:    #bec1c3;

    /* At a Glance Details */
    --bb-at-a-glance-point-graph-earned:    #EC111D;

/*Recognitions Block Styles */
 
 /* colors */
  --bb-color-active-light: #EC111D; /*The "Send a recognition" button color */
  --bb-color-active: #EC111D; /*The active tab, active tab text, and button border color */ 
  --bb-color-active-hover: #f56f76; /*The inactive tab and text hover color */  

} /* END  THEME CSS VARIABLES*/

See also

Embed a block

Blocks