Getting a consistent look and feel for your site is essential to creating your brand.

Global styles are currently created on an element basis. Each element can have a library of global styles created so you can choose to apply the styles are you wish.

How to create a Global Style

Creating a global style within Shogun is super easy. To get started, go ahead and create the element to have the look that you would like. Once you have a style that you want to save, you'll notice a new field on the top of the element settings - global styles! Navigate to this new area and click save new style to create your first style.

How to apply a Global Style

Applying a global style to your elements is just as easy as creating a new style! Simply navigate to the global styles dropdown to select a style. Please note: this dropdown will only show styles that have been created for the element. For example, styles created on the Heading element will only be available on other Heading elements.

Setting a default Global Style for an element

Global Styles can be set as the default style for elements. This means that any element added to Shogun pages going forward will make use of this style. Note: only one default style can be added to each element, meaning you can have one default style for Heading elements, one default style for Button elements etc.

What does a Global Style save?

Global Styles will save the options that you have selected in the Styles tab of your element as well as some styling options available in the Controls tab. For example, this will not save the URL of a Button element - using Snippets would be a better option if you wish to do this.

Can I modify a global style?

Absolutely! If you have an element that is attached to a global style, any edits to the style will appear on the global styles option. An edited style will have the edited tag applied to it, simply open up the dropdown and hit update style.

Once this has been updated, all pages that use this style will become outdated and will be required to be republished for the changes to the styles of the page.

More information on the 'outdated' status can be found here: Page Statuses

Can I modify an element without updating the style?

Yes! Head back up to the Global Styles dropdown and hit detach styles to keep the current styles, but allow you to make edits to the element that you are working on. This means that any updates to the styles of the element will not trigger an edited tag.

Did this answer your question?