Supported Versions
The details shared here apply to the most recent version of Flex and Turbo. To keep your theme up to date, check out this helpful document.
Using the Custom CSS Feature
Within the Theme Editor (Customize), the Flex and Turbo themes include options to add your own Custom CSS in sections and components throughout your site which is a great way to tweak the section designs a little bit. If you are familiar and comfortable with CSS, you can add in your own to customize your site further!
You'll know that custom CSS is possible to add when you see this 'Advanced' area in the theme editor:
The CSS Class and Custom CSS fields will only apply to the element that the fields are found in. For example, if you add an 'Image with Text Overlay' section and use the CSS Class and Custom CSS found within the section settings, it will only apply to that specific section.
Please note: The Custom CSS field will only accept CSS. It does not accept SCSS/SASS or media queries and mixins.
How does the Custom CSS Feature work?
There are a few different ways that you can make use of the advanced CSS feature!
1. Create a brand new CSS Class, and add in Custom CSS
If you like, you can create your own CSS Class simply by entering it in the "CSS Class" field.
In the "Custom CSS" field, you can then write your CSS by adding in the class selector with declarations to apply the styles!
Example 1
In this example, a border was added around the entire Image with Text section, with some additional padding between the section content and the border:
CSS Class:
image-with-text-border
Custom CSS:
.image-with-text-border { border: 10px solid black; padding: 50px; }
2. Target and apply CSS to other elements/selectors in the section
If you like, you can forego the "CSS Class" field and just utilize the "Custom CSS" field to target other elements within the section and apply styles. For example, if you just wanted to change the color of the body text inside a section, you can target the <p>.
Example 1
In this example, only the body text in the Image with Text section is targeted in the "Custom CSS" field:
Custom CSS:
p {color: #006400; }
Example 2
In this example, the second image in the Image with Text section is being targeted in the 'Custom CSS' field to add a border and some padding. The 'CSS Class' field does not get used:
Custom CSS
.image-with-text__image-column:nth-child(2) {
border: 10px solid pink;
padding: 20px;
}
3. Borrowing custom styles from your styles.scss.liquid file
If you've created any custom styles in your styles.scss.liquid file (Themes > Edit Code > Assets), you can add in that class name to the "CSS Class" field and it will apply the styles to the section. You do not need to add anything in the "Custom CSS" field (unless you want to add more CSS!)
Example 1
In this example, a custom style has been added in the styles.scss.liquid file called light-gradient-background:
In the "CSS Class" field, this custom class name gets added in and the styles get applied to the section:
4. An easy way to hide sections on desktop/mobile
Check out our article about using the Custom CSS feature to hide sections on desktop/mobile.