Oxygen Community Roundup #3

Welcome to another roundup of happenings in the Oxygen community.

Facebook Poll: “What Are You Charging For an Oxygen Based Site on Average?” (Facebook)

If you’re deciding how to price your website building services, check out this discussion in the Facebook group that has over 100 comments.

Supa Mike’s new website for Oxygen

Supa Mike built a new website with Oxygen to post his tutorials, and it looks impressive. See his Facebook post about this.

Supa Mike Tutorials

• SVG Background Patterns (web)
• Tabs With Nice Transitions (web)
• How to Add a Particles Background Effect (Facebook, web)
• Trigger a Function When You Scroll to an Element (Facebook, web)
• Awesome Gallery Styles (Facebook, web)
• Animate the Header With Tweenmax (Facebook, web)
• How to Add a Shape Divider (web)
• Collection of Shape Dividers (web)

Can It Be Done With… Oxygen?

Sridhar Katakam continued his video series of design challenges using Oxygen. Check out how he built the pricing boxes from the Soundstripe website and set up a toggled, off-canvas menu.

Video #3: Soundstripe’s Pricing Boxes in Oxygen

What to watch for:

• Clever use of a Tabs element to create a toggle for displaying two different pricing options
• Using the browser inspector and a browser extension to grab CSS and font information from the original page
• Finding a free Google Font that’s similar to the original design
• Adding multiple box shadows to an element via custom CSS (Advanced > Custom CSS)
• Styling active vs. default tabs with classes
• Using absolute positioning to position a label near an element
• Using custom CSS to add a color background with a linear gradient
• Using a Code Block with custom CSS to style multiple elements on the page
• Using spans to style parts of text separately (dollar sign and price)

Video #4: Off-Canvas menu in Oxygen

What to watch for:

• Building open/close buttons with an Icon, Link Wrapper, and JavaScript
• Preventing the menu from collapsing into a hamburger icon at small screen sizes (Primary > Mobile Responsive > Mobile Menu / Toggle Below = Never)
• Using Stretch for a div to make sure it is full width on the page (Primary > Horizontal Item Alignment > Stretch)
• Adding JavaScript actions with a custom functionality plugin
• Adding CSS and JavaScript to the page with a Code Block

More Sridhar Katakam Tutorials

Sridhar continues to create useful tutorials on a variety of topics, at an amazing pace:

• Font Awesome font icons for Oxygen’s Slider arrows (Facebook, web)
• Testimonials Slider in Oxygen (Facebook, web)
• How to customize the Comment Form in Oxygen (Facebook, web)—Showing labels or placeholders for the comment form input fields, using custom Flexbox CSS
• How to arrange comment form fields in columns using CSS Grid in Oxygen (Facebook, web)
• How to change the text before the comment form fields in WordPress (web)
• Expanding search form in Oxygen (Facebook, web)
• Fixed Left Sidebar in Oxygen (Facebook, web)
• How to generate a query string for Easy Posts in Oxygen (Facebook, web)
• Scroll animations using YellowPencil (Facebook, website)
• CSS for always showing the hamburger menu icon in Oxygen (Facebook, web)
• Automatic Table of Contents using Tocbot in Oxygen (Facebook, web)
• Background slideshow in Oxygen—Approach #1 (web), and #2 using ACF and backstretch (web)
• How to duplicate templates in Oxygen (web)
• Sticky section in Oxygen (Facebook, web)