Editor Enhancer - The Best UI for Oxygen Builder
Customer Login
Post Date: September 19, 2021
Posted In:

How To Use Oxygen Global Colors in CSS

Learn how to use global colors inside of an Oxygen Builder stylesheet.

Want to skip the descriptions? Jump to the solution.

Global colors in Oxygen Builder enable us to keep our colors organized and apply them anywhere. To do so, first load the editor and go to Settings > Global Styles > Colors and select one of your color sets. (Note: If you’re using EE, it provides a keyboard shortcut to jump to this panel!) Now, you can modify and add colors. Be sure to use names that make sense to you.*

* EE has a setting you can enable called “Click Global Color to Rename” that will allow you to rename your global colors directly from the panel!

Applying Global Colors in the Style Editor

Once you have your colors in place you’ll be able to use them in the style editor. In most cases, you will simply use a color picker to select from our color sets. The color picker is found in the style panel (on the left side) for properties like text, background, and border colors. It is organized by color set so you can quickly choose the appropriate color.

However, there are some occasions when the color picker simply won’t do the job. For example, using an Oxygen stylesheet with CSS. So, how do we go about using these global colors in an Oxygen stylesheet?

Color Codes in Oxygen Stylesheet

In the color set panel that lists all of your colors, you will find the color ID next to the color name. The following image shows the top of the panel and the first color in the set, which is “Primary Dark (id: 6).” In this case, the ID for the color Primary Dark is 6.

Remember that ID number. Now, go to the stylesheets panel and open up a stylesheet - or create a new one. Let’s say we want to change the background of an element with an ID of “super-cool-box” to use the Primary Dark color. You would then use this snippet to do so:

#super-cool-box {
    background-color: color(6);
}

And that’s it! The “color function,” identified as “color(ID)” isn’t a real function. It is a replacement string that Oxygen looks for in its output CSS. This is the same reason why color(ID) will not work outside of an Oxygen stylesheet, like in code snippets or your own, personally enqueued stylesheets.

Closing

You can use stylesheets to help you better organize your styles and apply sophisticated property dependencies. Being able to use your global styles in that format is incredibly helpful. Just another reason why Oxygen Builder takes the cake.

Manage All Component Styles

The Style Flow feature of Editor Enhancer makes managing applied styles a breeze! See a component’s styles in a grid format - organized by selector, breakpoint, and pseudo. Surgically delete unnecessary styles, too! Check it out here.

Style Flow
Style Flow grid in Oxygen Builder editor

Liked this? Check out another of my posts:

Leave a Reply

Enhance Your Workflow

Get flowing with Editor Enhancer's suite of extensions and settings that immediately improve your workflow and editing environment.
Get Access Now

Reach out and say "hello!"

Join the Facebook Group
Editor Enhancer - The Best UI for Oxygen Builder
2021 Editor Enhancer. All rights reserved.
closecogcommentchevron-downfacebook-squareellipsis-vcopyrightfacebook-official