Best practices for using CSS with your Shogun elements
If you already have some CSS classes in your site's theme, you can use them in the CSS class field to apply those styles to Shogun elements. Once an element is selected, this can be found at the bottom of the Styles tab.
Just enter the class name as it would appear in the HTML, e.g., btn-large . You don't need to include a leading dot in this field.
Note: Custom classes are applied to the div containing your Shogun element. This allows for individual components within the element to be targeted using a variety of selectors.
You can even add multiple CSS class names into this field! Just make sure to leave a space between the class names!
Adding CSS into Your Shogun Page
You can also add style tags directly into your Shogun page using in the HTML element, like this:
<style>
.custom-class-name {
attribute: value;
}
</style>
Tip: You can create a Snippet of frequently used CSS customizations to quickly re-use them on other pages.
Adding CSS into Your Theme
If you want to repurpose the CSS across multiple pages & elements, we recommend adding the CSS to the bottom of your theme's main stylesheet. The <style></style> HTML tags are not needed when adding to your theme's CSS file. For example:
.custom-class-name {
attribute: value;
}
Please note: Shogun's support team are unable to offer assistance with custom CSS.