Styles & Classes
Manage your Styles and Classes like a Pro
We all know that the Bricks class management system can benefit from some improvements, and while Thomas and the team put their efforts into it, let's tell you about the features offered by Advanced Themer! These include importing classes from any CSS stylesheet, extending your classes and styles based on existing element configurations, searching and replacing any style value within the builder, arranging your classes alphabetically, a full-screen CSS editor on steroids, an easy-to-use class modal for changing element classes on the go, and much more!
WPCodeBox integration
WPCodeBox is a powerful style and script organizer, highly popular in the Bricks community. However, one crucial feature was missing for full Bricks compatibility: the ability to edit CSS, SASS, and partials directly within the builder and see live changes without refreshing the page. With this new integration, you get a seamless, fully integrated workflow — all without ever leaving the builder!
Contextual Class Menu
Advanced Themer provides a variety of functions to enhance your classes and styles capabilities within the Builder. Previously, these functions were scattered all over, with numerous icons cluttering the UX. Now, this feature consolidates them into a single, convenient contextual menu.
SASS integration for Advanced CSS & SuperPower CSS
Have you ever pondered the idea of integrating SASS into your Bricks experience? Well, wonder no more! With Advanced Themer, you can bring the power of SASS directly inside the Builder, opening up a world of endless possibilities and creative expression right at your fingertips.
Class Manager
We finally have it! This game-changer will allow you to easily manage your global classes. It includes advanced filtering options (classes active on the page, filter by lock status, or if they contain styles in it), and functions such as add/edit/rename/reorder/duplicate/delete classes. You can even drop Custom CSS declarations inside the class and check the generated code on frontend by Bricks.
Group your Classes by Categories
Should you find yourself utilizing a large number of classes, it can potentially lead to clutter over time. With Advanced Themer, you're provided with the opportunity to organize your classes into distinct categories for more streamlined management and effective filtering.
Generate CSS with AI
In instances where you need some assistance and want to save time, artificial intelligence comes in handy! Advanced Themer allows you to instantly produce AI-driven CSS code directly in the class manager and target your root element efficiently.
Bulk Actions on Classes
Seeking a method for quickly renaming, duplicating, grouping, or even deleting multiple classes? Fear not. The bulk actions feature caters to your needs without inducing tedious manual procedures, thereby functioning as a quick and efficient instrument for managing multiple classes all together with easiness and accuracy.
Style Overview
This feature enhances your ability to easily review/add/edit/delete all active styles linked to the current element's ID, as well as its corresponding classes across all breakpoints and pseudo-elements.
Review the CSS generated by Bricks for each Element and Classes
It can be handy to review which CSS styles are produced by Bricks on the frontend. The Style Overview function is now able to quickly list all the CSS declarations linked to an element as well as all the classes connected to that element.
Class Converter
With this powerful tool, you can effortlessly transform the ID styles of an entire component (including its multiple children) into easily customizable classes, all with just a few clicks of a button! Since 2.4, the class converter supports nested Class Components and can be ran multiple times to update existing classes with new ID styles.
Style indicators for the left panel and the pseudo elements shortcuts
You know that layout style tab? If an element has custom values set up within that group (or any other group!), a small indicator will appear in the left panel shortcuts. How cool is that? With this neat function, you can easily see which styles are set up on the element - without even browsing your style tabs. This feature even works with styles applied on pseudo-elements such as hover, before and after!
Style & classes indicators inside the structure panel
Once you enable the option within your theme settings, you’ll be able to easily identify which elements in your structure panel have custom styles applied on the ID level and which ones have global classes. Just look for the small indicators, and you’ll never have to search for them again.
Breakpoint Indicators
This function will display a device icon beside the style group that includes personalized settings, enabling swift identification of breakpoints with custom styles for quick and effortless navigation among them.
Indicators of styles inherited from a class
After activating this particular feature, you will notice a fresh blue dot appearing alongside any control that has already been styled through a class. This will provide you with a comprehensive understanding of which value has been styled on the ID level and which one has been styled through a class.
Extend your classes & styles from any element
When you want to apply style changes to multiple elements in Bricks, you either have to duplicate each element (and adjust the content for each) or copy/paste classes and styles manually. But now, Advanced Themer brings in an "Extend" feature that allows you to apply styles and classes from a specific element to multiple targets swiftly.
Advanced CSS Editor
We know it can be a bit bothersome dealing with such limited space for custom CSS in bricks, particularly when you've grown fond of using tools such as VS Code or similar. That's why we came up with a full-width advanced CSS Editor that boasts some great features, such as autocomplete CSS properties (including variables), AI assistant, autoclose brackets, search, lints, and so much more.
Export ID Styles to any Class
Another HUGE time-saver! Don't you often begin styling on the ID level and then realize it should be on a dedicated class? This handy feature enables you to create a new class (or update an existing one), transfer all your ID styles to it, and reset the styles on the ID element with just one simple action.
Plain Classes Manager
Recently, Bricks introduced an awesome new feature allowing us to add multiple classes all at once! Unfortunately, it's not perfect yet – you still can't delete or replace a bunch of classes in one go. No worries, though! The Plain classes manager comes to the rescue, complete with auto-completion to suggest existing classes while you type.
Class Importer
If you're an experienced developer looking to incorporate your own custom classes within the builder, you're in luck - it's now a breeze. All you have to do is upload your Stylesheet into the theme options. Advanced Themer will take care of the rest, automatically enqueuing, parsing, and including all the classes in the bricks global classes list.
Cleanup deleted global classes from the elements
Clean up deleted global class IDs attached to your elements! This optional feature allows you to remove outdated class IDs that are no longer in use, providing a cleaner and more organized element structure. By default, this cleanup is disabled, giving you control over whether to keep or remove class IDs, especially when testing different utility classes. This option ensures your elements stay streamlined without accidentally losing important data.
Merge Global Classes
Have you found yourself creating numerous global classes on an element, each with its own style? Now, rather than getting lost in an endless copy/paste process, you can merge all existing styles into a single, well-organized class with just one click! The merge global class feature centralizes styles from all active global classes into a newly created global class of your choice, eliminating the need for copy/paste.
Copy/Paste/Reset all the global classes from one element to another
Do you find yourself repeatedly using utility classes and typing them out each time? Put an end to the repetition! This enhancement enables you to easily copy all the global classes from one element and paste them onto any other element within your structure. Need to remove them all? The reset button is right at your fingertips!
More used classes suggestion & group filter
A new set of suggested classes are shown at the bottom of the plain class modal - sorted by the number of time they’ve been used on the current page. A new "Group" filter has also been added to suggest classes by any group assigned inside the Class Manager.
Style Overview Shortcut
This new shortcut will show up when a global class is active and will allow you to open the class manager with the current global class already selected and ready to be modified using the advanced tools integrated within the Class Manager.
Class Manager Shortcut
This new shortcut will show up when a global class is active and will allow you to open the class manager with the current global class already selected and ready to be modified using the advanced tools integrated within the Class Manager.
Component Class Manager
This is like the Global Class Manager but applied to a selected element in the structure panel - so you don't have to browse your classes anymore to fix a component. Just select an element and open the Component Class Manager to easily manage the classes assigned to that specific element and all his children.
Autoformat your control values with advanced CSS functions
Want to quickly generate a fluid clamp function? Or convert a pixel value to REM on the fly? This is now super easy to do with our autoformat functions. It supports clamp(), calc(), min(), max(), var(), autoclose variable brackets and pixel to REM converter.
Import your Custom CSS from each element to your Global CSS
If you're looking for a way to regroup all your Custom CSS declared in each element into the Advanced CSS panel, you're now able to do that with one click!
Autogenerate your CSS declarations
Want to style an entire component using Custom CSS? That's super easy with this new feature. Just click on a button inside the Advanced CSS Panel, and the script will generate all your CSS declarations for you - including all the media queries based on your active breakpoint.
Extract your classes from the Advanced CSS and save them as Bricks Global Classes
Get the best of both worlds! Simply write down all your custom CSS inside the Advanced CSS panel. Then, with a simple click, extract all the classes from the CSS declarations and import them as Global Classes in Bricks - so you can easily reuse them inside the Builder.
Save your Global CSS from the builder
You are now able to add/edit/remove your global CSS declarations inside the Advanced CSS panel and save them without leaving the builder!
Group classes by Lock Status
When employing utility classes, you may prefer to have the locked classes appear at the top of the class dropdown, as opposed to the element-specific classes that you may not find much reuse for. With this functionality activated, the arrangement of classes in the dropdown will be determined by their "lock" status.
Autoselect the first unlocked class
If you set a class to your element, chances are you want to style this class by default instead of the ID. This feature will ensure that the first unlocked class of the element gets automatically activated when browsing your elements.
Auto-close CSS Variable Brackets
If you're manually typing CSS variables inside the builder's inputs, you're potentially at risk of creating a styling mess if you forget to close a bracket. With this function enabled, AT will make sure that your CSS variable is correctly formatted.
“Class Highlight” indicator in the structure panel
This feature highlights with a blue outline the elements sharing the same class inside the structure panel. It efficiently allows you to verify at a glance which element in your structure possesses a particular class.
Locked Class Indicator
A.T. will thoughtfully incorporate a green background for all the editable classes and a red background for all the locked classes. This visually appealing and intuitive modification enables you to easily identify the classes you can edit on the fly, thereby enhancing your user experience.
Clone any class
Clone any class quickly and easily, hassle-free, with just two clicks inside the builder. The newly-created class will include all the styles related to the previous one, making it super convenient.
Copy class to clipboard
With just one click, effortlessly copy the name of any global class to your clipboard and seamlessly paste it onto any other element hassle-free.
Find & Replace any Style value
When dealing with CSS variables, we know how tricky it can become when you choose to alter a variable's name and chaos breaks loose. Advanced Themer comes to the rescue with its nifty "find and replace" feature, making it a breeze to globally switch out any CSS value on your page.
Responsive Grids utility classes
Easily craft CSS Grids with a smile: simply select the maximum column count on larger screens, pick the minimum width for each column, and decide the spacing in between. Advanced Themer will create a custom class that can be used right inside the builder.
Reorder your Classes inside the Bricks Popup
This small enhancement can lead to a huge boost in efficiency. No more wasted time trying to find the class you need! When you enable this feature, Advanced Themer will automatically sort your classes in alphabetical order. Trust me, managing classes is so much simpler when they're neatly organized.
Lock Styles on element ID level
We all know that styling on the ID level isn't recommended. But let's be honest, how often do we forget to create a class and start tinkering with the ID's style? Activating this feature will disable styling at the ID level, encouraging you to create a class to access the style panel. Voila!
Autocomplete support for Multiple Classes
The Bricks team has made a positive move by incorporating "multiple classes in bulk" support. Regrettably, this causes the class suggestion popup to break after the first class. When you use our Plain class modal, you'll get a suggestion popup (with autocomplete support) for each class you enter.
Reorder/Update/Remove/Reset classes in bulk
Check out this fresh addition to the Plain class modal! It doesn't just let you create new classes in bulk, you can update, remove, and even reset multiple classes at once, too. Just apply the changes to any class in the popup, and watch your class list refresh right before your eyes!
Highlight all the elements that share a same class
Discover how easy it is to see which elements have the same class! Simply click on any class within the builder, just like when you're applying styles. You'll soon notice a blue outline surrounding all the elements with that specific class.
Class counter & navigator
This new feature displays a handy class counter icon right next to your active class name. It lets you see the total number of times that particular class has been used on the current page. If you give that icon a click, it zips you through all the elements that share the same class like magic!