Phe, Author at Oxygen — Page 5 of 9

Updates

News and product updates from the Oxygen team.

Published on September 20, 2020

Tutorial: How To Easily Create Tooltips In Oxygen With Tippy.js

Tippy.js is a JavaScript library that makes it easy to add tooltips to your elements. In this video, see how to easily implement tippy.js in Oxygen so that you can show a tooltip when your elements are hovered. Tippy.js: https://atomiks.github.io/tippyjs/ Code Block PHP & HTML: https://gist.github.com/KittenCodes/3afbce14bbde11643673fe150065001b Code Block JavaScr...

Published on September 6, 2020

Tutorial: Using Utility Classes For Rapid WordPress Design In Oxygen

Phe

In this tutorial, see how to create a library of utility classes. Classes can easily be added to your Oxygen elements to achieve a consistent design across your entire site. For example, if you want to use the same box shadow on multiple elements, create a “box-shadow” class and apply it to all of the elements where you want to see a box shadow. Once you&#...

Published on August 23, 2020

Tutorial: Implementing Fluid Typography For Headings In Oxygen

Phe

In this video, see how to easily use Oxygen’s stylesheets to create responsive typography using the CSS function clamp().

PX to VW: https://web-development.space/tools/px-to-vw/.

Published on August 9, 2020

Tutorial: Using Animated Gradient Backgrounds In WordPress With Oxygen

Phe

In this video, follow along with Elijah and see how to add an animated gradient background to Oxygen’s elements.

The gradient in the video is created using CSS Gradient Animator: https://www.gradient-animator.com/

Published on July 26, 2020

Tutorial: Using CSS Grid With Repeaters In Oxygen

Phe

In this video, follow along with Elijah and learn how to use CSS Grid with Oxygen’s Repeater element. See how to style individual posts in the Repeater, or apply the same style to a group of posts. You can learn more about CSS Grid here: https://css-tricks.com/snippets/css/complete-guide-grid/. ...

Published on July 12, 2020

Tutorial: Creating Animated SVG Line Drawings In WordPress With Oxygen

Phe

In this tutorial, follow along with Elijah as he creates an animated SVG line drawing in Oxygen and a small amount of custom code. Video links: Jake Archibald: https://jakearchibald.com/2013/animated-line-drawing-svg/ jQuery Visible on GitHub: https://github.com/customd/jquery-visible CDN: https://cdnjs.com/libraries/jquery-visible Boxy SVG: https://boxy-svg.com/ ...

Published on June 28, 2020

Tutorial: Simple Password Protection With Conditions In Oxygen

Phe

In this tutorial, Jonathan shows you how to create a new Condition in Oxygen and use it to protect access to your page using a password.

Download the Code Snippet used in the video here: https://www.dropbox.com/s/917k7nf1ik2zev6/hide-content-unless-access-in-url-equals-defined-value-conditions.code-snippets.json?dl=1

Published on June 14, 2020

Tutorial: How To Create A Design System For Oxygen

Phe

In this tutorial, follow along with Elijah as he creates a design system for Oxygen. A design system can be used as a reference to ensure consistency across your site.

Published on May 31, 2020

Tutorial: How To Make A Search Icon With Animated Field Reveal In Oxygen

Phe

In this tutorial, follow along with Elijah as he creates a search field that is revealed when the search icon is hovered.

Published on May 17, 2020

Tutorial: How To Use fullPage.js With Oxygen

Phe

Follow along with Elijah as he creates a full-page scrolling site using fullPage.js with Oxygen. fullPage.js: https://alvarotrigo.com/fullPage/ SVG Backgrounds: https://www.svgbackgrounds.com/ Code Block HTML: https://gist.github.com/Spellhammer/2330a63dd76f54652157a6c04dd1671c Code Block CSS: https://gist.github.com/Spellhammer/ddbd46ebdb84d81b7ab97a96cf82500a Code ...