Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.

Community Roundup #4

hello world!

We're back with another roundup of happenings in the Oxygen community.

Custom Post Types With Oxygen 2.0 for WordPress (Facebook, YouTube)

Paul Charlton from WPTuts demonstrates how to create a template with dynamic content in Oxygen, using custom post types and custom fields.

What to watch for:

Using the Custom Post Type UI plugin to create a new Video Posts custom post type
Using the Advanced Custom Fields plugin to create custom fields for the Video Posts post type
Creating an Oxygen template to display single posts for the Video Posts post type
Dynamically displaying a video in the single post (Dynamic Data > Advanced > PHP Function Return Value)

Oxygen Mini Tutorial (Facebook, web)

Hui Suan Chung created an overview site to help people who are new to Oxygen. The information is broken down into categories, such as:

Overview of the Oxygen Interface
Adding Columns
CSS Troubleshooting

How to apply CSS animations to an Oxygen site with Microthemer (YouTube)

Roberto from CiaoWeb demonstrates adding animations to parts of Oxygen’s Winery design set.

Can it be done with… Oxygen?

Sridhar Katakam continues his series of advanced design tutorials using Oxygen. Check out how he recreated the homepage hero section from Oxygen 1.0’s website and a tabs-based display of features from Airtable’s homepage.

Video #5: Oxygen v1.0's website homepage hero in Oxygen 2.0

What to watch for:

Adding an alert banner at the top of the page using a Link Wrapper with Text elements
Changing background color on hover with a smooth transition
Changing the logo image opacity on hover
Building a header from scratch (no Header Builder element)
Making the menu expand to take up available space (Advanced > Flexbox Child Controls > Flex Grow = 1)
Separating several menu items horizontally, using custom CSS in a Code Block (margin-left: auto)
Chrome inspector tips (testing element targeting and styles, un-minifying CSS to view it more easily, searching for code in the CSS)
Adding a perspective image with custom CSS
Responsive menu adjustments and troubleshooting
Compare Sridhar’s process with an approach using Beaver Builder

Video #6: Airtable's homepage Tabs in WordPress using Oxygen

What to watch for:

Using a Tabs element to create a vertical navigation for displaying different images
Deep customization of a Tabs element and layout with Flexbox controls
Pausing JavaScript in Chrome inspector (F8) to inspect CSS on the original page (when animation makes it difficult to target images)
Adding advanced effects to all images inside tab contents, using a Code Block with custom CSS
Adjusting responsive layout for different breakpoints (rearranging elements through vertical/horizontal stacking, alignment, order, and wrap of elements)
Compare Sridhar’s process with an approach using Beaver Builder