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 sidebar once you expand the Custom CSS item.

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.

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 to Your Shogun Page

You can also add style tags directly to your Shogun page using 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 to 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;    
}

FAQ

I'm stuck, who do I turn to for help?

Shogun makes no promises that we will be able to resolve issues faced when designing with custom code, but we would be happy to take a look at the use case and advise, troubleshoot, or redirect to third parties as appropriate.

You can reach out to us via email, in-app via the contact form, or chat feature if you are subscribed under a live chat-eligible plan.