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

Compare with the Beaver Builder approach here.

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

Compare with the Beaver Builder approach here.

More Sridhar Katakam tutorials

Sridhar Katakam was very active in the Facebook group, forums, and the Slack chat. He may have earned a badge for most valuable community member for his contributions over the past week!

Here are more of his excellent tutorials:

• How to add support for HTML5 markup in Oxygen (website)
• Shortcode for displaying Oxygen templates and reusable parts (Facebook, website)
• How to change auto-generated IDs of elements in Oxygen (Facebook, website)
• Tutorial on showing dynamic/current year (typically in footer credits) in Oxygen (Facebook, website)
• Tutorial on setting up a template for showing the Search Results in Oxygen (Facebook, website)
• A quick how-to on searching Oxygen's site and/or forum (Facebook, website)
• Essential Changes and Hacks in Oxygen (Facebook, website)
• Tutorial on removing padding for Column divs in Oxygen (Facebook, website)

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.