Aleš Sýkora wrote

Use global colours from Oxygen Builder in CSS

You have defined your Global colors in Oxygen Builder and now you need use them in CSS styles? No Problem!

You can use your global colors within CSS styles. Just open Settings > Global Styles > Colors, click on your colour group and you will see your colors with assigned ID’s to each of them.

If you want to use that color within a code block or even in custom CSS stylesheet within a Oxygen component all you need to do is call that color just like this: color(7)

Global color in Oxygen Builder
Using global color ID 7 in CSS

Another great tip – do not name your colours like color names (red, blue, light blue etc.). Better use names like Primary, Secondary, Primary alternative etc. In case you need to change the colour then, you don’t need to recreate the global colors for renaming them.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Display only first image from multi value field in toolset
22. 7. 2020 in
I am using a custom field called “product images” where I upload images for my custom post type Coffee machines. When I want to show the image in the archive then, I just want to display the first Image. Not all of them. What happen is that toolset field automatically display all images from the […]
Read More
Aleš Sýkora wrote
Oxygen Pro Menu menu selector – workaround fix on multisite
9. 8. 2021 in ,
Symptoms: Pro menu on multisite doesn’t show the WordPress menus in select field. Unfortunately, this is a known issue when using the Pro Menu element on a multisite install. There is a workaround by manually adding the ID of the menu you want to display to the page or template shortcodes. To do this, add […]
Read More
Aleš Sýkora wrote
Oxygen Lazy Load Gallery (Working 2021)
8. 4. 2020 in ,
Tutorial for working Lazy Load solution for Oxygen Builder gallery module.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram