Mindblown: a blog about philosophy.
-
Ripple effect on hover for links and buttons
Looking for a nice ripple effect on links and buttons when they are hovered? Demo: Hover me Here’s the CSS for that: Add ripple class to a elements and/or button elements for which you wish to apply the effect. Source https://www.dyson.com.au/dyson-v7-motorhead-origin
-
Section with 100vh min-height in Oxygen
Looking to have a horizontally and vertically centered div inside a Section that has min-height: 100vh in Oxygen? Here’s how. Add a Section.Align Items: centerJustify Content: center Add a Div inside the Section having your desired content – say a Heading and Text component. The key is to set min-height: inherit to the section’s inner…
-
background-blend-mode: multiply
I’ve recently discovered that setting background-blend-mode: multiply to an element that has a background image set makes it appear more vibrant and not washed out. Before: After: css-tricks article.
-
Setting a tab other than the first one as active tab in Oxygen
When using the Tabs component in Oxygen, the first one will be the active tab by default. To make a different tab say, the third one to be active on page load, the common approach is to trigger click on the tab or remove and add active classes using JavaScript. But we can use just…
-
Accessing parent menu item when hovering sub menu items in Oxygen
Looking to apply the same styles to parent menu items (like text color change when they are hovered) when any of its sub menu item is hovered? My article from 2013 is still relevant and here’s how we can apply it to Oxygen‘s Pro Menu. Simply add this sample CSS in a custom Stylesheet at…
-
CSS Counter for Repeater in Oxygen
Updated on 19 Sep 2023 This members-only tutorial provides the steps to apply CSS counter for Repeater in Oxygen so that the Repeater Divs automatically get numbered that increment from 1. Step 1 In the Oxygen editor add your Repeater. In this example, we shall add one on a static Page that pulls the latest…
-
CSS for styling Pagination in Oxygen
This members-only tutorial provides the sample CSS code for improving the appearance of pagination for Easy Posts and Repeaters in Oxygen. Before: After: Create/edit a Stylesheet at Manage > Stylesheets inside the Oxygen builder. Add this CSS: This is a premium members-only content. To view the rest of the content, please sign up for membership…
-
Cheatsheet: The Order that CSS is Applied in Oxygen
There isn’t currently a way to manage the priority of the CSS in Oxygen by reordering the selectors as they come from the various stylesheets. Understanding how the CSS is added by default can be helpful if something isn’t quite working as expected. There are lots of different ways to apply CSS in Oxygen and…
-
Revealing Footer in Oxygen
This members-only tutorial provides the steps to implement revealing footer using position: sticky (video) in Oxygen. Step 1 Edit the Main Catch All Template in Oxygen. If you are not using Header Builder component for the header, select your header Section and set its tag to header. If you have not already, select your footer…
-
How to wrap text around a Div in Oxygen
This members-only tutorial provides the steps to wrap content of the right Div around the content of the left Div in Oxygen based on these previous tutorials: How to wrap text around images in Oxygen How to wrap text around a video floated to the right in Oxygen Step 1 Add the following CSS at…
-
How to add a “New” label to a nav menu item in WordPress
This tutorial provides the steps to add a New label as part of a menu item text in WordPress. Step 1 In this example, we shall add the label to the BLOG nav menu item. Let’s add a blog class to the Blog nav menu item. While not compulsory, this step makes it easier to…
-
Sample Search Form Styling in Oxygen
This members-only tutorial provides the steps to improve the appearance of search form in Oxygen. Before: After: For a different look of the search form, refer to this tutorial. Step 1 Let’s enable HTML5 output for the search form. Install and activate Code Snippets plugin. Go to Snippets > Add New. Title: Add support for…
-
Sample CSS for Styling Gravity Forms Opt-in Form
This members-only tutorial provides the sample CSS to style a Gravity Forms form having an email address field. We will set rounded corners for the email input field and submit buttons and move the submit button inside the email field. Before: After: Step 1 Install and activate Gravity Forms. Create a form having an Email…
-
How to position the Read More buttons at the bottom of Easy Posts
This tutorial provides the steps to line up the Read More buttons to the bottom of posts for each row of Easy Posts component when using the “Grid – Image w/ Gradient Overlap” or “Grid – Image w/ Rectangle Overlap” preset in Oxygen. Before: After: Method 1 – Using Flexbox We set the display of…
-
Products Per Row for WooCommerce in Oxygen
Updated on March 15, 2020 “Products List” component in an Oxygen Template that applies to the WooCommerce main Shop page (product CPT archive) and/or to other WooCommerce related archives like Product Category and Tag archives has a “Columns” setting under “Layout”. By default “One” appears to be the active one/selected but it is not. The…
-
Sticky Header and Gallery Lightbox in Oxygen
Update: As Alex writes, “You need to specify an explicit z-index in the sticky header settings. If not specified, it defaults to a value of several million.” There is no need to add the below CSS. Looking for a way to fix sticky header covering up the lightbox in Oxygen‘s galleries? Note: If your header…
-
Inline Background Images in Oxygen
This members-only tutorial provides the steps to set up a img element to appear like a background for a Section in Oxygen. The advantages of this approach over the traditional cover background image method are that: the images will be responsive using WordPress’ srcset feature. plugins like ShortPixel Adaptive Images optimize inline images whereas they…
-
Styling the Search Form in Oxygen
This members-only tutorial provides the steps to improve the HTML output and look of the search form in Oxygen. Before: After: Step 1 Install and activate Code Snippets plugin. Go to Snippets > Add New. Title: Add support for HTML5 markup Code: add_theme_support( ‘html5’, array( ‘comment-list’, ‘comment-form’, ‘search-form’, ‘gallery’, ‘caption’ ) ); Save and activate.…
-
Oxygen Mobile Menu Customizations – 2
This members-only tutorial provides the steps to improve the design of Oxygen’s mobile menu when dropdown links are set to be included in the responsive menu. Before: After: We are going to: left align the menu items indent the sub menu items bold the top level menu items reduce the top and bottom padding for…
-
ACF color picker custom fields to CSS custom properties workflow in Oxygen
This members-only tutorial provides the steps to add some “Color Picker” type custom fields in an options page using Advanced Custom Fields Pro, and to create Custom properties (or CSS variables) from the custom field values so they can be used in the Oxygen editor. This tutorial can also be applied in the case when…
Got any book recommendations?