Widget Style | Communifire Documentation

Your Communifire site comes with four widget styles that you can use throughout your site. The widget styles apply a font color and background color on a widget. The available colors are green, yellow, blue, and red. You can also create your own widget styles that match your company branding.

Apply a Widget Style

To apply a widget style, follow the steps below.

1. Click the gear icon > Page Builder.
2. For the Page Builder page, click the gear icon > Edit Page.
3. For the widget, click the gear icon > Edit Properties.
4. Click Advanced.
5. In Custom CSS class, enter one of the following names (or your custom widget style name). If there are other class names in the Custom CSS class field, separate the class names by a space.
   • axero-widget-callout-success - Green background
   • axero-widget-callout-warn - Yellow background
   • axero-widget-callout-info - Blue background
   • axero-widget-callout-error - Red background
6. Click Save Widget.
7. Click Publish changes.
8. Click Go to page.

How to Create Your Own Widget Style

You can create your own widget styles that match your company branding and add them to your site using CSS overrides.

1. You'll need two hex color codes: one for the background color and one for the text color. For a light background color, choose a dark text color, and vice versa.
2. Create a name for the style. The name must be one word without spaces. You can use dashes and underscores. (e.g. acme-inc-dark-green )
3. Go to Control Panel > System > CSS Overrides and add the following code, at the bottom.

   .acme-inc-dark-green {
       background-color: #214f27;
       color: #ffffff;
   }

4. Make the following changes to the code:
   • Replace acme-inc-dark-green with your style name.
   • Replace #214f27 with your background color hex code.
   • Replace #ffffff with your text color hex code.
5. Click Save CSS Overrides.

Once you save CSS overrides, the widget style is available for use. Follow the steps in the Apply a Widget Style section to apply your custom widget style on widgets.

Related

Design Resources 

The Design Resources page provides guides and resources for making common design changes, such as changing the site font, the background color, and more.