How to set styles in Oxygen 2 for WordPress - four different ways

1 January 2019

The Oxygen 2 site builder for WordPress provides a plethora of ways to set styles. This means flexibility and power but also some potential for confusion! Here is my attempt to document the different approaches as well as my own personal method of working - which may continue to evolve.

1. Element properties in the visual editor

Select any element within a template and you will be able to set all manner of properties in the 'Primary' and 'Advanced' tabs, from fonts to margins. These settings will apply just to that individual element.

Adding top margin to heading

Here I have just added a top margin to a heading via the 'Size & Spacing' menu under the Advanced tab

Remember though that, depending on the template, that single element might appear on any number of pages. And if it is a reusable part, it might even appear in multiple templates.

2. 'Custom CSS' for individual element

Again with an element selected in the visual editor, Oxygen provides a 'Custom CSS' option (you'll find this under the 'Advanced' tab). Any CSS added here will apply only to that element and takes precedence over element properties set in the visual editor (assuming the specificity is the same). Note that the CSS will not take effect in the editor until you click the 'Apply Code' button at the bottom of the panel.

Custom CSS

This element currently has no Custom CSS but it is easy to see the ID

Incidentally, looking in the 'Custom CSS' panel is a very useful way of quickly checking the ID of any given element, as it is always given at the top.

3. Custom stylesheet

It's also possible to create an entire custom stylesheet of your own. In the visual editor, click on the 'Manage' menu, then 'Stylesheets', then 'Add Stylesheet'. Any CSS added here will apply to all templates, so can be used to style multiple elements - depending on the selector. It will also take precedence over the two approaches outlined above (assuming the same specificity).

Stylesheets in Oxygen

Here I have added one stylesheet, 'jd-custom'. I can add more if I wish

In a way, editing your CSS here is much more like the standard WordPress approach of editing stylesheets via Appearance > Editor, however it comes with a major advantage. Any changes you make will appear in real time in the Oxygen visual editor, with no need to save and refresh. (Yes, I know WordPress now has a real-time CSS editor too, but this is just for additional CSS so is not useful for making major stylesheet edits.)

4. Global Styles

Within the 'Manage' menu you will also find the option to set Global Styles, for example the font size and font weight for <h1> elements across the entire site.

Global Styles H1

Setting the font size, font weight and color for the <h1> element via Global Styles

Options here include global colors, fonts, link styles, page widths and so on. Again these can be overwritten with a custom stylesheet (approach 3 above).

My personal way of working

Personally I've fallen into the pattern of using element properties for setting the styles of individual elements, and using a custom stylesheet for abything else including setting global styles. On the rare occasions where I have needed to write custom CSS for individual elements, I have included it in my stylesheet too (rather than using the 'Custom CSS' option under the Advanced tab). This gives me two places to look rather than four - and I am too used to editing a stylesheet directly to change my ways now.

However I suspect that a user with no CSS knowledge would be able to get quite far using just element properties and the 'Global Styles' menu.

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © James Clark
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram