Some leftover CSS was conflicting with the button styles within the builder.
Changelogs
Release 3.1.3
This hotfix release solves a CSS conflict within the builder.
HOTFIX: CSS conflict on buttons within the builder
Release 3.1.2
This is a hotfix for the 3.1.1 release.
HOTFIX: Color Palettes created with AT and with a custom prefix set in the Theme Settings missed a correct separator in the variable definition on the frontend.
This issue could potentially break your colors on the frontend.
Release 3.1.1
This version fixes bugs from the recent 3.1 release and brings several improvements to existing functions.
Global Class Manager: new “Find & Replace” option within the bulk action tab
In this version, a new “Find & Replace” bulk action has been added to the Class Manager.
It lets you search for any string used as a value—whether in control settings or custom CSS—within your global classes. This is especially useful when you need to update a variable prefix across multiple classes.
Global Class Manager: splitted the class overview data and the custom css editors for improved performance
When clicking on a class inside the Class Manager of AT, you now have two different tabs: Class overview and Custom CSS. This improves performance and leaves more room for both the overview data and the CSS editors.
Global Color Manager: manage the variable prefix for each palette separatly
You can now set a custom prefix to any palette created inside the Global Color Manager of AT.
ATF now supports custom prefix for all the variables, classes and colors
You can now add a custom prefix to all variables, global classes, and global colors used throughout ATF.
However, think carefully before using this feature — if you plan to work with compatible design kits in the future, custom prefixes could lead to conflicts or unexpected issues. It’s strongly recommended to leave the default “at-” prefix and call it a day!
ATF: removed the Misc class category and moved .clickable-box to the Accessibility category
The .clickable-box utility class of ATF has been recategorized in “Accessibily”.
ATF: added “h2” as default heading HTML tag
H2 is now the default HMTL tag when adding a heading element to the structure.
Imported Advanced CSS stylesheets through the theme settings > import function now automatically recompile and generate the CSS files
Before this release, importing Advanced CSS stylesheets required a manual step to recompile the files and generate the corresponding CSS files. Now, all the Advanced CSS stylesheets imported within the Theme Settings are automatically recompiled, and the CSS gets generated on the fly.
ATF: Replaced at-link-cover–hover in at-link-color–hover
A typo was present in ATF: at-link-cover–hover has been replaced in at-link-color–hover.
ATF replace “outline-style: auto” to “outline-style: solid” all over the framework
Due to recent Chrome changes, we changed the outline-style from “auto” to “solid” throughout the entire framework.
Transform all “select” controls into Comboboxes was running by default and couldn’t be disabled
The new builder tweak “Transform all select controls into Comboboxes” was on by default and there was no way to turn it off.
Potential PHP error when converting the clamp settings variables
In some rare cases, a PHP error could be generated while saving the clamp settings into the Variable Manager of Bricks.
Autofocus on search inputs wasn’t working anymore on all AT modals
When opening any AT modal, the search input field wasn’t being autofocused anymore.
Classes created by the Class Importer weren’t working correctly anymore
Since 3.1, the classes generated by “Imported Classes” weren’t enqueued correctly anymore.
Error when importing Advanced CSS stylesheets throught the theme settings > import function
A PHP error was kicking in while importing Advanced CSS global styles & child Theme styles.
Release 3.1
This release introduces some of the most powerful tools we’ve ever shipped—designed to streamline your workflow, optimize performance, and give you full control over your design system. Here is a highlight of the most impactful features of 3.1:
AT CSS Framework
Introducing the AT CSS Framework – a lightweight, flexible CSS system built for speed and control. It sets up in seconds with zero dependencies, integrates natively with Bricks, and loads only the utilities you use. Built on CSS variables and BEM-friendly conventions, it’s transparent, fully customizable, and exportable for any project.
Track Where a Class Is Used
You can now instantly view every post, page, template, or component where a specific class is applied. Just one click takes you straight to the relevant content, so you can manage and maintain your styles with ease.
Find & Manage Unused Global Classes
Keep your codebase lean by identifying global classes that aren’t used anywhere on your site. Delete unused styles in seconds and enjoy a cleaner, more efficient builder experience.
Custom Fluid Scales
Generate entire fluid scales in one click within the Variable Manager. Whether you’re working with spacing, typography, or sizing, you can define the number of steps, rename variables, and adjust multipliers—perfect for creating consistent, scalable design systems.
Sticky CSS
A persistent CSS editor that stays visible while navigating elements and classes in the Structure Panel. No more jumping to the Custom CSS tab—edit styles instantly, view generated CSS, and enjoy all the SuperPowerCSS enhancements in one seamless interface.
Export View in Color Manager
A new “Export View” in the Color Manager lets you see all color-related CSS declarations generated by AT. Easily copy and reuse the code elsewhere, even if you deactivate the plugin.
Smarter CSS Variable Picker
The CSS Variable Picker now adapts to the context. It automatically shows the most relevant variable categories depending on which CSS property you’re editing—making it faster and easier to pick the right value.
Logical Properties Converter
A new global converter in Theme Settings transforms all directional styles into logical CSS properties. It scans elements, templates, and global classes, bringing your styles up to modern CSS standards with one click.
Remove All Styling Controls
If you’re a CSS-savvy developer who prefers writing styles manually, this feature is for you. Once enabled, it removes all styling controls from the Bricks builder, leaving only the content and custom CSS tabs. No more distractions—just clean, focused control.
Major Performance Refactoring
This release also includes a major codebase refactor aimed at improving builder performance, particularly in response to rendering issues introduced by the latest Chrome update. Modals are now loaded only when needed, reducing DOM overhead and speeding up interaction across the board.
20 Bug Fixes
This update addresses a wide range of issues reported in previous versions. Combined with the new features and enhancements, it delivers a smoother, more stable experience throughout the entire workflow.
Check it out today and experience the difference!
AT CSS Framework
Introducing the AT CSS Framework – a lightweight, flexible CSS system built for speed and full control. It sets up in seconds with zero dependencies and can be customized or exported for any project. Fully integrated with Bricks, it uses native functions and conditional loading to stay efficient. All settings are editable directly in the builder, with optional AT managers for added convenience. Built on CSS variables and BEM-friendly, it’s transparent, bloat-free, and entirely yours to modify.
Sticky CSS
Ever wish you had a powerful CSS editor always at your fingertips while browsing elements and classes in the Structure Panel—without constantly jumping to the Custom CSS tab? That’s exactly what Sticky CSS offers. It stays visible as you work, includes all the enhancements from SuperPowerCSS, and can even display the generated CSS for each Bricks element.
List all the posts/pages/templates/components where the active class is used
List & Manage Unused Global Classes across your whole website
This feature empowers you to easily identify and handle global classes that aren’t being utilized across your website. With just a few clicks, you can pinpoint these unused classes and choose to delete them, ensuring a leaner and more efficient codebase without impacting your frontend. This optimization not only increases your site’s performance but also simplifies maintenance, allowing you to focus on the global classes that truly matter.
Create Custom Fluid Scales within the Variable Manager
Creating static and clamp values in the Variable Manager is already convenient, but what if I told you that you could generate an entire scale with just a click? That’s exactly what this feature does! You can create custom fluid scales for any category – spacing, typography, sizes, or more. Adjust the number of variables to suit your needs, rename any variable, and customize the multiplier for each step. This scale generator is one of the most powerful tools on the market, yet it is super easy to use!
Remove All Styling Controls
Are you a CSS expert who finds the Bricks styling controls getting in the way? Wish you could just have the Custom CSS control to style your elements? This feature is for you! Once enabled, all the styling controls will be removed from the builder, leaving only the content and custom CSS controls. If you’re comfortable working with CSS, this feature will boost your productivity by focusing only on the controls that matter to you!
Sync Heading Text with Element Label
Class Manager: moved the grid utility classes within the Class Manager
The grid utility classes are now fully integrated into the builder via the Class Manager. By clicking the corresponding menu, you can manage all your grid utility classes directly within the builder. Any changes made are instantly compiled without the need to refresh your browser.
Class Manager: Grid Utility Classes are now using native Bricks Global Classes
All custom CSS related to the responsive grid classes is contained within the Custom CSS control of each global class. This means AT no longer needs to output any custom code, as Bricks handles everything. These classes are now conditionally loaded on each page when required and will function fully even if you choose to deactivate AT.
Class Manager: new “Modify” section where you can bulk convert your classes to logical properties
A new ‘Modify’ option has been added to the bulk actions menu in the Class Manager of AT. This feature allows you to bulk-convert the directional styles of your global classes into logical properties with ease.
Class Manager: new “Restore” section where you can restore global classes in buk from the trash
A new ‘Restore’ option has been added to the bulk actions menu in the Class Manager of AT. This feature allows you to bulk-restore the global classes sitting in the Trash category.
Class Manager: new “Permadelete” section where you can permanently delete global classes in buk from the trash
A new ‘Permadelete’ option has been added to the bulk actions menu in the Class Manager of AT. This feature allows you to permanently bulk-delete the global classes sitting inside the Trash category.
CSS Variable Manager: Contextual Categories Generator
Generate all the relevant CSS variable categories within the Variable Manager with a single click! Each category will be automatically suggested in the CSS Variable Picker based on the control you’re editing. Simply populate the categories with your own variables, and you’re all set!
CSS Variable Manager: Categories can now be reordered by drag and drop
You can now easily reorder categories in the CSS Variable Manager by simply dragging and dropping them into your desired position.
CSS Variable Manager: Moved the clamp settings within the Variable Manager
Advanced Themer uses four CSS variables to manage clamp functions: --min-viewport
, --max-viewport
, --base-font
, and --unit-clamp
. Previously, these variables were enqueued by the plugin, creating a dependency that prevented deactivating the plugin without losing styles. Now, they have been migrated and integrated into the CSS Variable Manager, eliminating this limitation. As a result, the corresponding options in the Theme Settings have been deprecated.
CSS Variable Manager: New “Color” variable type
A new Color type is now available for variables in the AT Variable Manager, featuring a handy color picker for quick selection and editing.
CSS Variable Picker: Contextual categories opened based on the selected control
You can now customize your variable picker to automatically open the most relevant categories based on the CSS category of the control. For example, opening the variable picker in the margin controls will suggest spacing variables, while opening it in the typography controls will show font variables on top of the modal.
CSS Variable Picker: Color Variables in the CSS Variable Manager are now synched inside the Picker
All variables set as Colors in the AT Variable Manager are now automatically displayed in the Variable Picker, neatly organized by the categories you’ve created.
Filterable Structure: new dropdown to select the property you want to filter
You can now filter the structure panel by one of these specific categories: Name, Label, HTML Tag, Global Class, CSS Class, Text Content, CSS ID, Bricks ID, or data-attribute.
Filterable Structure: added the “data-attribute” filter
You can now look after a specific data-attribute using the filterable structure feature.
Style & Class indicators in Structure Panel: refactored for better performance on Chrome browsers
The Style & Class indicators in the Structure Panel have been completely rewritten for improved performance — especially to address rendering issues with :before
and :after
elements introduced in the latest Chrome update.
Quick Search: added keyboard shortcuts
New keyboard shortcuts are now available inside the Quick Search modal.
Quick Search: filtered category are persistent when reopening the modal
When you manually filter the Quick Search modal by a specific category, the filter remains active even after closing the modal. To remove it, you’ll need to disable the filter manually.
Color Manager: new “Export” functions & Sync with the CSS Variable Manager
A new “Show Generated CSS” view is now available in the Color Manager. This view provides an editor displaying all CSS declarations related to colors generated by AT. It’s especially useful if you ever need to deactivate AT but want to keep your generated colors. Simply copy the CSS code and paste it into Bricks’ global.css to retain your styles.
Color Manager: new Palette Menu
A new contextual menu has been added to the Color Manager, replacing the header icons to free up space and make room for future features.
Color Manager: Header UX refactored
The icons that appeared on hover in the Color Manager header are gone — everything is now always visible. The dropdown has been redesigned to include toggles for enabling or disabling each palette, as well as a quick option to set your default palette.
Color Picker: list static colors
In the initial release, the Color Picker only displayed colors generated by CSS variables. Now, it also includes default Bricks colors that use static values, such as HEX, RGBA, or HSLA, within the modal.
Color Picker: list all type of palettes
In the initial release, only color palettes containing colors generated by AT were displayed. Now, the Color Picker lists all your palettes.
Logical Properties: new global converter for elements on posts/pages/templates/components & global classes
A global ‘Logical Properties’ converter is now available in Theme Settings. With a single click, you can convert all your directional styles applied to elements and global classes. The converter will scan all elements across posts, pages, templates, components, and global classes.
Logical Properties: Automatically converts logical properties when importing templates from Quick Remote Template
When the “logical properties” feature is enabled, the Quick Remote Template from AT will automatically convert directional styles to logical properties across all imported elements. This conversion is fully compatible with any external source, including Frames, Bricksmaven, and custom remote libraries.
Logical Properties: new option to convert your styles to logical properties within the Class Contextual Menu
You can now convert an element’s directional styles to logical properties with a single click using the converter in the Class Contextual Menu.
Quick Remote Template: New topbar shortcut icon
You can now add an icon to the topbar for instant access to the Quick Remote Template modal, bypassing the AT main menu.
Darkmode toggles and buttons are now compatible with ACSS Alternate color scheme & Frames color toggles
All the darkmode toggles and buttons (nestable or not) are now compatible with both ACSS and Frames.
Animation Timeline: new option to enqueue the scroll/view timeline polyfill script
This new polyfill option allows you to run the scroll() and view() functions on browsers that don’t yet support the animation timelines.
Page Transition: all the inline styles are now linked to the ‘brxc-page-transition’ style
In the initial release, the inline styles related to the page transition were generated on the main file of AT. They are now linked to the specific page transition CSS file, so dequeuing the main AT file won’t impact the page transitions anymore.
Added display:none as inline style on all the darkmode elements to avoid layout shift on a cached environment
Some cache plugins may delay the loading of CSS declarations for dark mode toggles and buttons, causing a layout shift on page load due to the input not being hidden in time. To prevent this issue, an inline display: none
is applied to each dark mode input.
All modals: conditional mounting on user interaction
To improve performance, all modals generated by AT are no longer loaded on page load. Instead, they are now dynamically mounted only when explicitly opened. This significantly reduces the amount of HTML in the DOM and enhances overall builder performance — especially with the latest version of Chrome.
Quick Remote Templates: Top bar wasn’t scrollable on wider screens
If you have multiple remote template sources, you may encounter an issue where some become unselectable due to the top bar not being scrollable on wider screens.
Style Overview: structure list jumped on top on each mount
Jumping between different elements in the Style Overview modal previously caused the Structure list to scroll back to the top. Now, the scroll position is preserved when switching elements within the Structure Panel.
Style Overview: Global Classes with empty styles weren’t showing
The global classes with no styles applied weren’t correctly displayed within the Style Overview modal, making it impossible to transfer breakpoint styles between other classes or from the ID level.
Color Picker: opening/closing accordeons could “loose” the event listener
Toggling the color palette’s dropdowns within the Color Picker could cause the input to lose focus, and thus, the selected variable wasn’t correctly applied to the builder.
CSS Variable Picker: popup controls was closing down when clicking a variable
Bricks controls using a popup (such as border, box-shadow, etc) were incorrectly closed when selecting a variable from the CSS Variable Picker.
PHP warning when exporting/importing custom Advanced CSS Partials/Custom Stylesheets
Exporting/importing partials or custom stylesheets from Advanced CSS using the global Import/Export function of AT could generate a PHP warning.
Theme Styles weren’t correctly imported
A typo in the code prevented the Theme Styles from being correctly imported when using the Global import function.
Full-size window on code element wasn’t scrollable on Firefox
On Firefox, the full-sized editor applied to the code elements wasn’t scrollable when the code was larger than the window.
Unselectable global query loop
In some cases, the global query loop selector conflicts with third-party plugins, making the item unselectable within the dropdown.
Global Page Transitions were applying on admin pages
The admin pages have been excluded from the global page animations. They’re now running only on the frontend.
CSS Variable Manager: Deleting a category wasn’t targeting the correct item
When deleting a custom category in the CSS Variable Manager, the action wasn’t targeting the correct item, causing unexpected behavior.
Global Color Variables Reinitialized
Global color variables were being reinitialized despite the corresponding tab in the Theme Settings being disabled. That could cause some color variables to be improperly renamed on builder load.
UTF-8 Characters in SuperPowerCSS
Using UTF-8 characters in SuperPowerCSS would trigger an unnecessary @charset
declaration during the Sass compilation process.
Hidden Settings in AT Main Menu
Strict Editor View, Quick Edits, and Builder Tweaks were still visible in the AT Main Menu, even when the corresponding tabs were disabled in the Theme Settings.
AT Main Menu Visibility in Builder’s Topbar
Disabling the Builder Tweaks category in Theme Settings did not remove the AT Main Menu from the builder’s top bar as expected. This issue has now been resolved.
Stripped HTML tags in Advanced CSS
HTML tags such as <svg>
were getting stripped in the Advanced CSS editor, causing background: url('data:image/svg+xml;utf8',…)
to not work correctly.
Conditions/Interactions icons had limited clickable surface
Previously, the Conditions and Interactions icons in the element panel were only clickable on their SVG paths. Now, the entire block is clickable for improved accessibility and ease of use.
Variable Picker didn’t load the Core Framework typography/spacing variables correctly anymore
A recent change in the Core Framework’s data structure caused typography and spacing variables to be displayed incorrectly within the Variable Picker.
Quick Remote Template: hitting ESCAPE wasn’t closing the modal correctly.
Pressing the ESCAPE key while the Quick Remote Template modal was active caused an error and prevented the modal from closing as expected.
The “Active on Page” filter wasn’t working anymore within the Class Manager > Bulk Actions
In the AT Class Manager, the “Active on Page” filter within bulk actions was not properly identifying and filtering classes actively used on the current page.
Release 3.0.5
This release primarily addresses issues introduced since v3.0.
Page Transition: removed the JavaScript code – the code is 100% vanilla CSS
Page transitions are now entirely CSS-based, with no JavaScript added to the code.
Page Transition: removed the target control in the page settings
The “target” control has been removed from the Page Transition settings within the Page settings.
Page Transition: removed the wrapper control in the element settings
The “wrapper” control has been removed from the Page Transitions options within the Element settings. The unique ID is now calculated by pretending the post ID in a query loop context.
Page Transition: removed the need to activate page transition in the page settings when an element contains a transition name
Previously, you needed to activate the Page Transition on the page level to add element transitions. This is not required anymore – you can simply set your element transitions without activating the page-level transitions.
Left tab shortcut: added new animation tab
A new “animation” icon is now available within the left tab shortcuts.
Filterable Structure: added HTML tags as filterable keywords
You can now filter your Structure Panel by HTML tag. Digiting “div” or “span” will return all the elements that use this tag on the current page.
AI in SuperPowerCSS was mounting even if no API key was set in the Theme Settings
The AI functions within the SuperPowerCSS controls were displayed even without a proper API key set in the Theme Settings, leading to potential errors when processing requests.
Style Overview: toggling off the structure list would mess with the layout
Hiding the Structure List inside the Style Overview Modal could break the full-width design.
Nested Elements: convert to component wasn’t working correctly
Converting a Nested Element to a Bricks component from the Nested Element Library did not work as expected, rendering the resulting component uneditable in the builder.
Nested Elements: layout issue in categories with few elements
In the Nested Element Library, custom categories with only a few nested elements displayed oversized elements that did not adhere to the grid layout.
Global Transitions wasn’t applying on post with gutenberg blocks
The CSS declarations for Global Page Transitions were not enqueued on pages using Gutenberg blocks, such as blog posts.
Typo in the global page transition keyframes declarations
A typo in the CSS declarations for Global Page Transitions prevented custom keyframes from being applied to the new and old animations.
Release 3.0.4
This version mostly fixes issues raised from 3.0.
Class & Style indicators added to the Structure list within Style Overview
The Style Overview modal’s structure list displays Class and Style indicators for each element.
Class Converter: new class indicators
A new dot now appears next to each class input in the Class Converter modal, indicating potential conflicts:
Red: The class already exists in the database, potentially affecting other elements beyond those being converted.
Green: The class name doesn’t exist yet, ensuring no conflicts.
Orange: The class name isn’t in the database but appears multiple times in the Class Converter Preview.
The breakpoint slider is now a separate tweak from the Responsive Helper
The Responsive Helper and Breakpoint Slider are now separate tweaks that can be enabled independently in the Theme Settings:
Breakpoint Slider lets you seamlessly slide between different breakpoints for easier responsiveness testing.
Responsive Helper unlocks 2-click options on breakpoint devices, allowing you to check the minimum and maximum values of each breakpoint in real-time.
SVG applied to button icons weren’t correctly saved when SVG was set as the default library for Icons
The “Set SVG as Default Library for Icons” tweak conflicted with other elements and controls that used icons, causing the setting to be ineffective when selected.
Filtered Structure Panel wasn’t showing the collapsed elements
When filtering the Structure Panel with a keyword present in a collapsed item, the element was not correctly displayed in the results.
Elements generated from the right elements shortcuts could be unsync with the structure
If the user previously clicked on an iframe element and then selected a right-element shortcut, the element appeared correctly in the iframe but was not reflected in the structure panel.
Adding a component from the right elements shortcuts would fail to nest the component inside an active nestable element
Previously, components added via right-element shortcuts were placed at the root of the structure, ignoring the active element’s position. Now, the function verifies if the active element is nestable and nests the component inside when applicable.
Legacy Darkmode button had styling properties not applied correctly
Certain style controls in the Legacy Dark Mode Button were not applying correctly on the frontend due to CSS conflicts.
The bottom of the preview window was stripped when the Breakpoint Slider was expanded
When the Breakpoint Slider was expanded in the builder, it caused the bottom of the preview window to stretch by 66px.
When “Lock Elements Order” was enabled, you could drag items inside unnestable elements within the structure
The “Lock Elements Order” feature could mistakenly apply incorrect classes to structure elements and allow dragging within non-nestable elements, resulting in the dragged element being removed from the structure.
Release 3.0.3
This version fixes bugs that emerged in v3.
Tag Manager could stay open and conflict with other active inputs on the page
Switching elements while the Tag Manager was open caused the dropdown to reopen each time the same element was reactivated, disrupting input autofocus.
Hide element was ignoring breakpoints/mobile-first approach.
Applying ‘Hide Element’ on an element defaulted to the Desktop breakpoint, disregarding other breakpoints and mobile-first settings.
Uncategorized CSS variables weren’t correctly applied on the builder when applied from the Variable Picker
Clicking a CSS property from the Uncategorized category in the Variable Picker did not correctly apply the value to the selected control.
Elements generated from the right elements shortcuts could have different ID’s between the iframe and the structure, resulting in misc errors
Creating new elements using the right elements shortcuts could generate mismatched IDs in the structure panel and iframe, causing JS errors when selecting elements inside the iframe.
The Grid Builder CSS declarations are now applied as Custom CSS if a component is detected as child of the parent element.
Grids with component children weren’t applying ID-level grid-row
and grid-column
styles, as components can’t have varying styles per instance. Now, the grid builder generates these CSS declarations in the parent element’s Custom CSS field, similar to how it handles classes and query loops.
Converting elements to Rich Text could be glitchy
In some cases, converting a basic text or heading into a rich text element didn’t apply correctly in the structure or could revert to the previous state.
Default Link Spacing Controls could interfere with box-shadow/border/text-shadow controls
The default link spacing value could be mistakenly applied to fields that don’t support opposite links (e.g., borders) or shouldn’t be linked at all (e.g., box-shadow and text-shadow).
Release 3.0.2
This release mainly improves/fixes existing issues since the release of 3.0 of Advanced Themer.
Hide/Remove Element: new floating bar on the bottom of the Structure Panel
In this version, you can enable a new floating bar at the bottom of the Structure Panel, allowing you to quickly toggle the following options: hide the current element, hide it only inside the builder, or remove it from the frontend.
Remove Default Libraries for Icons: now SVG is selected by default.
When the tweak “Remove Default Libraries for Icons” is activated, opening the icon control will automatically select the “SVG” option by default.
Closing the Color Picker would leave the default Bricks color popup open.
When closing the AT Color Picker, the Bricks Color Picker remained open. Now, both are synced to close together.
Quick Search: filter the structure by content keyword.
Inside the quick search modal, you can now filter your structure elements by content keyword. This will return all the elements that contain the keyword inside the text control.
Quick Search: filter the structure by global class name attached to the elemenets.
In the quick search modal, you can now filter structure elements by their attached global class names. This will display all elements that have at least one class matching your search term.
Responsive Helper is now open by default on load.
When the Responsive Helper tweak is enabled in the Theme Settings, the helper now activated by default on load.
Using the right elements shortcuts could lead to see the newly added element inside the structure, but not within the iframe.
At times, the structure panel and iframe were out of sync when adding new elements from the right-side shortcuts. This issue has been resolved.
Codepen Converter: solved a JavaScript error that prevented importing a structure without having an active element selected within the structure panel.
When importing a structure from the CodePen Converter without an active element selected in the Structure Panel, the JavaScript function previously returned an error. This has been fixed, and the CodePen structure is now correctly added to the root of the panel.
Mask Helper wasn’t applying the mask correctly anymore
The Mask Helper tweak stopped working correctly since 3.0: selecting a mask from the modal had zero effects on the element. It has now been fixed.
Clicking on on the “Hide/Remove element” icons within the contextual menu of the structure panel would also toggle the display:none property.
Clicking on both “Hide the element in the builder” or “Remove the element from the frontend” inside the contextual menu of the Structure Panel would also trigger the “Hide element” function and set the display property to “none”.
Strict Editor View: the logo image triggered a PHP error inside the editor view.
Setting a new logo image in Strict Editor View settings previously triggered a PHP warning, potentially resulting in a blank page. This issue has now been resolved.
Panel groups within the Content tab weren’t toggable when Lock ID styles was active.
There was an issue with accordions in the Content tab: when ‘Lock ID Styles’ was enabled, toggling them was impossible unless the lock was disabled.
Deleting the data of AT when uninstalling could potentially mess with the existing Theme Styles.
In rare cases, uninstalling Advanced Themer with the ‘Remove all data when uninstalling the plugin’ option enabled could cause Theme Styles to become deindexed, leading to issues inside the builder.
CMD/CTRL + F in Advanced CSS wasn’t opening the codemirror search function
In the Advanced CSS modal, pressing CMD/CTRL + F would trigger the Quick Search modal instead of the native CodeMirror search function. This issue has now been resolved.
Imported CSS in Advanecd CSS could output a warning on non-SSL sites
Importing CSS files within the Theme Settings could trigger a PHP warning if the website lacked proper SSL configuration. The function has now been improved to support various server setups.
CMD/CTRL + SHIFT + F was opening the Quick Search Modal instead of the element search function from Bricks
A conflict existed between the Quick Search keyboard shortcut and Bricks’ native shortcut for focusing on the element settings search. This has now been resolved, and Quick Search will no longer be triggered when the Shift key is pressed.
Class Manager: couldn’t select a class if a component was inserted in current page’s Structure Panel
Previously, selecting a class inside the Structure Panel while a component was present in the Structure Panel could trigger a JavaScript error, causing the right panel to fail to mount correctly. This issue has been resolved, and the Class Manager now works seamlessly with components.”
Variable Picker: search would return color variables only
When searching for a CSS variable in the CSS Variable picker, the results would incorrectly include outputs from the Color Picker. This issue has been fixed.
Theme variables weren’t enqueued correctly on Editor View
When setting theme variables within the Variable Manager of AT, the CSS variables were not rendered correctly in the Strict Editor View, causing layout issues that affected editors only.
Release 3.0.1
This release fixes potential issues raised in the 3.0 release.
The right element shortcuts could generate a js error when no element was selected
In rare cases, the right element shortcuts could prevent the AT options from mounting correctly inside the builder – and cause the AT functions to be broken.
darkmode-local-storage.js was enqueued even when global colors or the darkmode on the frontend were disabled
Even when you disabled the global colors settings within the Theme Settings, or if you disabled the darkmode on the frontend, the JavaScript file “darkmode-local-storage.js” was still being enqueued on the frontend.
Importing the Theme Settings would create duplicated entries within the confirmation popup
When importing the AT – Theme settings from an export file, the confirmation popup would include duplicate “Theme Settings” strings for each data entry imported.
FATAL error in the AJAX response when importing the Strict Editor View settings
Importing the AT – Strict Editor View settings from an export file would generate a Fatal Error in the AJAX response due to a typo in the code.
Confirmation import/export/reset popup wasn’t displayed “fixed” on page
Instead of being fixed on the page, the confirmation popup after importing/exporting/resetting settings was displayed as position:absolute, which wasn’t a great UX on long pages.
Release 3.0
Version 3.0 is one of the most significant updates we’ve ever released! We’re confident in its stability after extensive testing with minimal issues reported during Beta. However, we strongly recommend updating AT in a staging environment first. This ensures everything runs smoothly before deploying it to a live site. As always, back up your site before upgrading to avoid potential data loss due to unforeseen issues.
15 New Features!
This release is packed with groundbreaking new features that will transform your workflow. Here are just a few highlights:
- Quick Remote Templates: a brand new way to drag and drop your templates inside your pages.
- AI-powered SuperPowerCSS: leverage the power of AI when it comes to writing custom CSS inside any element of your pages.
- A brand-new color variable picker: much more intuitive and organized than the native color popup.
- Add CSS transitions when switching page thanks to the new Experimental Page Transitions feature.
Listing all the new goodies here would be way too long, so just have a look at the full list below!
33 Improvements to Existing Tweaks
We’ve overhauled some of the most popular features to make them even better:
- Tag Manager: no more confusing colors. Add custom HTML tags from the structure.
- Right Elements Shortcuts: new options to add/remove/move all your shortcuts as you want – including custom elements and components
- Style Overview: a whole new structure list to easily navigate through all the styles of your elements
- Granular import/export options: select all the database entries you want to carry on – including all native Bricks ones.
- …and Tons of UX/UI improvements!
Full Compatibility with Bricks Components
The latest Bricks release (v1.12) introduced major changes that broke compatibility with older AT versions. But we’ve gone the extra mile—rewriting our entire codebase to ensure full compatibility with Bricks 1.12. Every AT function has been thoroughly tested and updated to work seamlessly with the new Bricks components.
Optimized ACF Requests
This version brings a complete rewrite of how your server interacts with the database to retrieve options. On the frontend, the number of requests related to ACF has been reduced to just a few ultra-fast calls.
25 Bug Fixes
We’ve squashed numerous bugs reported in earlier versions, including some of the most annoying ones. Alongside the new features and improvements, this release ensures a more polished and reliable experience across the board.
Why This Update Matters
Version 3.0 is more than just an update—it’s a complete evolution of AT. From cutting-edge new features to improved compatibility and performance, this release sets the stage for a more powerful and efficient workflow.
Check it out today and experience the difference!
Page Transitions (Experimental)
Quick Remote Templates
This powerful new feature lets you view all your remote templates in a clean, organized left panel, with categories for easy navigation. With Quick Remote Template, you can add multiple templates at once without leaving the modal. Plus, you can drag and drop entire sections into specific positions, and even save remote templates to your local server with just a single click!
Leverage AI to Generate or Improve the Custom CSS of your Bricks Elements
AI prompt manager
With the all-new AI Prompt Manager, you can now store your most frequently used prompts for quick and easy access. No more repeating the same input over and over again—simply select the prompt you need from a smart, intuitive dropdown. This feature helps you stay organized and saves valuable time, allowing you to focus more on your work and less on manual input.
Zoom-Out
Easily scale down your preview window to get a clear overview of your page. The best part? With Zoom-out enabled, only the root elements (typically your sections) are selectable within the preview window. These elements can be dragged and dropped only at the root level, ensuring you can reorder your sections without accidentally nesting them or disrupting the design by altering inner components.
Color Variables Picker
Easily apply your color variables to any builder control with the new Color Variable Picker. This tool showcases all your palettes in an organized layout, complete with each color’s corresponding light/dark shades and tints. After trying this feature, you won’t want to use the native color grid anymore!
Logical Properties controls
Simplify your CSS by replacing directional properties with logical properties. Logical properties adapt automatically based on the text direction and writing mode of your content, ensuring consistent layouts for both left-to-right (LTR) and right-to-left (RTL) languages. This approach reduces the need for manual adjustments, makes your code more maintainable, and improves accessibility for global audiences.
2 New Elements: Nestable Darkmode Button & Toggle
Introducing the Nestable Dark Mode Button and Toggle, two new elements offering full control over inner elements for easy customization. They are fully accessible on the fly – with aria-label
and focus styling, support logical properties, and include precompiled default styles within the builder controls.
Modified Mode
Bricks now lets you track which control has been modified on specific elements or classes. However, the feature has a limitation: switching to another element automatically disables the “modified view”, making it hard to navigate while checking for changes. With this new feature, the “modified view” will remain active even when switching between elements, making it easier to track changes across your structure.
Extract Variables as Global Variables
Remove Default Libraries for Icon elements
It’s tempting to add icons from Bricks’ default icon libraries, but doing so loads the entire library, which can result in unnecessary assets being added to the frontend. With this option, you can remove the default icon libraries from the Icon element and instead upload your own individual icon, boosting your site’s speed and optimizing performance.
Color Popup set to RAW and displayed as a LIST
By default, Bricks displays your colors in a grid view within the builder’s color picker and expects you to select a HEX value. For users who prefer working with CSS variables instead of static values, this often means switching to RAW mode repeatedly to paste your variable. With this new feature, the color picker will automatically open in RAW mode and display your colors in a convenient list format, streamlining your workflow.
Full compatibility with the new Components (since Bricks v1.12)
Advanced Themer now fully supports the component functions of Bricks since v.1.12.
Structure Helper: Components extended/collapsed
A new top-right icon within the Structure Helper modal allows you to extend/collapse the inner elements of the components available inside the page.
Structure Helper: Filters are now toggable
Clicking on any active filter within the Structure Helper modal will reset the filter and show the structure list without any opacity.
Strict Editor View: all elements are now listed for left-visibility/enable features
You now have complete freedom to toggle the visibility of any Bricks element using the left-visibility feature in Strict Editor View.
Revamped Structure Shortcuts including all elements and components
The Right Shortcuts next to the structure panel have been redesigned to feature a new options icon. By clicking this icon, a modal opens where you can easily add or remove elements, including third-party ones. Additionally, you can rearrange the active elements by dragging and dropping them to customize the order. Now, you have complete control over your right shortcuts!
ACF requests to the database made by AT dropped to one single request
The requests made by ACF to the database went from 284 to… 1!
Class Converter: added an active background-color on root elements
All the root elements (or parent elements) of each component inside Class Converter have now an active background color. It makes it easier to differentiate on the fly which elements are a parent, and which are children.
Class Converter: toggling the include/skip option on a root element will also apply to all the relative children
When clicking on the skip/include toggle next to a root element (or parent element) of a component, all toggle status will be applied to all the children of that element. This is especially useful when you need to disable an entire inner-component without the need to manually toggle off each child one by one.
Class Converter: Sync Elements Labels
A new option has been added in Class Converter to sync the label of each element with the newly assigned global class name.
Class Manager: added the trash category
You now have access to all deleted global classes within the new Trash category in AT’s Global Class Manager. Additionally, you can restore deleted classes directly from the manager or permanently remove them as needed.
Color Manager: hitting ENTER or TAB within the HEX input will now update the HEX value
In previous versions, the HEX input triggered the color calculation only when you clicked outside the field. Now, hitting the ENTER key or the TAB key will also fire all the functions related to the color calculation.
Color Manager: typing a 6-digit hex color will automatically update the color value.
In previous versions, the HEX input triggered the color calculation only when you clicked outside the field. Now, the functions are executed immediately as soon as a 6-digit HEX code is entered into the input.
Variable Picker: added an option to enable both the V icon and the Right click as event triggers
You can now open the Variable Picker using both the V icon and right-click events by selecting the ‘Both’ option in the theme settings.
Nested Elements: New PHP filter to manage the default elements
You can now customize the default nested elements using the following PHP filter within your child theme:
// Modify the default nested elements
add_filter('at/nested_elements/default_elements', function($default_elements){
// Example 1: See the data structure of the default nested elements
var_dump($default_elements);
// Example 2: Remove all the default nested elements
$default_elements = [];
// Example 3: Add a new nested element.
$default_elements[] = [
'id' => 'my_nested_element',
'label' => 'My Nested Element',
'icon' => 'ti-id-badge',
'category' => 'default',
'default' => true,
'elements' => [
// include your nested elements here
[
'id' => 'nddjcp',
'name' => 'block',
'settings' => [],
'children' => [],
]
],
];
return $default_elements;
});
Nested Elements: new option to convert custom element as native Bricks Component
A new “Convert to Component” icon now appears on all custom nested components. Clicking this icon saves the nested element as a native Bricks component (introduced in v1.12).
Box-Shadow Generator: New PHP filter to manage the presets
You can now customize the default presets in the Box-Shadow modal using the following PHP filter within your child theme:
// Modify the Box-Shadow Presets
add_filter('at/box_shadow/presets', function($presets){
// Example 1: See the data structure of all the default presets
var_dump($presets);
// Example 2: Remove all the default presets
$presets = [];
// Example 3: Add a new preset. One array for each layer.
$presets[] = [
[
"rgb" => "255,149,5",
"alpha" => 0.3,
"x" => 1,
"y" => 2,
"blur" => 3,
"spread" => 4,
],
[
"rgb" => "255,149,5",
"alpha" => 0.5,
"x" => 5,
"y" => 6,
"blur" => 7,
"spread" => 8,
]
];
return $presets;
});
Enable / Disable elements are now hidden when checked
Recently, many users were unable to see new Bricks elements in the builder. This occurred because if you saved the “Enable / Disable” array in a previous release, where these elements weren’t part of the list, they ended up being unselected in the theme settings, causing them to be hidden in the builder. This was an oversight. Going forward, all elements will be visible by default, and only the ones you choose to disable will be hidden.
Additionally, the elements list is now loaded dynamically, ensuring it always includes the latest elements that can be enabled or disabled in the builder.
In this release, all options in the “Enable / Disable” array will be reset to unchecked, so you’ll need to manually re-select any elements you wish to disable.
If you choose not to adjust these settings, there will be no impact on your site’s frontend. The only change will be that any previously excluded elements will now appear in the builder’s list by default.
More granular control over the exported/imported/reset AT data
All data previously stored in the “AT – Theme Settings” — including Grid Guides Settings, Right Shortcuts Settings, Strict Editor Settings, Nested Elements Library, Global Query Manager Settings, and all Advanced CSS scripts — has now been organized into separate toggles. This allows you to have granular control over which settings you want to import or export.
Added new Bricks exportable data: Global Settings, Pseudo Classes, Breakpoints, Structure Width & Panel Width
You can now import/export new native Bricks data, such as the Bricks Settings, the Pseudo Classes, the Breakpoints Settings, the Structure & the Panel Width.
Plain Classes: Added a lock icon next to all the locked classes
Within the Plain Classes modal, you can now easily identify locked classes by the lock icon next to each one.
Plain Classes: The editor provides a trailing space, allowing you to easily add new classes without needing to press backspace
When you open the Plain Classes modal, a trailing space is automatically added to the Editor so you can just start typing the name of the global class you want to add without having to hit the backspace key before.
Plain Classes: Clicking on an active class will remove it from the class list
If a global class is already active on an element, clicking on it within the Plain class modal will remove the class from the list instead of duplicating it.
Added a version number to the custom stylesheets created with Advanced CSS to avoid caching issues.
In some cases, changes made to the Advanced CSS stylesheets were not properly reflected on the frontend due to potential server-side cache issues. To resolve this, a version number will now be added to each stylesheet enqueued by AT, ensuring the stylesheet is correctly refreshed on the frontend.
Quick Search: search a structure element by the ID
You can now filter the structure by an element ID. It supports both the CSS ID and the internal Bricks ID. This is particularly useful when you want to jump on an element with a specific ID for debug purposes.
Quick Search: new component section
You can now look for components inside the Quick Search Modal. Clicking on a component will add it to your structure panel.
New shortcut icons to remove element on frontend & hide in builder in contextual menus
If you enable the “Hide/Remove Element” controls in the Theme settings, two new shortcuts will be visible within the “Hide Element” item in both the Structure Panel and the Class contextual menus. These shortcuts allow you to quickly hide/show an element in the builder and remove/activate it on the frontend without looking at the element panel.
New Quick Edit toggles within the AT Main Menu
A new set of commonly used builder tweaks can now be toggled on/off within the AT Main Menu without leaving the builder and refreshing the page. For example, if you want to disable the “Lock ID styles” for some time while you’re working on a page, you can disable that specific tweak inside the builder with one click and enable it again at any time.
Drastic reduction of CPU usage when compiling SASS code.
The SASS compilation logic within the builder has been completely overhauled, significantly reducing resource usage on your computer.
Moving elements with keyboard arrows won’t be triggered when any input text is selected
In previous versions, attempting to select an element’s label within the structure panel using the keyboard arrow keys would mistakenly trigger AT’s “Move Element” functions. The script has been updated to ensure it checks if a label is selected before executing any movement actions.
The “Generate Global Query Loop” button is now visible even when no query type is selected
The “Generate Global Query Loop” option in the query loop popup of the builder was previously visible only when a query type was manually selected. Now, it is displayed even when no specific post type is selected.
Revamped Tag Manager to allow custom tags from the structure panel
The Tag Manager has been completely overhauled for improved performance and usability. It now runs more efficiently within the builder, eliminates the previously confusing color indicators (green, orange, red), and lets you input custom HTML tags directly from the structure panel for any elements that support them.
New Structure list within the Style Overview modal
A new structure list has been added to the Style Overview modal, enabling you to effortlessly navigate and manage the styles of all elements on your page without repeatedly opening and closing the modal.
New Keyboard Shortcuts for AI Prompt Manager and Quick Search
New Keyboard shortcut options have been added for the newly introduced AI Prompt Manager and the Quick Search functions.
ACSS icon covering the keyboard shortcut icon on the bottom right of the screen
A recent update to the ACSS code caused the dashboard icon to overlap with the right shortcut sidebar in AT. The icon is now programmatically repositioned within the structure panel to prevent this issue.
Focus on first unlocked class could not work properly when the element included deleted classes.
If the selected element contained a global class ID that had previously been purged, the ‘focus on first unlocked class’ script could trigger an error. Now, the script checks if the global class exists in the database before applying the auto-focus.
Generate AI structure could return a JS error if the openai API key isn’t set inside the theme settings.
If your OpenAI API key was not entered correctly in the theme settings, a JavaScript error would appear when opening the ‘Generate AI Structure’ panel.
Icon settings weren’t exported correctly from the ID to the class using Class Converter
The icon control within the Icon element was not properly skipped by the class converter, causing its value to reset after the conversion process.
Importing global classes missed the Locked list
When importing global class settings via the Import function in AT (within the theme settings), the process previously ignored the locked list, resulting in all your classes being unlocked. Now, locked classes are properly included during export and import.
Adding a Nested Component while a child had removed global classes could generated a JS error.
If a nested component contained an element with a global class that had been purged, the script would generate an error during the save process, preventing the component from being saved correctly.
The final part of the CSS code – when longer than the screen viewport – could overflow in SuperPowerCSS
If you’ve written lengthy CSS code in SuperPowerCSS, you may have encountered an issue where the last rows are inaccessible due to an overflow problem. This should now be solved.
Moving parent colors inside Color Manager could break the position of the children
In the Color Manager, changing the position of a parent color could cause its corresponding shades to misalign. Now, the shades will automatically adjust to stay correctly positioned under their parent.
Convert UX to CSS & Variabilize CSS may not be correctly saved inside the element/class object
In some cases, converting all UX styles to custom CSS controls could result in lost styles due to data not being saved correctly inside the corresponding Bricks objects.
Advanced CSS now supports Mobile-first css on page.css
In previous releases, modifying the page.css
file in Advanced CSS while the active breakpoint was set to mobile-first would incorrectly place the code under the desktop view. Now, Advanced CSS intelligently detects whether you’re using a mobile-first approach and ensures your CSS is placed in the correct section!
Control values not visible on classes when “Focus on First Class” was enabled
Recent changes in the latest Bricks release may cause control values to display incorrectly (shown as empty) within the builder when the ‘Focus on First Class’ tweak is enabled.
Unable to move rich text elements with keyboard shortcuts
The Rich Text wasn’t easily movable with keyboard shortcuts due to the autofocus being applied on the tinyMCE editor.
Right keyboard shortcuts could be wrongly triggered when typing inside the BricksForge Panel
There was a conflict between the CodeMirror instance of Bricksforge and the right keyboard shortcuts of AT: typing inside the editor would wrongly create new elements in the structure.
Some dynamicooo shortcode could conflict with the autoformat clamp() function.
Complex dynamic tags from dynamicooo could be wrongly parsed as a clamp function when the “Autoformat” tweak is enabled.
Autoexpanding SuperPowerCSS could be wrongly triggered when switching to elements with locked classes only
In scenarios where you switch to elements with locked classes only, the element panel may incorrectly auto-expand in sections where it shouldn’t, leading to a poor user experience.
Switching from an element with locked classes only could prevent SuperPowerCSS from mounting correctly
In scenarios where you switch to elements with locked classes only, SuperPowerCSS could fail to mount correctly and a textarea field would show up instead of the CodeMirror instance.
CSS styles applied on global classes not always saved correctly when SuperPowerCSS is activated
In some cases, editing a global class using SuperPowerCSS could result in unsaved code due to a conflict with other AT functions.
Ajax error when no Global Query Loop Category is set
Adding a global query loop without a category would return an AJAX error in the console. This shouldn’t happen anymore.
Focus Point applied on image classes would be wrongly applied on ID level.
Previously, applying focus point settings to a global class while editing an image element would incorrectly apply the settings at the ID level. This issue has now been resolved.
SuperPowerCSS: CMD+F would trigger the Quick Search function of AT instead of the CodeMirror Search dialog
Pressing the CMD+F shortcut while editing CSS code in SuperPowerCSS would incorrectly trigger the Quick Search function instead of the search dialog in the CodeMirror instance. This issue has now been fixed.
Move arrows within the contextual menu of the structure panel could be incorrectly set as enabled/disabled
The calculation of the available arrow keys for moving an element within the contextual menu of the Structure Panel could previously be inaccurate. This function has now been refined to provide more precise results.
CSS Variable Suggestion Dropdown had a EventListener conflict on Safari
Safari users might have experienced issues when selecting a CSS variable from the CSS Variable Suggestion dropdown in AT, where the newly inserted value would be overridden by the old value as soon as a window event (such as click, blur, mousemove, etc.) occurred. The suggestion dropdown has now been redesigned to prevent this from happening.
Code Element CSS on full-size wasn’t showing all the code on click and wasn’t scrollable either
When you opened the code element in full-size mode, part of the code remained hidden until you clicked inside the editor. Now, the editor automatically refreshes the content as soon as you enter full-size mode.
Darkmode button & toggle are now legacy – use the nestable versions instead
With this release, the new Nestable dark mode button and toggles have been introduced, and the old elements are now officially considered Legacy. There are no plans to remove them in the future to maintain backward compatibility. However, it is strongly recommended to use the new nestable elements moving forward.