🎨 How I Customized My Team Section in Astra Theme Using a Child Theme

By /

When building a WordPress site with the Astra theme, using a child theme is the safest and smartest way to customize your design—especially when working with third-party plugins like a Team Members plugin. Recently, I made a few subtle but effective design changes that helped my team section stand out. Here’s how I did it using custom CSS in my child theme.

🧱 The Setup

I’m using the Astra theme with a Team Members plugin that displays profiles inside styled blocks. Astra is great for performance and flexibility, but to preserve custom styles across updates, I work within a child theme. That means I edit the style.css file from Appearance > Theme File Editor > Astra Child.

✏️ The Custom CSS I Added

Here are the exact styles I applied to make the team section look clean, fresh, and slightly playful:

.tmm_textblock {
	background-color: lightblue;
	border-radius: 30%;
}

.tmm {
	background-color: whitesmoke;
}

Let’s break that down:

  • .tmm_textblock: This class wraps the actual text content in the team block. I used lightblue as a background to give it a calm, friendly tone. The border-radius: 30% softens the edges, giving it a semi-rounded, bubble-like appearance.
  • .tmm: This is the outer container for the team member card. I set its background to whitesmoke, which adds a gentle contrast and a bit of breathing space without overwhelming the content.

đź’ˇ Why Use a Child Theme?

When you customize CSS directly in the main Astra theme, updates can overwrite your changes. A child theme protects your edits and lets you:

  • Add custom CSS
  • Override templates
  • Tweak plugin output with ease

To create or edit your child theme:

  1. Go to Appearance > Theme File Editor
  2. Choose Astra Child
  3. Open style.css
  4. Paste in your custom styles and save

🛠️ Final Touches

Want to push it further? You can add:

.tmm_textblock {
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

This will make the block more polished with padding, subtle shadows, and centered text.

🚀 Wrapping Up

Customizing your team section using a child theme in Astra is a smooth process, and even small touches like border-radius and soft backgrounds can make a big difference. If you’re using a Team plugin and want your site to feel more personal and modern, try playing around with these CSS snippets. It’s all about finding the balance that fits your brand’s vibe.

Need help tweaking other parts of Astra or customizing plugin output? Drop your questions in the comments or reach out—I’d be happy to help!

Scroll to Top