Published on July 25, 2018

Oxygen Community Roundup #2

Welcome back to another roundup of the happenings in the Oxygen community. There were so many great tutorials and discussions over the past week that it is difficult to narrow down this roundup.

Can it be done with… Oxygen?

In a new series of tutorials, Sridhar Katakam demonstrates using Oxygen to recreate web pages from two popular websites. He was inspired by someone else doing this with Beaver Builder, which makes for a great comparison.

Sridhar does everything in Oxygen, whereas in the original videos with Beaver Builder, they rely on Microthemer (visual CSS editor) for some styling assistance:

Video #1: Building the Twitter homepage.

What to watch for:

Building a non-standard page design (2 columns that are full height)
Stacking child elements horizontally in a div
Using classes to style multiple items
Structuring elements inside divs to align them properly
Styling button states
Grabbing styles from the inspector tools
Adjusting the layout to look better on small screen sizes

Video #2: Building the Elementor Homepage Hero Section.

What to watch for:

Building a “button” with an icon in it, from scratch (creating a div with icon and text, stacking child elements horizontally, turning the div into a link wrapper, and setting hover states with a transition)
Using negative margin to overlap elements
Positioning an icon on top of an image
Using a plugin (Popup Maker) to open a video in a lightbox when an icon is clicked

Implementing CSS Grid in Oxygen

A discussion about using CSS Grid in Oxygen was kicked off by J Thomas Kay. There are some great resources in the post about learning CSS Grid.

Jeff Harris followed up with a great video tutorial for implementing CSS Grid in Oxygen. He points out that you can use Firefox Developer Edition to show the grid on the page as you design.

Sticky header with nice transitions

Supa Mike demonstrated how to make the header and logo shrink on scroll. He added more information in the forum.

Forum spam cleaned up

The official Oxygen forums were receiving a lot of spam posts last week. We blocked the offending bots, cleaned house, and added reCAPTCHA to prevent that from happening again. Thanks to those of you who pointed out the problem.