Forem: mark l chaves

How to Unset CSS Overflow Using JavaScript when Sticky Elements Stop Working

mark l chaves — Sat, 06 Mar 2021 22:15:36 +0000

If your sticky sidebar, header, or footer CTAs stopped working, there's a good chance that your theme added the CSS overflow property to a parent element (usually a div).

Does this sound familiar? Then, keep reading ;-)

In this tutorial, we'll use JavaScript to unset that bad boy.

The steps below use WordPress as an example. But, the same concept applies to other website platforms or frameworks.

Step 1: Find the Offending Element

Open your dev tools and type in overflow in the search filter for the CSS panel.

Make a note of the HTML ID attribute of the element that has the overflow property set.

In this case, it's boxed-wrapper.

Step 2: Write the JavaScript to Unset the Overflow Property

Open your favourite code editor. Copy and paste the code below into your editor and save it using the .js file extension.

(function () {
    if (!document.URL.includes("floating-toc-sidebar-test")) return;
    let element = document.getElementById("boxed-wrapper");
    if (!element) return;
    element.style.overflow = 'unset'; /* To fix any position: sticky further down the DOM. */
})();

Change floating-toc-sidebar-test to your page slug. This is because we want this code to run only on the page that needs fixing.

Change boxed-wrapper to the HTML ID you noted in Step 1. Note: If the offending HTML element didn't have an ID, you'll need to come up with a CSS selector that grabs that one element only.

Save your file again.

Step 3: Install the JavaScript Code

There are 2 options.

Option 1: Installing Without a Plugin

Open your favourite code editor again. Copy and paste the code below and save it using the .php file extension.

/* Inline script printed out in the footer to fix sticky elements. */
function sticky_fix_add_script_wp_footer() {
    ?>
        <script>
            (function () {
                if (!document.URL.includes("floating-toc-sidebar-test")) return;
                let element = document.getElementById("boxed-wrapper");
                if (!element) return;
                element.style.overflow = 'unset'; /* To fix any position: sticky further down the DOM. */
            })();        
        </script>
    <?php
}
add_action('wp_footer', 'sticky_fix_add_script_wp_footer');

Replace the function between the <script></script> tags with the function you wrote in Step 2.

Save your PHP file.

Copy and paste the contents of your PHP file into your child theme's functions.php file.

Option 2: Installing Using the Insert Headers and Footer Plugin

Log into your WordPress admin area. Head over to Settings > Insert Headers and Footers.

In the Scripts in Footer code snippet box at the bottom, type in the following code.

<script>
</script>

Then, copy/paste the JavaScript code that you wrote in Step 2 between the <script></script> tags.

Here's what you should have so far.

Hit Save.

And, you're done and done!

Give your page a test.

Remember to share your knowledge with others who run into the same problem.

Enjoy!

How to Send a Custom Event to Google Analytics 4 Using JavaScript

mark l chaves — Wed, 20 Jan 2021 11:05:45 +0000

Intro

This article is a quick demo of how you can send a custom event to Google Analytics 4 (GA4) using just pure JavaScript.

I've only seen one other article describing something similar. But, that implementation used Google Tag Manager. I wanted to do the same thing using pure JavaScript instead.

You’ll also learn how to see custom events in GA4 via the DebugView, Events report, and a custom report.

The Scenario: Menu Clicks

Everything is an event in GA4. GA4 recognises 3 categories of events:

Automatically collected events
Recommended events
Custom events

Google recommends using events from these 3 categories in the above order. Top-level menu clicks aren't in the first 2, so they're a great candidate for this tutorial.

All righty then. Let's track menu clicks by sending them as custom events to a GA4 property!

Identifying Menu Items in the Twenty Twenty Theme

In the WordPress Twenty Twenty and Twenty Twenty-One themes we can use the menu-item- ... ID values.

Based on this HTML code, we can use this CSS selector for grabbing menu item elements.

li[id^='menu-item-'] > a

The Code

Now that we know how to grab the menu items, we can hook them up with event listeners and callbacks.

Inside the event callback code, we'll need to add our call to gtag.js. It will look like this.

gtag("event", "MenuClick", {
  menu_item_name: name,
  menu_item_url: url,
});

In the code snippet above, we send an event called MenuClick along with 2 parameters for the name of the menu item (i.e., menu item text) and the URL of the menu item.

The full algorithm is in the JavaScript snippet below and is available as a gist on Github.

(function () {
  if (typeof gtag === 'undefined') return;

  // Grab all the menu items on Twenty Twenty WordPress theme page.
  const menuElts = document.querySelectorAll("li[id^='menu-item-'] > a");
  console.log(`I found ${menuElts.length} menu items to process.`); // JavaScript template literal for printing inline JS expression.

  // If no menu items, bail.
  if (menuElts.length === 0) return;

  // Convert to an array so we can map over the array
  // if you don't want to use the spread syntax.
  // let menuItemsArr = Array.from(menuElts);
  // menuItemsArr.map((elt) => {

  // Spread and map.
  [...menuElts].map((elt) => {
    // Set up the listener and handler at the same time.
    try {
      elt.addEventListener("click", function (evt) {
        console.log("Sending menu click to GA4.");

        let name = evt.target.innerText;
        let url = evt.target.getAttribute("href");

        // DEBUG
        // evt.preventDefault(); // Don't navigate!
        // console.log(`Menu item clicked: ${name} ${url}`);

        gtag("event", "MenuClick", {
          menu_item_name: name,
          menu_item_url: url,
        });
      });
    } catch (e) {
      console.log(
        "Something wrong happened when setting up event handling for the menu items."
      );
    }
  });
})();

The Result

Viewing the Result in the Debugger

Viewing the Result in Engagement > Events

Creating a Custom Report in the Analysis Hub

Credits

The use case and workflow are based on Julius Fedorovicius' article How to Track Custom Events with Google Analytics 4 posted on Analytics Mania.

Cover image: Custom scrambler with model Tara photographed by mark l chaves.

Why Having a Staging Site Is Good for Your Sanity

mark l chaves — Mon, 02 Nov 2020 00:11:06 +0000

Don't want to lose sleep over your website going down? Get a staging site.

You have a successful website. You're happy because you got your site up and running quickly on a tight budget.

Now, your website is the main source of your customers and sales. As your business grows so does your need for more functionality and plugins.

A few times a month, you make content updates and do software upgrades to your site all by yourself. You've never had any problems—you think running a website is a piece of cake.

The Nightmare

Then, one day after you just updated a dozen or so plugins, you start getting emails from customers, WordPress, and even Google. The emails say that you have a serious issue with your site.

You bring up your browser and try to pull up your site. All you get is a blank white screen.

This nightmare scenario happens all too often. The good news is, it can easily be avoided if you use what's called a staging site or staging environment.

Use a Separate Copy of Your Live Site

A staging site is a separate copy of your live website. The key words being: separate and copy.

Because a staging site is separate from your live site, you can do things like upgrading WordPress, your theme, and your installed plugins without affecting your live site. And, since a staging site is a copy of your live site, you can make changes and test the changes on a staging site as if it was your live site.

The Benefits of a Staging Site

After you verify that the changes you made on staging look good and work the way they should, then you can make those same changes on the live site. Testing updates on a staging site before applying the updates on your live site helps ensure:

Your site is still fully functional and continuing to deliver your online offerings.
There's no disruption of your online presence that you rely on to promote your brand awareness and preserve your credibility.
There's no loss of revenue and customers because of unplanned downtime.
No search engine penalties from non-working pages or missing content (e.g., 404 or 500 errors).
There's no loss of precious site content or customer data—namely for membership and eCommerce sites.
Your brand, credibility, and domain authority are protected.

Your Live Site Shouldn’t be Your Test Site

Staging sites don't have to be just for testing plugin updates. They can be an entire development environment for a new site, a place for troubleshooting and fixing an issue, or even a performance and scalability testing lab.

If you care about your business and your customers, you shouldn't be experimenting or making untested updates on your live site.

Does the phrase, "a copy of your live site" set off your SEO warning bells? Don't worry. You can password protect staging site (recommended). You can also tell search robots not to index your staging site. That means they won't affect SEO standings of your live site.

OK, just because you have a staging site doesn't mean you're completely in the clear. They can be misused just like any other tools in your toolkit.

In this article, I'll guide you through 8 best practices for using a staging site.

Please note that I'll use the words staging site, staging environment, and staging to all mean the same thing. I'll also refer to the live site as production.

8 Best Practices for Your Staging Site

1. But First, Take a Selfie Backup

A full backup means that all the files that make up your site are copied to a safe location. This is opposed to a partial backup where you can select to back up only parts of your site. A full backup includes WordPress core files, theme files, media files, and database (DB) files.

I recommend that you always make a full backup of your live site before creating the staging site copy. You can quickly restore everything back to normal from the full backup if needed.

You should always take another full backup of your live site when you make any changes to it.

These full backups are your insurance policy for when the live site becomes corrupted at any point during the process.

It's important to note that there's a difference between a daily backup and an instant (unscheduled) backup—sometimes called a snapshot. A snapshot taken just before updating the live site is good to practise for minimising data loss.

2. Disable Email Notifications

While working in staging, you should disable all email notification.

You definitely don't want to inadvertently flood your customer's inboxes if the work you're doing on staging is kicking out email notifications all over the place.

There are plugins that can temporarily disable notifications, yet log them for you as if they are sent. This is an awesome way to test emails without spamming everyone.

3. Clear Your Cache

It happens to all of us.

After we make a simple change we reload the page to see it, and it's not there. We hit reload a couple more times—still nothing.

We go back to the change. The change looks good.

We hit the save button just to be extra sure. We click reload again. Nothing.

We're just about the scream before we realise we should clear our caches.

Assuming your change doesn't have an error, you save your work, and you're looking at the right page, this problem is almost always due to caching.

To save time and your sanity, I recommend disabling your caches while you are making changes in staging. Only enable them when you are doing performance testing or to make sure there are no plugin conflicts if you use a caching plugin.

Make sure you clear your caches on the live site too when you push changes.

By the way, when we say caches, we mean all caches:

Browser
WordPress
Server
Database
CDN

To top it off, some plugins build their own asset cache. Check your plugin's setting to see if they have one.

So, I get this all of the time, "I don't have a cache." Chances are you do and just don't know it yet.

4. Never Push the Staging DB to Production

Your production database should be the single source of truth. Treat it like your personal gold mine. Therefore, never contaminate it.

This means, never push your staging database to your live site.

Overwriting your production data from staging is never a good idea.

Some automated staging tools don't even permit pushing the staging DB to production. That's a good thing.

5. Don't Rely Only on Partial Backups

As I mentioned above, full backups are the only way to fly.

You might see options in your dashboard for backing up only the database, media, theme, or plugins. When it comes to working with staging environments, don't take partial backups.

You need to make sure you can always restore your complete site—not just pieces of it.

6. Don't Keep Your Backups on Your Website Server

There are two big reasons you shouldn't keep your full site backup on your website.

First, if your server crashes and all files are lost, your most recent full backup is also gone.

Second, your backup file(s) takes up disk space. Depending on the size of your site, your backup files can be humungous. Your available disk space could shrink to nothing if you have an increasing stockpile of backups on your site.

Your site will screech to grinding halt when you're out of disk space.

Just say no.

7. Restrict Access to Staging

Hosting plans that support staging sites usually create them with private access by default. However, you should always check especially if you manually created your staging site.

Staging sites should be controlled environments so you know what's happening to the site at all times. Password protect them.

Otherwise, you can be wasting precious time chasing your tail trying to figure out why the changes you made yesterday aren't working today.

And please remember. You don't want your staging site to show up on search results either.

8. Never do Automatic Updates

If your site is mission-critical, you'll lose revenue and customers when your site goes down.

You should never automatically update your WordPress version, your active theme, and any active plugins. Having auto-updates turned on is a recipe for disaster.

You'll need to check with your hosting provider's policy to see what their default update settings are. If they default to any kind of automatic updates, then you'll need to know how to disable them.

Parting Thoughts

I recommend that you always use a staging site even for updates that seem completely harmless. Conversely, I don't ever recommend using your live site to test changes or try out new things.

Unless of course:

Your live site is private and has no visitors except for you.
Your live site is public, but no one cares if it's up or down.

Cost used to be a factor for skipping staging sites. Luckily, more and more hosting plans include one-click staging environments.

With more support for staging sites, there's no reason to find out the hard way that running your operations without a staging site is a costly mistake.

Let's face it, having a website (whether it's on WordPress or not) requires continuous care and feeding. If you want a healthy and safe website that's always running the latest/greatest features, investing in a staging site is a no brainer.

Websites (like fur babies) need constant care and feeding.

Resources (no affiliations)

WordPress

What is a staging site by WP Engine

Why you need a WordPress staging area and how to use one by Flywheel

How to Set Up a WordPress Staging Site by Elementor

Formidable Forms says to test on a staging site

Other

Netlify

Vultr

Credits

This article is a lean version of the original I wrote for the Uncanny Owl blog.
Hero image is a photo I made at the Hard Rock Cafe in Kuta, Bali while covering a gig for Mata Jiwa and Navicula in 2018.
All other images by mark l chaves unless otherwise stated.

HTML5 Video Tracking by User ID Using Google Tag Manager

mark l chaves — Fri, 30 Oct 2020 06:42:12 +0000

NOTE: This works with Google Analytics Universal Analytics. This does not work with GA4.

The not-so-good news is there isn’t a native way for Google Analytics to track HTML5 video play events. Yes, even in this day and age where video pretty much rules.

But, the good news is there is a way to track these events without starting from scratch. You’ll need to be pretty comfortable with Google Tag Manager though ;-).

I know this stuff has been done before. But, I've added a twist. I'm going to show you how to find out which logged-in WordPress users are watching your HTML5 videos.

Oh, be sure you've enabled user ID tracking for your Google Analytics property.

Let's get to it!

Don't Reinvent the Wheel

Luckily, we don't have to start from 0. We'll kick things off by using Julius Fedorovicius’ HTML5 Video Tracking Recipe for Google Tag Manager.

You'll want to follow Julius' instructions in his article. In step 3, I chose his recommendation to use the Google Analytics Settings variable.

Now that that's over, we can dig into the fun stuff—adding support for user ID tracking.

User ID Support Show & Tell

Here's what my Google Analytics Settings look like.

It's a bit of a workhorse. Meaning it's doing 3 things for me:

Pulling in my GA tracking code so that the imported HTML5 Video Player recipe knows which property to send the stats.
Defining the user ID data layer variable that will store the WordPress logged-in user ID to send to GA during video events.
Setting up the user ID custom dimension that grabs the user ID (see above) and maps it to the user ID custom dimension I've defined for my property.

The Glue

This is the data layer variable that glues everything together.

Since we have the user ID data layer variable, we can add it to the GTM tag JavaScript source code that we imported earlier. You'll want to add it everywhere you see a GA event being set up.

Here's what you should have.

The Last Piece.

You're almost there.

You're probably asking yourself, "How the heck do I get this user ID in the first place?"

The answer is: From WordPress of course!

Add this code to your child theme's functions.php file, create a plugin for it, or use a code snippets plugin that supports PHP.

function get_current_user_vid_tracking () {
  if( ! ( is_page( 'html5-video' ) ) ){
    return;
  }

  $current_user = wp_get_current_user();

  if ( ! ( $current_user instanceof WP_User ) ) {
    return;
  }

  $user_ID = $current_user->ID;

  ?>
  <script>
    let cmeUserID = '<?php echo $user_ID; ?>'; // Set the user ID using signed-in user_ID.
  </script>
  <?php
}
add_action( 'wp_head', 'get_current_user_vid_tracking' );

I do an upfront check for my HTML5 video test page. You'll want to tweak that if test or remove it if you don't need it.

Pulling it All Together

Assuming that you:

Saved and published your GTM changes,
Inserted your PHP code, and
There aren't any coding errors

When you visit a page on your site that has an HTML5 video, you'll see something like this in the GA Realtime report.

Here's an example Google Analytics custom report showing HTML5 video events grouped by the user ID custom report.

You're probably noticing the funky user ID. That's the internal WordPress user ID, and we're using this cryptic number because of PII protection.

Not so helpful, eh? But this is WordPress. So, to make life a bit easier, you can add a custom user ID column to your WordPress user admin page. I've got a super teenie plugin that does this for you.

You'll get something like this if you use this plugin or another similar plugin.

Extras

See a live demo here.

NEW!

There's now a standalone WordPress plugin (GA4HTML5VID) that works completely without Google Tag Manager and still supports user ID tracking.

Credits

The HTML5 Video Tracking Recipe is originally from David Vallejo.

A Practical CSS Linear Gradient

mark l chaves — Thu, 14 May 2020 12:04:31 +0000

I feel that there's a love-hate relationship with linear gradients. You either love them or hate them.

In this short tutorial, I think you'll learn to love using gradients for a particular case—the hero image.

The Problem

I think big and bold hero images are cool. But if you're not careful, then these images can make the top menu hard to read.

The Fix

We can use a CSS linear gradient to darken the part of background image beneath the menu items.

I like this solution because:

It's fast and flexible. I don't need to go into Photoshop. Photoshop is a great tool. But, photo editing is a cumbersome step in the workflow. And, if you mess up by making the image too light or not dark enough, you get to fire up Photoshop and edit the image again :-(. On the other hand, If we want to turn off the gradient or if we want to change the colour, we simply edit the CSS. Easy!
It's responsive. The CSS linear gradient is responsive. It's not "baked" into the image. It's a decoupled layer that can respond nicely to different devices. That's the way it should be for responsive web design (RWD).

The Code

/* || Gradient Stuff */

.hero::before {
    content: ""; 
    /* Control the gradient stops with percentages here. */
    background: linear-gradient(to bottom,rgba(0,0,0,0.65),rgba(0,0,0,0) 100%); 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* I don't want this too high because I only want to darken the top. */
    height: 300px; 
}

.hero {
    color: whitesmoke;
    text-align: center;
    height: 100vh;
    min-height: 550px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-image: url(https://marklchaves.files.wordpress.com/2020/01/bali-ubud-pasar-les-1-2-1280w.jpg);
}

Breaking it Down

I define a .hero CSS class. As you guessed, this class defines the full-height background image.

I use the before pseudo-element on the .hero class. This pseudo-element defines the linear gradient that overlays the hero image.

The gradient starts at the top as black with 65% opacity. It ends 300 pixels lower as black with 0% opacity (fully transparent).

Variations

1. We can create a solid bottom border for the menu.

I do this by specifying start/stop percentages for the two rgba colours. If I set the stopping point (25%) of the first rgba to the starting point (25%) of the second rgba, I create a solid border effect.

background: linear-gradient(to bottom,rgba(0,0,0,0.65) 10% 25% ,rgba(0,0,0,0) 25% 100%);

2. Or, how about a softer bottom border?

Here, I set the starting point (30%) of the second rgba to slightly lower than the stopping point (25%) of the first rgba. This gives me a softer bottom border.

background: linear-gradient(to bottom,rgba(0,0,0,0.65) 10% 25% ,rgba(0,0,0,0) 30% 100%);

In the Wild

Wrapping Up

I wish I knew earlier how to do this technique! I think many of us didn't know what keywords to search on. And what's worse is, if you search on CSS linear gradients, the examples that come up aren't practical.

Thanks for reading. Share & enjoy!

Changing up Wordpress Header Logos Using CSS

mark l chaves — Sat, 18 Apr 2020 11:56:15 +0000

Here's another fave question I get a lot.

How do you change the site header logo to another logo for a specific page or post?

Let's see how you could do this in the Avada, Divi, Astra, and Twenty Twenty. All four methods are CSS-only solutions. I've included three snippets using a page for the example and one snippet using a post for the example. See the comments in the code for how to apply the CSS for posts or pages as needed.

How do I get the page/post ID?

Scope out this pen, for a JavaScript approach.

If you want to follow along, here's the logo I'll be using to override the default site logo.

One caveat: for all custom CSS added to any theme, you may need the !important directive. You can always use your Firefox or Chrome dev tools inspector to verify what to override.

For example, if your logo doesn't show up at first, you might have to use !important in the code I provide below especially for the display, width, and height attributes.

Ready? Let's rock!

Different Logo for Different Pages using Avada #

This CSS will change the logo only for a page on an Avada site that's ID is 18.

/* Avada */

/** 
 * Hide the default logo. 
 *
 * For posts use .postid-2466 format.
 */
.page-id-18 .fusion-logo-link img {
    display: none;
}

/** 
 * Drop in a different logo.
 *
 * The site link is respected.
 */
.page-id-18 .fusion-logo-link {
    background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    height: 65px;
    width: 65px;
}

The Result

Different Logo for Different Posts using Divi #

For Divi, let's do something exciting and change the logo for a specific post not a page. This CSS will change the logo only for a post on a Divi site that's ID is 266.

/* Divi */

/**
 * Hide the default logo. 
 *
 * For pages, use format .page-id-9
 */
 .postid-266 #logo {
    display: none !important;
}

/** 
 * Insert a different logo as a background image.
 *
 * The site link is respected. 
 */
.postid-266 .logo_container {
    background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);
    background-repeat: no-repeat;
    width: 100px !important;
}

The Result

Different Logo for Different Pages using Astra #

This CSS will change the logo only for a page on an Astra site that's ID is 4.

/* Astra */

/**
 * Hide the default logo. 
 *
 * For posts, use format .postid-49272
 */
.page-id-4 .custom-logo {
    display: none;
}

/** 
 * Let's use a different logo.
 *
 * The site link is respected.
 */
.page-id-4 a.custom-logo-link.transparent-custom-logo {
    background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    height: 65px;
    width: 65px;
}

The Result

Different Logo for Different Pages using Twenty Twenty #

This CSS will change the logo only for a page on an Twenty Twenty site that's ID is 14.

/* Twenty Twenty */

/** 
 * Hide the default logo. 
 *
 * For posts use .postid-1 format.
 */
.page-id-14 .custom-logo-link img {
    display: none;
}

/** 
 * Drop in a different logo.
 *
 * The site link is respected.
 */
.page-id-14 .custom-logo-link {
    background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-slashes-65.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    height: 65px;
    width: 65px;
}

The Result

What About Retina? #

With Retina, we need to check the device using CSS media queries. Then, we can use a higher res (2x) logo. But, we still need to contain the logo so it fits in the header. We do that by fixing the background size dimensions.

Using the Avada theme as an example, you would add this extra CSS. Note the differences that I flag in the comments.

/* Media query for Retina on Avada */
@media screen and (min--moz-device-pixel-ratio: 2),
  screen and (-o-min-device-pixel-ratio: 2/1),
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-device-pixel-ratio: 2) {
  .page-id-18 .fusion-logo-link {
    background-image: url(https://balistreetphotographer.files.wordpress.com/2019/02/balistreetphotographer-logo-2-black-250.png); /* High res logo */
    background-repeat: no-repeat;
    background-size: 65px 65px; /* Instead of 100%. New for Retina. */
    display: block; /* Add !important if needed. */
    position: relative;
    height: 65px; /* Add !important if needed. */
    width: 65px; /* Add !important if needed. */
  }
}

The Result

How Do I Get the Page or Post ID? #

Go to the page that you want to change the logo. View source. Search on <body. Look for the page or post ID class.

How Do I Add Custom CSS?

Adding Custom CSS to Your WordPress Site

As always, shout if you've got a question.

See ya next time. Share & enjoy!

Creating a Full-Width Hero in GeneratePress (Free Version)

mark l chaves — Fri, 13 Mar 2020 05:56:24 +0000

I'm in the middle of evaluating fast loading WordPress themes. Part of my due diligence is creating a typical home page in the theme I'm testing.

I was excited to find out how quickly I could create a beautiful full-width homepage Hero image in GeneratePress—without any plugins or premium add-ons. So, I'm sharing.

For this tutorial, we'll use the free version of the GeneratePress theme and the Gutenberg WordPress block editor.

BTW, I am not affiliated with GeneratePress nor any software vendor for that matter.

What We'll Cover

GeneratePress theme settings
Gutenberg document settings
Gutenberg block settings
Extra custom CSS for umph!

If you want to follow along, here's the image I used from Unsplash. Feel free to download it, crop it to 1280x849 pixels, then optimise it to around 200 KB or less.

GeneratePress Theme Settings #

Header

Navigate to Appearance > Customize > Layout > Header

Header Presets: Navigation Right
Header Width: Full
Inner Header Width: Full
Header Alignment: Left

Navigation

Navigate to Appearance Customize > Layout > Primary Navigation

Navigation Width: Full
Inner Navigation Width: Contained
Navigation Alignment: Left
Navigation Location: Float Right

Make sure you hit the "Publish" button to save your changes. Now, create a new page using Gutenberg (block editor).

If you need a Gutenberg refresher, scope out this Gutenberg tutorial from Shout Me Loud.

Alright! Let's hit the document settings.

Gutenberg Document Settings #

Select these options for your document settings.

Sidebars: Content (no sidebars)
Page Builder Container: Full Width
Disable Elements: Content title

Got all that? Great. Time to create a cover block.

Add a Cover Block

Add a new block at the top of the page. Select Cover as the block type.

Upload the image you prepared earlier.

Now, let's tweak the settings for our new cover block.

Gutenberg Block Settings #

Select these options for your block settings.

Media Settings: Fixed background (gives us a hip parallax effect)
Dimensions > Minimum height pixels: 849px (remember the height of our hero image above?)
Overlay > Background Opacity: 50%

Whew! We're almost there.

Custom CSS for Some Umph!

Ok. So I added custom CSS to ensure the following:

Our top nav bar is non-sticky
Our top nav bar has a transparent background
Our top nav bar isn't hidden by the cover block we created
Our site title pops from the dark background
And finally, so that this styling is applied only to the homepage

Here's the custom CSS I used.

/* Need this to make transparent header overlay for homepage hero. */
.page-id-6 .site-header {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    background-color: transparent;
}

/* Brighten the branding text to make it pop on a dark background. */
.page-id-6 .main-title a {
    color: whitesmoke;
}

Don't know where to put this CSS? Please read How to Add CSS to WordPress.

Don't know how to find the page ID? Bring up your page in a browser. View the source. Search on "<body".

Yay, you did it! High five!

Thanks for reading. Share & enjoy ;-)

The hero image used is a 35mm film scan of a horse & buggy driver in the historic city of Yogyakarta, Indonesia.

What is Art Direction and How to Use it

mark l chaves — Fri, 07 Feb 2020 09:23:48 +0000

Help! My banner images are cut off on mobile.

I see messages like this a lot in help forums. It usually means we have a "hero" image with an important subject placed on the left or right side of the picture.

On a desktop, it looks fab. On a laptop, it looks so-so. When we get to a tablet—we're not so happy as the main subject starts to fall off the edge. On a mobile. Forget about it. The subject is gone.

Above is the opposite of responsive web design or RWD. The image has only one-size that is suited for a large display. It's a one-size doesn't fit all.

One solution is to pick an image where the subject in the centre.

This isn't always possible nor desired. What's the answer if you need to use a left or right justified image?

The answer is to use art direction images with CSS media queries. Let's do it.

Art Direction Images with CSS Media Queries

Step 1 Create the Images

We need to create a set of images from the original. Each image will have a different width and height and different compositions to keep the subject in view.

Using the image of the woman and child as an example, here are the art direction versions we'll use.

Desktop 2000 x 768 px.
Mobile landscape 600 x 768 px.
Laptop 1240 x 768 px.
Mobile portrait 480 x 768 px.
Tablet 768 x 768 px.

Question—do five different images seem extreme? We need at least five because of how close the two subjects are to the right edge. How many versions depends on the original photo composition. Sometimes two is enough.

Step 2 Create the CSS Media Queries

We'll need four media queries. We want our code to default to the mobile portrait image. The default doesn’t need a media query.

So we’ll write four media queries to kick-in the four larger versions as the display becomes wider. See the breakpoints in the snippet below.

The CSS Media Queries for the Art Direction Images


/* 
 * || Responsive Web Design Demo (formerly using Fusion Slider)
 *
 * mark l chaves 24 July 2019 (updated 9 September 2019)
 */

/* Mobile first responsive web design. */
.hero {
    background-image: url(https://marklchaves.files.wordpress.com/2020/02/test2slider-mob-768.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Mobile landscape breakpoint. */
@media only screen and (min-width: 480px) {
    .hero {
        background-image: url(https://marklchaves.files.wordpress.com/2020/02/test2slider-land-768.jpg);
    }
}

/* Tablet breakpoint. */
@media only screen and (min-width: 768px) {
    .hero {
        background-image: url(https://marklchaves.files.wordpress.com/2020/02/test2slider-tab-768.jpg);
    }
}

/* Laptop breakpoint. */
@media only screen and (min-width: 1024px) {
    .hero {
        background-image: url(https://marklchaves.files.wordpress.com/2020/02/test2slider-lt-768.jpg);
    }
}

/* Desktop breakpoint. */
@media only screen and (min-width: 1600px) {
    .hero {
        background-image: url(https://marklchaves.files.wordpress.com/2020/02/test2slider-dt-768.jpg);
    }
}

Step 3 Test the Result

Here's what you should see.

Putting it all together. Our responsive web design using art direction.

Live Demo on Codepen

Note: Please log in to your CodePen account to view if the pen doesn't show up at first.

Wrapping Up

I hope you learned something new! At the very least, you'll know how to help someone when their heroes are cut off on mobile devices ;-)

Learn more about art direction and responsive design at the W3C.

Shout if you have any questions.

35mm Film Photograph of a Balinese Man on Unsplash by mark l chaves.

Fixing the Equal Height Columns Problem (CSS)

mark l chaves — Tue, 14 Jan 2020 10:08:19 +0000

Overview

The equal height columns problem (or anti-pattern) is where we have 2-3 three columns in one row. Each column has a different amount of content. So, the bottom of the columns don’t line up evenly.

Ideally on a larger display, we want to have each column be the same height. And, we want to have buttons or links at bottom of each column be lined-up at the same level/height across the columns.

Here's the anti-pattern we are getting now.

The equal height challenge is not specific to just one WordPress theme. But, I'll be using the Avada WordPress theme (no affiliation) for the code examples.

More importantly, if you can master this common web design pattern here, you’ll be able to handle it like a pro in other themes (or static sites).

Goals [#]

Let's recap our goals. On a laptop and desktop view:

We would love to have the content boxes be equal height.
Say we have three columns with text and a CTA button in each column. The three CTA buttons will hug the bottom of the text block elements (not the bottom of the equal height columns). This means, the positioning of these buttons are at different heights. I.e, not what we want. Instead, We want them to all line up evenly across the bottom.
We don’t want to be forced to always use the exact amount of text for our content boxes like the Avada demos do. The Avada ThemeFusion demos give the illusion of equal height content boxes in a row. They do this by ensuring all the text in their content boxes have the same amount of characters.

Above: The Equal Heights Illusion - Avada Theme Demos Using Equal Text to Simulate Equal Heights

Our solution should look something like this.

Side by Side Before/After

Note: Please log in to your CodePen account to view if the pen doesn't show up at first.

Our First Two Attempts [#]

If we didn't know anything about the equal height columns anti-pattern, we naively would try these two approaches:

First Try - One Row and One Column of Content Boxes

Create one row with one column.
Inside the one column, add a Content Boxes Element.
Create three items inside the Content Boxes Element.

Above: One Wide Column (yellow) with One Content Boxes Element that has Three Items (green)

Second Try - One Row with Three Columns with One Content Box Each

Create one row.
Enable the Set Columns to Equal Height setting for the row.
Create three columns (1/3 width each).
In each 1/3 column, create one Content Boxes Element.
Create one item in each of the Content Boxes Element.

Above: Three Columns (yellow) with Three Content Boxes (green)

As you've probably have noticed, neither approach works.

Solution [#]

What’s the solution? One solution involves using the First Try method (above) and writing custom CSS to:

Perform a media query (responsive design).
Set a fixed height for the content boxes.
Push the buttons down to the bottom using absolute positioning.

I know you are wondering. How many lines of code will this cost me? Six!



/* Only do this fancy stuff for devices larger than a tablet. */
@media only screen and (min-width: 1025px) {
  .content-container {
    min-height: 500px; /* Change this to what you need. */
  }
  /* Ground the CTA button. */
  .fusion-button-wrapper {
    position: absolute;
    bottom: 5px;
  }
}

Instructions

Add this CSS code to your Custom CSS code editor for the page that has your content boxes.
Adjust the min-height value to what works for you.
Click Update to save the page.
Reload the page (clear caches if needed) to view the changes.

Recap of the Code

OK. Here's what this CSS is doing.

A media query to force equal heights only for larger devices. For anything smaller than 1025px, the design becomes responsive by stacking the content boxes.
A min-height property for the content boxes to ensure each box has the same height inside their parent containers.
Absolute positioning on the button components to force them to the bottom of their container columns.

Flex Version [#]

What's that you say? Where's the CSS3 flexbox version?!



/* Only do this fancy stuff for devices larger than a tablet. */
@media only screen and (min-width: 1025px) {
  .content-container {
    display: flex;
    flex-flow: column;
    flex: 1 200px;
    min-height: 450px; /* Change this to what you need. */
  }
  /* Need to force the width for the paragraph for some reason. */
  .content-container p {
    min-width: 300px !important;
  }
  /* Ground the CTA button. */
  .fusion-button-wrapper {
    flex: 1 100px;
    display: flex;
    align-items: flex-end; /* Ground the button . */
    justify-content: left; /* left | center | right */
  }
}

Vanilla Flexbox Example on CodePen

This solution is more elegant than the Avada one above. Instead of worrying so much about the button, I use flex: 1 for the middle content section. With that 1-line of CSS, the positioning of the button towards the bottom comes for free.

flex: 1 is shorthand for flex-grow of a factor of 1. I.e., take up all the remaining space by 1 factor.

Thanks to Angus for sharing this technique with me! :-)

Note: Please log in to your CodePen account to view if the pen doesn't show up at first.

Recognise the Anti-pattern [#]

I've seen the equal height columns issue come up enough times—hence this post. Learn to recognise the anti-pattern. Then, you can be a rock star by applying the design patterns I've shared above.

Share & enjoy!

Slow Page Refreshes Getting you Down? 3 Free Ways to Turbocharge your Dev Workflow with Browser Syncing

mark l chaves — Wed, 25 Dec 2019 15:21:25 +0000

Method 1 - Static Sites [#]

For straight up HTML, CSS, and JavaScript, I use Visual Studio (VS) Code with the Live Server extension by Ritwick Dey.

Install the Live Server extension. Bring up your VS Code workspace. Right click on your index.html (or any HTML file). Select "Open with Live Server." Pretty easy.

Method 2 - Jekyll [#]

Since December 2017 with Jekyll 3.7, you can run jekyll serve with the livereaload switch. It's that easy.

bundle exec jekyll serve --livereload

Done!

Method 3 - WordPress [#]

No lie. It's going to take a bit more work to set up a live browser refresh with WordPress. Btw, I'm running Local by Flywheel (no affiliation).

Two Main Requirements

Reload the browser on PHP and CSS file changes (we'll use Browsersync and Gulp for this)
Reload the browser when posts and pages are updated (we'll use Browsersync and the Trigger Browsersync plugin to handle this)

Browsersync

The critical tool for making all this magic happen is something called Browsersync. Browsersync's tag line is,

Time-saving synchronised browser testing.

I suspect this "testing tool" product positioning is the reason it was difficult for me to discover Browsersync. Just thinking out loud here. Maybe their SEO/SEM team should consider adding these keyword phrases.

Real time page loads
Real time page refreshes
Automatic page refresh
Automated development workflow
Live view

But, I digress. The main thing to remember is that WordPress is a dynamic site generator. That means we need to configure Browsersync to deal with this. We'll use Browsersync to run a proxy server for our dev site to handle the page refreshes.

Gulp - Watching our PHP and CSS Files

Gulp is a task runner. I've read that Gulp's architecture makes Gulp a faster alternative to Grunt (a Gulp competitor).

Here's my Gulp File

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;

gulp.task('serve', function () {
    // Standard call for dynamic sites.
    browserSync.init({
        proxy: "avada.local"
    });

    // Watch PHP and CSS files.
    gulp.watch("**/*.php").on("change", reload);
    gulp.watch("**/*.css").on("change", reload);
});

/**
 * Place this file in "Local Sites/YOURSITENAMEHERE"
 * Usage: gulp serve
 */

Trigger Browsersync WordPress Plugin - Watching our Pages & Posts Updates

Thank goodness we have the Trigger Browsersync WordPress plugin by Sami Greenbury. And, I love the way it piggy backs onto Browsersync (loose coupling).

You will need to follow the install instructions carefully. I did find a teeny bug (typo) that can be easily fixed. If you run into it too, then change "emssage" to "message" on line 275 in the trigger-browsersync.php file.

If you have any issues at all with the set up, I highly recommend turning on your PHP debugging and telling the Trigger Browsersync plugin to log events via a filter. See my snippet of the special mu-plugins/enable-trigger-browsersync.php file below.

<?php
add_action( 'plugins_loaded', function(){ // Trigger after the TriggerBrowsersync pluginhas loaded
    if ( class_exists( 'TriggerBrowsersync' ) ) { // Check the TriggerBrowsersync plugin loaded correctly
        // Add any configuration filters you may need here.

        // I'm going to turn on logging.
        add_filter('trigger_browsersync_log_events', '__return_true');

    // Activate the integration by creating an instance.
    new TriggerBrowsersync();
    }
} );

Need to read up on mu-plugins? Check the Codex.

Conclusion [#]

It's super easy and a no brainer to whip up a real time feed of your dev edits if you are using 1) VS Code for your static sites or 2) Jekyll for your SSG sites.

As you probably noticed, getting a live browser sync working in your WordPress dev environment is the most challenging of the three methods described. The good/great news is—it can be done! Which makes it worthwhile IMHO.

Another huge bonus is that all the tech mentioned in this article are absolutely free. Please remember to support your developers.

Lastly, be sure you are comfortable with Browsersync and Gulp if you attempt the WordPress method described above.

Give me a shout if you have any questions. Good luck and happy coding (sans manual page refreshes)!

The Staggered Layout Problem (Mobile Stacking Order)

mark l chaves — Mon, 02 Dec 2019 08:58:19 +0000

The Staggered Layout

Chances are you have seen the pervasive staggered layout (a.k.a., zigzag) at least once. Maybe you even use it on your own site or a site you've built for someone else.

Let's take a 2x2 example—two rows two columns:

The first row has an image on the left and its text content on the right.
The second row has text on the left and its image on the right.

Alternating images and text look nice. It breaks up slabs of words. This design makes content more digestible and appealing. Until you view it on a phone.

The Stacking Order Problem for Mobile Displays

Instead of neatly stacking:

First row image.
First row text.
Second row image.
Second row text.

as one expects, we get this image/text sandwich (anti-pattern) thingie:

First row image.
First row text.
Second row text.
Second row image.

Here's a visual of what I mean. Again, this gif demos what we don't want.

Just to Summarise

The gif shows us what we don't want: image > text > text > image.

What we do want is image > text > image > text.

One Attempt (Duplicating Content)

One way to solve this sandwich problem (in WordPress) is to make a copy of the second (alternating) row. Next, switch the columns in the new copy (image on the left—text on the right like the first row). Then for mobile widths, use WordPress theme visibility settings to:

Hide the desktop version of the alternating row. This is the staggered version.
Display the alternating row where we reversed columns. This is the extra stacked copy we created.

This definitely achieves our goal to have image > text > image > text stacking on a mobile.

You probably noticed—it's a bit of a hack. And, it creates confusion and duplicate content which means duplicate work. This is not so much an SEO issue.

The alternative solutions I see out there use CSS grid or flexbox to control display order on mobile devices. Way cool! I think. Why do they fix the mobile display second as an after thought?

A Little Ditty on Mobile First

Ok—hang on. I'd like to do one better. I want to make our solution mobile-first. Meaning, let's order things for the mobile display first, then rearrange things for wider displays. Not the other way around like the other solutions. This is a subtle yet important way of thinking.

Let's go!

The Solution (Vanilla, Gutenberg, Avada, Divi)

Vanilla HTML and CSS [#]

Vanilla HTML and CSS means it's agnostic. I.e., no dependencies on CMSs (CloudCannon, WordPress, Squarespace, Wix) or JavaScript libraries. This particular solution use CSS grid. It's a fully working demo that shows the before/after. Please pay close attention to how I reverse the order in this snippet.

/** 
 * Mobile First - The images are placed above the text by
 * default. 
 *
 * Only Re-order Columns for Larger Displays
 *
 * These two lines of code is where the rubber meets the road.
 * This only affects the second row where we will put the text
 * on the left and the image on the right.
 */
#section-h.grid div:nth-of-type(1) {
  order: 2; /* This is the image. Make it go to the right. */
}
#section-h.grid div:nth-of-type(2) {
  order: 1; /* This is the text. Make it go to the left. */
}

Here's the CodePen.

Note: Please log in to your CodePen account to view if the pen doesn't show up at first.

Gutenberg Block Editor [#]

Interjecting commentary: I admit. I was naive to assume Gutenberg had a nice built-in solution. Why doesn't it? It's the "new kid/latecomer" to the block (oops—no pun intended). Gutenberg has the advantage of looking at the weaknesses of all the other page builders. Oh well.

Let's take-on "The 'Berg".

Here's our Staggered Design in Gutenberg on a Large Display

Here's the Before/After on a Mobile

Grab the handle and slide right and left to see the before (sandwich) and after (no sandwich).

Here's the CSS

/** 
 * Fix the Staggered Problem for Mobile Stacking Order 
 *
 * This is a mobile-first approach.
 */
@media all and (min-width: 767px) {
  .reverse-row {
    display: flex !important;
    flex-flow: wrap;
    flex-direction: row-reverse;
  }
}

Here's Where I Added the CSS

Here's Where to Hook the CSS Into the Alternating Second Row

How to add CSS to WordPress.

Avada WordPress Theme [#]

Besides the obvious Fusion Builder classes, the CSS I used for my Avada solution is almost identical to the Gutenberg code. The main difference? I used an ID instead to specifically target the second (alternating) row.

CSS Used for Avada

/** 
 * Fix the Staggered Problem for Mobile Stacking Order 
 *
 * This is a mobile-first approach.
 */
@media all and (min-width: 767px) {
  #reverse-cols1 .fusion-builder-row.fusion-row {
    display: flex !important;
    flex-flow: wrap;
    flex-direction: row-reverse;
  }
}

Here's the Full Avada Solution on GitHub (with Screen Grabs)

Avada Solution

Divi WordPress Theme [#]

Last but not least. Below is an article I used to help me start solving the stacking order problem sans duplicate content. Jason Champagne shows how to solve the stacking sandwich problem both ways—with duplicate blocks and without (pure CSS).

I love this article. It's well worth the read even if you aren't using Divi. Bookmark it!

Divi Solution—See Option 2

Leave me a comment if you have any questions.

Share & enjoy!

2 Pragmatic CSS Animations You can do Right Now

mark l chaves — Mon, 25 Nov 2019 22:33:02 +0000

Intro

This is a quick how-to for creating two practical CSS animations.

Fade In
Slide Up

TL;DR show me the code

Motivation

There's a story of why I'm writing this minimalist how-to. I'm right in the middle of migrating my WordPress site to CloudCannon. That means I'm back to writing code instead of clicking lots of buttons and waiting for slow page refreshes. Yes, that's a good thing.

Anyway, I wanted to give my CloudCannon site some dynamic "umph". I wanted to use similar animations that my WordPress theme provides via button clicks—such as a simple fade in and slide up.

So, I needed to find the CSS code to do that. I went to my "usual suspects".

CSS-Tricks
CodePen
MDN
W3Schools
And even here on DEV

~~Surprisingly~~ Astonishingly, almost everything that came up was overkill—not practical. Needless to say, I didn't find one live demo of CSS code to do a fade in or a slide up.

No problem. Let's write some code.

The Code

Here's all I needed! This is freely available on CodePen. "Knock yourself out!"

Note: Please log in to your CodePen account to view if the pen doesn't show up at first.

1) Subtle Fade In

Here's the CSS (sans fancy styling) and HTML for the first fade-in from the CodePen above.

/* CSS */

/* Fade in Once for Three Seconds */
.fade-in-1 {
  animation: 3s 1 fadeIn; /* Do the Fade. */
}

/* The fading in part. Reused above. */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<!-- HTML -->

<h3 class="fade-in-1">Fade in Once for Three Seconds</h3>

The second fade in might be over the top. I added it for kicks to show that you can specify how many times to play the animation.

You can even let it run forever. But, let's not over do it.

2) Slide Up

There's more CSS here. Again, the CSS and HTML are stripped down—no fancy highlighting or alignment.

/* CSS */

/* Slide up Ease in Once for Three Seconds with Two Second Delay */
.slide-up-1-ease {
  opacity: 0; /* Be invisible first. */
  animation: 3s ease-in 2s 1 slideUp; /* Do the Slide. */
  /* This ensures that the item to be animated 
     is hidden at the beginning, then stays
     visible at the end (persists).*/
  animation-fill-mode: forwards;  
}

/* The sliding up part. Reused above. */
@keyframes slideUp{
  0% {
    opacity:0;
    transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

<!-- HTML -->

<h3 class="slide-up-1-ease">Slide up Ease in Once for Three Seconds with Two Second Delay</h3>

In the Wild

Subtle heading (h1) fade in on my People portfolio page.

References

CSS Animations on The Mozilla Developer Network (MDN)