aurooba / twentytwentyone-child

A Twenty Twenty One child theme

Hallo! I'm Aurooba 👋🏽

(she/her)

Thanks for stopping by!

Quick facts

• software developer with a decade of experience building digital experiences
• WordPress Core Contributor and plugin author
• Cohost of the viewSource podcast and show
• Content Creator (I recently published a mini course!)
• Bookworm living in the 🇨🇦 Rockies

Blog · YouTube · Fediverse · Twitter X

🗓️ Have something you'd like to chat about? Let's have a conversation. Schedule a chat with me.

Some fun things I've made recently

• 🔍 The WordPress Core Blocks Explorer
• ➕ QuickPost
• 📖 JavaScript Essentials for WordPress Devs
• 🤫 a super secret project coming soon!

twentytwentyone-child's Issues

Lesson 3 with child theme - custom palette needs `!important`

Lesson 3 branch custom CSS colors do not work as they exist. Due to TwentyTwentyOne's CSS targeting of background-color and color the front end CSS does not work. One must add !important to the @each loop to truly override the colors.

Before:

@each $colour in $palette {
  .has-#{nth($colour, 1)}-background-color {
    background: nth($colour, 2);
  }
  .has-#{nth($colour, 1)}-color {
    color:nth($colour, 2);
  }
}

Recommeded:

@each $colour in $palette {
  .has-#{nth($colour, 1)}-background-color {
    background: nth($colour, 2) !important;
  }
  .has-#{nth($colour, 1)}-color {
    color:nth($colour, 2) !important;
  }
}