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 field 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 as in the example below.
Each class name will be added to the same div
Adding CSS to Your Shogun Page
You can also add style tags directly to your Shogun page using the HTML element, like this:
<style>
.column-img {
attribute: value;
}
</style>
Tip: You can create a Snippet of frequently used CSS customizations to quickly re-use them on other pages.
*How to verify that you are targeting the correct elements:
When adding your CSS, remember to target the correct element you want to style. You can verify what element to target using your browser's built-in developer tools.
In this example, we would like to target the image within the column to set a top & bottom right border radius (example using Google Chrome Browser).
Right-click inside your browser window and select
"Inspect"
Click inside the
Elementstabs of the Developer tools andcommand ⌘ + Fon MacOS &ctrl + Fon Windows to open thefindfeature, then search for the classname you added in the editor to verify the element you'd like to target.
Your CSS code should now look like this:
<style>
.column-img img{
border-radius: 0px 30px 30px 0px;
}
</style>
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:
.column-img img{
border-radius: 0px 30px 30px 0px;
}
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.