boconnell
on
January 16, 2024

Extend classes/styles with Advanced Themer in Bricks Builder Part 2

Here is a summary of the video (definitely not from feeding the transcript to AI).

Greetings, everyone! Today, we’re diving into the exciting world of Advanced Themer and its seamless integration with Bricks Builder. Join me as we explore the features of extending classes and executing find-and-replace styles to give your website a polished and cohesive look.

To begin, make sure you have both Advanced Themer and Bricks Builder enabled on your site. Activate the ‘Find and Replace’ and ‘Extend Global Classes and Styles’ options for a robust styling experience.

Styling Uncharted Territory

Let’s start our styling adventure by addressing some unstyled cards on our website. By leveraging Advanced Themer, we can easily extend styles from one ID level card to others on the same DOM level, ensuring a consistent design across sibling cards.

Embracing BEM Methodology

Taking it up a notch, we’ll delve into the Block Element Modifier (BEM) methodology. Using the Class Converter, we exclude the button, erase ID styles, and copy the ID to classes. Now, our BEM classes are applied, providing a structured and organized styling approach.

However, a challenge arises when the ID styles still linger. To overcome this, we turn to the parent block, sending classes instead of styles. This extends the parent class to other blocks on the same level, resolving the issue.

Extending Global Classes

Ensuring uniformity across elements, we extend global classes to icons and other components within the same container. This powerful feature allows for efficient styling without the need for manual adjustments on each element.

Dynamic Class Switching

Imagine wanting to change a button class across multiple components. Advanced Themer simplifies this task by enabling us to extend classes globally. This not only streamlines the process but also maintains consistency throughout the entire website.

Find-and-Replace Magic

Advanced Themer’s find-and-replace functionality adds a touch of magic to our styling journey. We effortlessly replace specific styles, such as border radius, across the entire card component. This dynamic approach saves time and ensures a harmonious design.

A Final Flourish

As we wrap up our exploration, consider the possibilities of search and replace to dynamically modify components on the fly. Whether it’s adjusting button styles or fine-tuning border radii, Advanced Themer proves to be a valuable tool for maintaining a cohesive and visually appealing website.

In conclusion, embrace the power of Advanced Themer and Bricks Builder to elevate your website styling game. With features like class extension, global styling, and dynamic adjustments, achieving a polished and consistent design has never been easier. Happy styling!

Brendan O'Connell

Brendan is a longtime WordPress user and has built and managed hundreds of websites over the last decade.

Recent Posts

You're still here? Wow, dedication. Here are some of my latest ramblings.

I am a heading

If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.

  • This is a list item.
  • This is a list item.
  • This is a list item.

No spam, ever.