- Section
- Troubleshooting – Icons missing from the blocks
- Spectra Patterns
- How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?
- Styling Checkbox / Radio / Acceptance control in Contact Form 7 Designer block of Spectra
- Unable to Style Checkbox / Radio Buttons / Acceptance Control using Contact Form 7 Styler of Spectra
- Tab Index – for multiple Gravity Forms
- How to Get Started with Spectra
- How to Exclude A Heading from Table of Contents?
- Spectra – Display Conditions for Blocks
- Installing and Importing Starter Templates
- How to Get Started with Spectra
- Manually Install Spectra via FTP
- Automatic Beta Updates for Spectra
- How to Rollback to Previous Spectra Versions
- How to Load Google Fonts Locally
- Activate the Spectra Pro License Key
- How to Install Spectra Pro Plugin
- Translate Spectra Strings using Loco Translate
- How to add a Transparent / Sticky header?
- How to Change the Site Logo?
- How to Change Global Styles?
- How to Disable Title on Posts, Pages?
- How to add a transparent/ sticky header for a single page/post?
- Change Header and Footer Patterns in Spectra One Theme
- Add Custom/Google Fonts In Spectra One
- How To Reset Global Default Styling?
- Manually Install Spectra One via FTP?
- Disable or Enable Header/Footer for Specific Pages/Posts
- How can I Change the Contents of the Sidebar?
- Templates and Template Parts in FSE
- How to create Custom Front Page in WordPress
- Frequently Asked Questions
- How to Hide and Show Block Elements?
- How to use Group Blocks or create Containers in Spectra One
- How to clear customizations in Spectra One theme
- What are the Actual Sizes of the Predefined Font Sizes?
- How to make changes to single pages like 404, Archive, Single
- How to change the post/page hero section?
- How to Install Spectra One Theme?
- How to Global Change the Width Using Layouts
- How to Use Sidebar for Page and Post
- What is a Stylebook in FSE?
- How to Change the Global Color Palette?
- Customizing Block Styles in Spectra One Theme
- Understanding Patterns and How to Modify Them in Spectra One Theme
- Changing Sidebar Position for Pages and Posts
- Understanding Duotone and Adding Dynamic Color to SVG
- Exploring Full Site Editing: Creating Websites Made Easy!
- Exploring the “Edit Template” Feature in the Admin Bar
- How to Change the Favicon in Spectra One
- Sticky Header in WooCommerce Based Template
- Integrating Google Analytics into Spectra One Theme
- How to Create a Child Theme for Spectra One
- How to Use WPML for Translating Spectra One Websites
- Accessing the Additional CSS Section in an FSE Theme
- Creating and Managing Templates for Custom Post Types in Spectra One
Accessing the Additional CSS Section in an FSE Theme
Spectra One is a Full Site Editing (FSE) theme, meaning you can customize your website’s appearance directly within the WordPress editor.
For Full Site Editing (FSE) theme, the process of adding custom CSS differs from traditional themes.
This guide will show you how to add custom CSS code to your Spectra One theme using the built-in Styles panel.
What is Custom CSS?
Custom CSS (Cascading Style Sheets) is a way to fine-tune the look and feel of your website beyond the theme’s built-in options. With CSS, you can change things like colors, fonts, and layouts.
Before diving into the steps, it’s helpful to have a basic understanding of CSS code. If you’re new to CSS, there are plenty of free online resources and tutorials available to get you started.
How Do You Add Custom CSS in an FSE Theme?
To add custom CSS to a block theme in the Spectra One theme using the Full Site Editor (FSE), you can follow these steps:
1. Access the Site Editor:
- Go to your WordPress dashboard.
- Navigate to “Appearance” and then select “Editor”.
2. Open the Styles Panel:
- In the Site Editor, click on the website preview to enable editing tools.
- Click on the Styles icon (represented by a half-shaded circle).
3. Add Custom CSS:
- Within the Styles panel, click on the three dots (ellipsis) icon next to the section title.
- Choose the “Additional CSS” option.
- Enter your custom CSS code in the provided text area.
4. Save Changes:
– Once you’ve added your CSS, make sure to save your changes by clicking the “Save” button.
Example:
If you want to change the background color of the header, you can add the following CSS:
header {
background-color: #ff0000;
}
You can watch the below attached video for a better understanding.
We hope this document has been helpful in guiding you through the process of adding custom CSS in the Spectra One theme.
If you have any questions or need further assistance, please leave a comment below. Your feedback helps us improve our documentation and support.
We don't respond to the article feedback, we use it to improve our support content.