Style guide

Welcome

In this module, you will explore a Style Guide that enables quick updates for all styles, colors, and components in one place.

After completing this module, you should be able to:

• Describe the role of site colors.
• State the application of site typography for text styles.
• Identify the components group.

What is it/ Why use it?

The Style Guide, which allows you to make site-wide styling changes through configurations and revert to the blueprint's default when needed. This feature is protected by permissions and can be provided to users by the website administrator.

What can you change?

Once Spire is launched, you can fine-tune your website’s appearance using the Style Guide, which provides easy-to-use configurations—eliminating the need for code changes. The Style Guide organizes your site’s customizable styles into three key sections: Site Colors, Site Typography, and Site Configurations.

• Site Colors: This section controls your website's color scheme. Most colors include a Contrast option, ensuring text and icons remain visible against background colors. If accessibility is a priority, use the contrast checker to verify that your color choices meet accessibility standards.

• Site Typography: This defines text styles, including font color, weight, size, line height, and text transformations (like uppercase or lowercase). You can override default text styles using the Rich Text Editor, which also displays the Style Guide’s predefined styles. For example, if your default body text is black, you can modify it within the Rich Text Editor.

• Site Configurations: These settings control functional elements of your Configured Commerce frontend. The Style Guide groups related options to maintain consistency. For instance, Form Field Options manage text entry fields, drop-downs, and text areas, while Field Set Options apply to grouped elements like radio buttons or checkboxes.

With these tools, you can easily customize your site’s design while ensuring consistency and accessibility.

How are styles applied on my website?

The CMS Style Guide works using the theming principles of the Mobius component library. That means it globally applies changes you make to the related Mobius components. If your Configured Commerce website contains widgets or components that are styled outside of the Mobius theme, either because they are receiving widget-specific styles, or because they were built with components that are not from Mobius, changes made in the Style guide will not apply to these elements. For example, let's say your partner has implemented a custom promotional banner on your site. If the banner was implemented specifically with a rounded green button, changing the button shape or color in the CMS Style guide will not impact the button in the promotional banner.

Changes may also not apply if your partner has included a post-styleguide theme in your site, as the post-styleguide theme overrides the values you may input in the CMS Style Guide. Let's say your partner has implemented custom styles that apply to your buttons to animate a subtle hover effect. If you choose a hover effect on your button in the CMS Style Guide, you will not see this change take effect on the site or in the CMS Style Guide stage.

Undo or redo changes in the CMS Style Guide

While updating the CMS Style guide, you can undo your changes at any time by clicking the Back arrow in the header of the CMS Style Options. You can continue to undo changes back to the first change you made during your current session. You can also use the Forward arrow to redo a change that you have previously undone.

When you click Save, it publishes the changes and also resets the undo/redo actions. Once you have saved, you cannot step back through the changes you’ve made.

At any time, you can click Reset Styles to Default, which will return all styles in the tree to the values in the default theme provided by Mobius or a pre-styleguide theme if your partner has included one in your site. You can undo this selection prior to saving if you would like to revert to the customizations you’ve made.

Update styles using the CMS style guide

Read the article below to learn how to update styles using the CMS Style Guide in Configured Commerce.

Apply blueprints

In Spire, a theme is called a blueprint. Blueprints set the look and feel of your site. They are typically maintained and updated using developer tools, like Visual Studio. Optimizely strongly recommends you work with your partner if you have questions about or changes to your site's blueprint. See the articles under Blueprints and Spire for more details.

After that read the article below to learn how to create new blueprints in Spire in Configured Commerce.

Try it

It’s time to play in the Configured Commerce sandbox!

The following practice exercises take place in the Knowledge & Learning training site. Before jumping in, please log in to the Training site using the following credentials:

• Username: TrainingUser
• Password: Opticon1!#

After logging in, do the following:

1. Update website styles
2. Create new blueprints in Spire

Wrap up

Congratulations! You have completed the Style Guide module. You should now be able to:

• Describe the role of site colors.
• State the application of site typography for text styles.
• Identify the components group.

Learn more

While we covered a lot, there's always more to learn about the Spire CMS and how to work with it! Remember to access resources about the Spire CMS for more information: