Oxygen's visual interface provides controls for many CSS properties, but sometimes you may want to add additional, custom CSS that can't be created with Oxygen's visual controls. There are several ways you may add this custom CSS to your site.
If you're unfamiliar with CSS, please see the following resources:
- CSS Basics (Mozilla Developer Network)
- Finding CSS Declarations that work for all browsers (CanIUse)
Please Note: At this time, Oxygen does not have built-in support for any CSS preprocessors (LESS, SASS, SCSS, etc.)
Adding CSS Properties to an Element or Class
When editing an element or class, you may specify any additional CSS properties that Oxygen doesn't provide visual controls for. Click Advanced > Custom CSS and add the CSS properties you need.
Please Note: When you use this approach, you are already inside the CSS selector, and you can only add property declarations. If you want to target multiple selectors or use media queries, you should use one of the other methods mentioned on this page.
What's the difference between a CSS selector and a CSS declaration?
Adding Custom CSS to a Page or Template
You can add CSS to a page or template in Oxygen using the Code Block element. This element can be added via +Add > Basic > Code Block in Oxygen's Visual Editor.
After the Code Block element is added to the Editor, select the CSS tab from the Properties Pane and add CSS, just like a normal CSS Stylesheet.
Adding CSS to a Code Block element instead of a Stylesheet means the CSS will only run on the page the Code Block is on. However, if you add the CSS to a template, any page or template which inherits that template will use the CSS.
Adding CSS to the entire site using a Stylesheet
Oxygen also allows you to add CSS Stylesheets that will be added to every page of your site. This may be done by going to Stylesheets while in Oxygen's Visual Editor or going to Oxygen > Stylesheets in the WordPress admin panel.
Editing Stylesheets in Oxygen's Visual Editor
Oxygen's Visual Editor allows you to manage Stylesheets and Folders. This is done by clicking on the Stylesheets button in Oxygen.
This opens the Stylesheets Pane, which allows you to add Stylesheets and Folders. You may also use the menus on each Stylesheet/Folder for additional settings such as deleting them, opening them up or disabling them.
When a Stylesheet is opened, you'll see the Stylesheet in the Left Sidebar, and you may modify it as needed.
If you have enabled the "Lock Sheets" setting via Oxygen's Stylesheets Editor (see below), you will see the Stylesheets Pane has been disabled. You will be unable to edit stylesheets in Oxygen until that has been disabled.
Editing Stylesheets in the WordPress Admin Panel
In Oxygen 4.4, you can use the Stylesheets Editor in the WordPress admin panel via Oxygen > Stylesheets.
This feature allows you to manage and edit stylesheets without needing to open Oxygen. You can add, save, and delete Stylesheets in Oxygen. The Stylesheets Editor also introduces several settings:
- Hot Reload: When this option is activated, if you open the front end of your site on another tab and save a stylesheet in the Stylesheets Editor, the page will refresh automatically on that tab with your changes. This setting will not refresh the front end if a user saves a design in Oxygen and will not refresh Oxygen's Visual Editor if another user has Oxygen open.
- Lock Sheets in Oxygen: This option locks Stylesheets from being edited in Oxygen so that one user can work in the Stylesheets screen while another user is editing in Oxygen.
- Full Screen: Allows you to open the CSS editor in fullscreen mode.
How to Find CSS Selectors
When working with custom CSS, you'll want to find the right selectors to target when modifying the CSS. Some easy ways to do this are:
- Use the ID or the Class of an element that you've added to Oxygen
- Finding Classes or IDs in the documentation of other plugins you are using
- Use your Browser's Developer Tools to find the appropriate selector.
Collaborative Design Using ‘Lock Sheets in Oxygen’
Oxygen 4.4 introduces a partial level of collaboration for multiple users with the “Lock Sheets in Oxygen” setting in the Stylesheets Editor. After that setting is enabled, if you reload Oxygen, you’ll no longer be able to edit Stylesheets in Oxygen.
This feature allows one user to create content in Oxygen while another user can add CSS to the site with the Stylesheets Editor in the WordPress Admin area without needing to worry about overwriting the other user’s changes. However, this setting only applies to Stylesheets at this time.
