Changelogs
In this section, you'll discover exciting new features introduced in each version as well as improvements and bug fixes. Stay tuned!
Release 2.2.1
November 28, 2023
8 changes
This release mainly fixes bugs appeared in the previous releases – and includes some improvements / new additions.
NEW
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.
IMPROVE / FIX
Expand Spacing Controls improved
The left/right expanded spacing controls had some conflicts with the suggestion dropdown and didn't always applied the variable clicked. To solve the issue, we had the to remove the width 100% on focus.
IMPROVE / FIX
Draggable Structure Panel Improved
The element shortcut bar wasn't displaying correctly on firefox when the draggable structure panel was activated. The contextual menu was also hidden on the background of the structure when the draggable was activated. When dock/undocking the structure panel, the height and position were reset - now the builder "remembers" the height and position of the last drag.
IMPROVE / FIX
Component Class Manager improved
The bulk actions inside the component class manager weren't filtering the actual component classes, but use the whole global classes list. Now you can use the bulk actions (rename, duplicate, group, delete) only on the classes included in your component without having to apply any specific filter.
IMPROVE / FIX
New Export option in Class Manager
You have now the ability to export a custom selection of global classes using the bulk actions of the Class Manager. The function will create a JSON file containing the global classes you specifically filtered. The JSON file can be then imported on any Bricks website (even if AT isn't installed) through the core class import function of Bricks.
IMPROVE / FIX
New option for the “Lock ID Styles” feature
A new optional setting has been added to the "Lock ID styles" feature: you can now enable it only if the current element has at least 1 global class set. This options is particularly useful if you tend to style your elements on the ID level first, and then run the Class Converter to move your ID styles to your global classes. In that case, the "Lock ID Styles" feature won't be in your way while building your elements, and will only show up once you moved your styles to classes.
IMPROVE / FIX
Responsive Helper improved + bug fix
The new Responsive Helper was generating a JS error if you set your breakpoints as Mobile First (typo error). When using the Desktop First breakpoints, The minimum value on mobile devices changed from 240px to 320px. You can customize this value by setting a "width builder" value inside the breakpoint settings. When no "width builder" value is set on the base breakpoint, the fullscreen size will be applied.
IMPROVE / FIX
Tabs Shortcut improved
When the left Tabs Shortcut feature was enabled, the "Expand" icon wasn't visible anymore after minimizing the element panel. Now the Tabs Shortcut gets hidden when the element panel is minimized, and the expand icon is back.
Release 2.2
November 20, 2023
18 changes
we’ve got some exciting updates to share with you!
Say hello to the Responsive Helper
Verifying the responsiveness of your design across various breakpoints can be a challenging task. However, our new Responsive Helper makes it a breeze. Simply double-click on any device icon to adjust the preview screen to both the minimum and maximum values of each breakpoint. Utilize the “resize” slider for a swift examination of your design on all possible viewport width.
Get ready for the Draggable Structure Panel
Want the flexibility to detach the structure panel and position it anywhere within the window? AT simplifies the process for you: simply double-click on the structure’s header to toggle between docking and undocking the structure panel. Move it around freely using drag-and-drop. Additionally, you have the option to resize the undocked panel to your preferred size.
Enable / Disable any Bricks element
Whether you’re aiming to hide particular elements that you don’t plan to use in the builder or looking to prevent them from being loaded on the server entirely, Advanced Themer empowers you to achieve this with just a few clicks!
…and like always, this release includes tons of bug fixes and small UX enhancements!
Hope you’re excited about these awesome updates!
NEW
Responsive Helper
Verifying the responsiveness of your design across various breakpoints can be a challenging task. However, our new Responsive Helper makes it a breeze. Simply double-click on any device icon to adjust the preview screen to both the minimum and maximum values of each breakpoint. Utilize the "resize" slider for a swift examination of your design on all possible viewport width.
NEW
Enable / Disable any Bricks element
Whether you're aiming to hide particular elements that you don't plan to use in the builder or looking to prevent them from being loaded on the server entirely, Advanced Themer empowers you to achieve this with just a few clicks!
NEW
Draggable Structure Panel
Want the flexibility to detach the structure panel and position it anywhere within the window? AT simplifies the process for you: simply double-click on the structure's header to toggle between docking and undocking the structure panel. Move it around freely using drag-and-drop. Additionally, you have the option to resize the undocked panel to your preferred size.
IMPROVE / FIX
Fatal Error “Uncaught Error: Class “Bricks\Elements” not found”
In some rare cases, a fatal error was produced by version 2.1.1 with the following log: "Uncaught Error: Class "Bricks\Elements" not found in /app/data/public/wp-content/plugins/bricks-advanced-themer/classes/builder.php:461". This has been fixed.
IMPROVE / FIX
Wrong base font-size calculated inside the builder
In some cases, the clamp functions for global variables were incorrectly calculated based on a 10px base font-size even when a different base font-size was set in the theme settings. This error was visible inside the builder only - it didn't affect the frontend.
IMPROVE / FIX
Plain Classes improved
The Plain Classes builder tweak has been slightly improved: the order of the classes inside the textarea wasn't always reflected in the final global classes order. This has been fixed.
IMPROVE / FIX
Preview Classes on Hover has been improved
The "Preview Classes on Hover" builder tweak has been slightly improved: the script was regenerating the styles of the global classes each time you hovered over a class name inside the class suggestion dropdown. It now generates the correct styles only when you open the class dropdown - which results in an overall improved performance.
IMPROVE / FIX
Bulk duplicate classes improved
When using the "bulk duplicate classes" feature of the Class Manager, the option to remove the original class from the element wasn't working as expected. This has been fixed.
IMPROVE / FIX
The structure helper isn’t showing correctly on template pages
When opening the Structure Helper inside a template page (including header/footer), the element list was not correctly loaded and thus, was empty. Now, the Structure Helper should be working on any post/page/template.
IMPROVE / FIX
Strict Editor View improved
The custom CSS rules applied inside the Advanced tab of the Strict Editor View were incorrectly commented, resulting in the CSS not being correctly applied. This has been fixed.
IMPROVE / FIX
Error with imported elements generated by Nimbufy
When trying to run the Class Convertor on elements generated by Nimbufy, a JS error was produced and prevent the function to convert classes correctly. This has been fixed.
IMPROVE / FIX
Imported Classes not previewing inside the Builder
When applying global classes generated by the "Import classes" feature, the styles related to these classes weren't showing inside the builder (but worked on the frontend). Now the imported classes are showing correctly inside the builder as well.
IMPROVE / FIX
Duplicate Color Palette bug
When duplicating an entire color palette inside the color manager, any modification to a color from one palette was also applied to the corresponding color of other palette. This has been fixed.
IMPROVE / FIX
Variable Manager enhancement
The autoformat functions (calc(), var(), r:*, etc...) is now integrated to the Theme variable inputs.
IMPROVE / FIX
Import/Export/Reset settings improved
You can now import/export/reset new data from the backend, such as: the global classes, the color palettes, the theme styles, the global CSS variables and AT's theme settings.
IMPROVE / FIX
Grid guides revamped
The grid guide feature has been revamped: you can now set a different number of columns/gap/color for each breakpoint. The settings are fully integrated with the builder (new option icon in the topbar). The backend options have been deprecated.
IMPROVE / FIX
Error with Tab shortcut & Lock ID styles
In cases where both "Lock ID Styles" and "Tab shortcut" features were enabled, and the "content" shortcut wasn't toggled on, a javascript error would fire and prevent the other builder tweaks from working correctly. This has been fixed.
IMPROVE / FIX
SuperPower CSS: bug fixes and enhancements
SuperPower CSS stopped working correctly after opening the interaction/condition panel inside the builder. It also wasn't mounted correctly if no custom element settings were set. A new keyboard shortcut has been added: the current media query (q/Q + c ). The CSS suggestion dropdown wasn't sorting the values correctly. Finally, the string media query string missed "screen" in the declaration.
Release 2.1.1
October 31, 2023
4 changes
This release solves bugs that appeared on the recent updates. Check them all below!
IMPROVE / FIX
The CSS variables not showing in the Strict Editor Mode
There was an issue where the CSS variables created in AT (both global & theme variables) weren't correctly enqueued inside the builder when the Strict Editor Mode was activated for editors. This has been fixed.
IMPROVE / FIX
Unclickable buttons in the Variable Picker
In some cases, the buttons inside the variable picker weren't clickable and thus didn't correctly copy the variable inside the control. This has been fixed.
IMPROVE / FIX
Forced Class Preview on hover
The Class Preview on hover builder tweak was applying - even if the option was deselected inside the theme settings. This has been fixed.
IMPROVE / FIX
Global base Font-size
In some cases, the clamp functions calculated for global variables were wrongly applying the theme base font-size instead of the global base font-size set on the theme setting. This has been fixed.
Release 2.1
October 30, 2023
15 changes
we’ve got some exciting updates to share with you!
Say hello to CSS Variable Manager V1
Easily manage your Global & Theme CSS variables directly within the builder. Create static or clamp values on the fly, and see them reflected instantly in the builder without refreshing your browser. We’ve got you covered with the ability to create multiple categories, reorder options, rename, duplicate, delete, and even check which CSS variables are being used on your pages.
Get ready for Color Manager V2
With just a simple click, Advanced Themer can generate a variety of color shades for you. You can now create up to 20 shades at a time, including transparent, light, and dark variations! What’s even better? All shades are linked to your main color, so any change you make to the parent color will automatically update all the shades. You can also easily link or unlink any shade from the parent color, create complementary colors, apply auto-dark mode to any color, and even import colors from a CSS variable list into your palette.
Introducing the Structure Panel Helper
We’ve got something special for those who like to keep their web pages tidy and well-organized! Our new Structure Panel Helper allows you to filter your structure panel based on advanced criteria. You can now highlight non-consecutive headers on your page, easily locate elements with data-attributes set, identify elements with pseudo-classes styles, and much more. This assistant is here to ensure that your page follows the best web practices.
Boost your productivity with CSS Keyboard Shortcuts
For all you CSS code wizards out there, we have a treat for you! We’ve added over 20 keyboard shortcuts to all our CSS code editors to automate popular declarations. From media queries to states and pseudo-elements, these shortcuts are designed to skyrocket your productivity.
But wait, there’s more… Cool new tweaks!
- Now you can create CSS variables directly from our Variable Picker.
- We’ve introduced an Element CSS shortcut inside the element panel.
- Open your class in the Class Manager from a convenient element shortcut.
- Expand Spacing controls to get a lot more room for your variables and complex calc functions.
- Dynamic CSS variable suggestions.
- Add descriptions to your classes for better organization and clarity.
…and like always, this release includes tons of bug fixes and small UX enhancements!
Hope you’re excited about these awesome updates!
NEW
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.
NEW
Complementary Color Generator
Create complementary colors based on any color - following the color theory. Generate the (split) opposite/triad/tetrade/quadratic/compound colors, or an analogous color palette in one click.
NEW
Auto-darkmode
Automatically generate the dark version of your color. The script will calculate the opposite lightness of your light color, and assign it to your dark palette in one click.
NEW
Import colors from a CSS variable List
Would you like to import your CSS color variables inside the native Bricks color palettes and leverage the benefits of dynamic data? With Advanced Themer it's as easy as copy/pasting!
NEW
Enable/Disable any Color Palette
Wish you could A/B test your colors by temporarily disabling an entire palette? That's a one-click action with Advanced Themer!
NEW
Structure Panel Helper
This new panel allows you to filter your structure panel based on advanced criteria, such as: highlighting the non-consecutive headers on the page, showing the elements that have data-attributes set, having pseudo-classes styles, etc... This assistant will ensure your page follows the best web practices!
NEW
CSS keyboard Shortcuts
If you're writing a lot of CSS code, chances are this feature will drastically increase your productivity! 20+ keyboard shortcuts have been added to all the CSS code editors to automate popular declarations such as media queries, states, and pseudo-elements.
NEW
Element CSS Shortcut
Check if your element has custom CSS styles set on the fly! Click on the icon to directly access the CSS control and manage your custom codes in no time.
NEW
Expand Spacing Controls
The spacing controls in Bricks are fancy, but can sometimes be unfriendly when dealing with CSS variables. With Advanced Themer, you can easily toggle an "expanded" view and easily manage your long values without fear!
NEW
Variable Manager
Manage your Global & Theme CSS variables easily within the builder. Create static or clamp values on the fly that are reflected inside the builder without the need of refreshing your browser. Create multiple categories, reorder any option, rename, duplicate, delete, etc... Everything is included to keep your CSS variables under control!
IMPROVE / FIX
Advanced CSS improved
The variable suggestion dropdown integrated inside Advanced CSS is now fully compatible with the new variable manager. The values inside the dropdown are dynamically generated each time you open the Editor. The variables created inside Advanced CSS are also reflected in the suggestion dropdowns of each Bricks control and Superpower CSS.
IMPROVE / FIX
Variable Picker improved
The variable picker is now fully integrated with the new variable manager. It's dynamically populated with the variables created in the variable manager without needing a refresh. You are also able to add theme variables directly from the variable picker. There are new small indicators to quickly check between global and theme variables. The general UI has been slightly improved.
IMPROVE / FIX
New “full-size” option in Superpower CSS
You have now a new icon option on top of the Code Editor to hide the description text under the control and span SuperPower CSS through the whole available height of the screen.
IMPROVE / FIX
“Comments” added to Superpower CSS
Now you can easily comment your code by pressing the following keyboard shortcut: CMD + SHIFT + 7 (WIN + SHIFT + 7 for Windows users).
IMPROVE / FIX
“Description” added to the Class Manager
You can now add a description to each class inside the Class Manager.
Release 2.0.4
September 28, 2023
4 changes
This release fixes an issue with the dynamic color variables being wrongly generated with duplicated prefixes (in case you added a global prefix inside the theme settings). It also enhances the following tweaks: style overflow, superpower CSS & import styles to a class from the ID.
IMPROVE / FIX
Import ID styles to classes improved
In some cases, importing the ID styles to a class could fail and result in losing styles on both the ID and the class. This has been fixed.
IMPROVE / FIX
Duplicated prefix in the color variables
If you set a global prefix for the color variables in AT's theme settings, in some cases this prefix was output twice inside the variable name. This has been fixed.
IMPROVE / FIX
Style Overview improved
The style overview has now a new style indicator on the pseudo-element buttons: an opacity .3 has been added to the buttons that have no custom style added (both for ID and classes) and the buttons with opacity 1 do have custom styles added. You don't have to switch the pseudo-element buttons one by one anymore to figure out if there are custom styles added to it.
IMPROVE / FIX
Superpower CSS improved
The new features for the superpower CSS feature: the first one is the "Component selectors generator": it allows you to generate all the CSS declarations ( with classes or IDs) of an element and all its children with one click. The second feature is the "1-click CSS beautifier": click on the corresponding icon and all the CSS contained inside the code editor will be indented correctly.
Release 2.0.3
September 27, 2023
4 changes
This release includes a hotfix for users who didn’t see the dynamic colors created with the Color Manager inside the builder anymore. It also includes a couple of new improvements.
IMPROVE / FIX
Suggestion dropdown inside the Superpower CSS improved
When dealing with a large amount of CSS variables, the suggestion dropdown inside the Superpower CSS was peaking the memory usage and could generate slowdowns inside the builder. The function has been improved to reduce memory usage and the lag when typing inside the Code Editor.
IMPROVE / FIX
“Active color on page” indicator improved
The first version of the indicator "Active colors on the current page" inside the Color Manager was scanning the colors on the elements of the page (on the ID level). Now this indicator also scans the classes assigned to the elements and the active theme styles.
IMPROVE / FIX
Darkmode toggle and button improved
Both the darkmode button and the toggle ran an animation on load. This animation has been removed and runs only when clicking on the toggle/button once the page has been loaded.
IMPROVE / FIX
Color variables not visible inside the builder
In case you were using color names with capitalized letters or invalid CSS characters, the variables may be wrongly parsed inside the builder and result in transparent preview values. This has been fixed and the script will restore your previous values in case you're actually experiencing the issue.
Release 2.0.2
September 26, 2023
6 changes
This release includes some tweaks improvements and a couple of fixes. If you’re using the Strict Editor Mode for your clients, this update is required asap.
IMPROVE / FIX
“Focus on first unlocked class” improved
When the builder tweak "Focus on first unlocked class" is activated, the script will automatically unselect any locked class if no unlocked class is active on the element, so you can quickly style on the ID level without being forced to unselect the locked class first.
IMPROVE / FIX
The data-theme attribute is now toggling correctly inside the builder
If you're writing custom CSS based on the data-theme attribute of the HTML tag - like html[data-theme="dark"] .your-class - you could experience some discrepancies between the builder view and the frontend. Now the data-attribute is correctly toggling and allows you to preview your CSS declarations correctly inside the builder.
IMPROVE / FIX
“Disable auto-expand” wasn’t respected in Superpower CSS
If you activated "disable auto-expand" in the bricks settings and if you had "superpower CSS" activated as well, the latter didn't respect the rule set in Bricks and auto-expanded anyway. Now the auto-expand setting is compatible with Superpower CSS.
IMPROVE / FIX
Color variables were missing inside the suggestion dropdowns
The colors generated inside the new color manager were not included in the different suggestion dropdowns. This has been fixed but not that it will only include the variables on load - new color variables created during the current session will need a builder refresh to appear inside the dropdowns.
IMPROVE / FIX
Duplicated CSS variable suggestions in the Superpower CSS dropdown
In some cases, the CSS variable suggestion dropdown inside the Superpower CSS returned duplicated values. It wasn't always sorting the results correctly in an alphabetical order. Both issues have been fixed.
IMPROVE / FIX
Blank screen errors for editors using the Strict Editor Mode
In some cases, the strict editor mode could generate a blank page when editing a page with the Editor role. This has been fixed.
Release 2.0.1
September 22, 2023
1 changes
This release contains a hotfix for users who were unable to open the Advanced CSS modal and a couple of CSS fixes inside the builder.
IMPROVE / FIX
Hotfix
Error opening the Advanced CSS modal when no CSS is set on the current page. Minor CSS fixes inside the builder (light theme).
Release 2.0
September 21, 2023
48 changes
we’ve got some exciting updates to share with you!
Pre-requisite
This release is considered as a major update! Thousands of rows of code have been edited, and while it has been widely tested by the community, it could potentially break things… So please make sure to backup your site before updating!
Color Manager
We’re super excited to introduce our new game-changer feature, the Color Manager. You can now manage all your dynamic colors inside the builder, create unlimited shades, and generate advanced scales without leaving the builder. It also brings a whole new way to set a darkmode to your site.
Class Manager V2
Version 2 of the class manager lets you easily categorize your classes, use AI to generate CSS codes, and apply bulk actions to your classes: rename/duplicate/group or delete multiple classes in a few clicks!
New CSS controls
Column-count, white-space, transform & perspective, backdrop-filter, background-clip etc… are now properties you can add inside the builder without using custom CSS.
Revamped Class Converter
The class converter has been upgraded with basename auto-populated, a preview window, and new functionalities that make it a must-have in your building workflow.
Bug fixes and new enhancements
This release contains tons of bug fixes and small enhancements
NEW
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.
NEW
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.
NEW
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.
NEW
Convert Vanilla Bricks Colors into CSS variables
The colors created in Bricks aren't typically saved as CSS Variables; they're primarily static values. But, if you're keen on enjoying the convenience of CSS variables, guess what? You're simply a button tap from utilizing our color variable converter.
NEW
Manage & Organize Your Colors with Ease
Your color palettes can get a little overcrowded with various roles for diverse tasks. The good news is that the color manager is all dressed up with new features to put order back into your color system. You can easily play around - adding, removing, duplicating, reordering (with drag-and-drop), or renaming any color and palette.
NEW
Advanced Color Pickr
Looks familiar? Typically, if you frequently tweak the developer settings on Chrome, chances are you've come across this same color picker. It offers easy navigation between HEX, RGB, and HSL formats. Not only that, but you can also set custom values for hue, saturation, lightness, and alpha via a convenient drag-and-drop interface.
NEW
Alpha channel supported
The initial color palette manager didn't have the capability to support colors with alpha channels. That's a thing of the past — now, you can assign any transparency value to any color present in your palette and it will indeed be accurately represented within the generated CSS variable.
NEW
Color Shades generator
With a simple click, Advanced Themer can create various color shades for you. You can create up to 20 variations at a time for transparent/light/dark shades! It's pretty much limitless!
NEW
Advanced Scale Generator
The scale generator is engineered to handle multi-level color schemes, helping you craft complex color gradients with ease. Making intricate color scales won't be a problem anymore.
NEW
No-code Darkmode
Implementing dark mode might seem challenging since it usually needs custom JS and CSS to function smoothly. But don't worry! Thanks to Advanced Themer, creating a dark mode variant of your color shades is now a breeze. Just a few clicks, and you're good to go!
NEW
Customize any shade and dark color variant
If you need to refine each color shade in both light and dark mode after using our time-saving shade generator - that's perfectly OK! You have full control over every color that is generated by our color manager. Indeed, it's completely customizable whenever you need it.
NEW
Set Custom Darkmode colors for ACSS variables
Do you stick with ACSS colors, yet find yourself longing for an effortless route to design a darkmode version of your website? We've got you covered! And it won't mess with your ACSS settings!
NEW
Meta Theme Color – Both globally and per page
Do you want to easily customize the display of the page or of the surrounding user interface? Now you can quickly do that for all the browsers that support the meta theme-color attribute. Set a global theme-color value that will apply to the whole site, and even customize it on a per-page basis inside the builder settings.
NEW
New CSS Controls
Column properties ("fake" masonry layouts...), advanced transform settings, white-space, backdrop-filter, background-clip, break, perspective, etc... are just some of the new CSS controls that you can now activate inside the builder.
NEW
Expand All Children Elements
Got a load of nested elements to deal with? It can definitely feel overwhelming sorting through several parent elements in the structure panel, just to access the one you need to tweak. Now, there's no pressure. Using this feature, you can swiftly unfold all the elements within a container.
IMPROVE / FIX
New Filters / Transitions Tab
An optional "Filters / Transitions" tab has been added to quickly access these properties and leave the CSS tab free of distraction.
IMPROVE / FIX
Color picker now accepts HEXA capitalized letters
There was a bug inside the Color Manager that prevented to paste HEXA values with capitalized values. Now the script automatically parses the HEXA value to lowercase letters.
IMPROVE / FIX
Manually Rename Classes inside the Class Converter
In the previous releases, the Class Manager automatically assigned a context (or an element) to each class based on the element's label. Now can further customize your class names manually by clicking on the class input inside the preview window.
IMPROVE / FIX
Add you custom Icons inside the Light/Dark mode toggle/button
In the previous releases, the dark/light icons inside the darkmode button/toggle were hardcoded. You have now the option to choose a custom dark/light icon from the Bricks library - or upload your own SVG.
IMPROVE / FIX
Enhanced the Light/Dark mode to avoid FUC on load
In some cases, users could experience a color "jump" when loading the page in dark mode - creating an unpleasant experience for the visitor. The Javascript scripts have been revamped to avoid such issues.
IMPROVE / FIX
Copy Class name to Clipboard inside the Class Manager
Added a "copy to clipboard" icon next to each class inside the Class Manager to quickly copy the class name inside your clipboard.
IMPROVE / FIX
Copy Color Variable to Clipboard inside the Color Manager
Added a "copy to clipboard" icon when hovering a color inside the Color Manager to copy the CSS variable related to the color inside your clipboard.
IMPROVE / FIX
Active Colors on page indicator inside the Color Manager
You have now a small "check" icon next to all the colors that are being used on the current page you're editing. This is an easy way to see on the fly whether a specific color is being used on a page.
IMPROVE / FIX
Multi-select drag & drop in the Color Manager
Added a new "handle" icon next to each color. You can reorder any single color by dragging this handle, or even drag multiple colors by clicking on the handle icon - the colors will be considered as "selected". By dragging the selected colors, you'll automatically "group" them during the drag and will expand again on the final desired position.
IMPROVE / FIX
More Granular Control over the classes created with the Class Converter
When running the Class Converter script, a class was automatically assigned to each element of your component. You can now skip the script on specific elements by toggling the icon next to each class.
IMPROVE / FIX
Manually Rename Classes for Bulk Actions inside the Class Manager
When running the Bulk Actions script for both "rename" and "duplicate" classes, you can now manually rename any class to your desired class name by clicking the new pen icon next to the class inside the preview window.
IMPROVE / FIX
Reset button added to the Bulk Actions tab inside the Class Manager
In the 2.0 beta release, you had to manually delete all the field values inside the Bulk Actions modal when running the script multiple times. Now the field values are automatically cleared when you run the script, and there is also a new reset button to manually clear all the field values.
IMPROVE / FIX
Fixed a bug when the custom CSS selectors weren’t duplicated correctly when using the Class Manager
The "duplicate class" function inside the Class Manager wasn't correctly parsing the "root" shortcut if there were multiple "root" inside the custom CSS control. It was also happening when duplicating an "already duplicated" class. This has been fixed.
IMPROVE / FIX
Adapted all the CodeMirror instances to support %root%
Since the 1.9.1 release of Bricks, the "root" shortcut has been changed to "%root%". All the custom CodeMirror instances loaded by AT have been updated to support this new shortcut. It also introduces 2 new keyboard shortcuts inside the editor: "r + tab" will generate "%root%" (just like Bricks does on the native Code editor) and "R + tab" will generate "%root%{}" and automatically place the cursor inside the brackets to quickly add CSS declarations inside your id/class.
IMPROVE / FIX
Improved Custom Theme compatibility inside the builder
In some cases, the colors inside the AT's modals were slightly messed up when using a Custom Builder Theme. This has been improved.
IMPROVE / FIX
Improved Default Palettes inside the Color Manager
The default palette is now correctly opening as the default palette inside the Color Manager when loading the browser.
IMPROVE / FIX
Improved Import/Export Styles to Classes when using Mobile-first Breakpoints
In some cases, the styles imported/exported to a class weren't correctly parsing the CSS code on different breakpoints if you set your breakpoints as Mobile-first. This has been fixed.
IMPROVE / FIX
Added a toggle to enable/disable the dark mode color variables on frontend
If you are not planning to use dark mode on your website, you can now simply disable the output of the dark color variables on the frontend - the light colors will still normally apply.
IMPROVE / FIX
Added an option to import the Variable Framework from the database
In case you're working on a password-protected website or on a server that limits access to external files, importing the JSON of your variable framework is probably failing. Now you have an option to paste your JSON object directly inside the theme settings and load it from the database. This should fix the import in all the server environments.
IMPROVE / FIX
Multi-select drag & drop inside the Class Manager
Added a new "handle" icon next to each class. You can reorder any single class by dragging this handle, or even drag multiple classes by clicking on the handle icon - the classes will be considered as "selected". By dragging the selected classes, you'll automatically "group" them during the drag and will expand again on the final desired position.
IMPROVE / FIX
Class Manager is not an experimental feature anymore
Class Manager is no longer considered as experimental and can be safely used on production websites.
IMPROVE / FIX
Change element ID even if “Auto-focus on the First Unlocked Class” is enabled
There was a bug that prevented changing the ID of an element if the builder tweak "Auto-focus on the First Unlocked Class" was enabled. This has been fixed.
IMPROVE / FIX
The superpower css has been improved
The CSS editor wasn't showing when switching between breakpoints. This has been fixed. A "root" generator has also been added.
IMPROVE / FIX
Tag manager is working again
In the 1.3 version, clicking on any tag from the dropdown list didn't apply the tag to the element. This has been fixed.
IMPROVE / FIX
Set the Overflow control as a dropdown
Are you willing to customize the controls that are accessible to your clients? You can now mess with AT's code and control with options you want to show/hide to your clients.
IMPROVE / FIX
Personalize the CSS generated for the Strict Editor View
Are you willing to customize the controls that are accessible to your clients? You can now mess with AT's code and control with options you want to show/hide to your clients.
IMPROVE / FIX
Set the default AI model and tones of voice in the AI settings
You can now choose the default AI model you want to use inside the builder. It is particularly useful for users without GTP4-compatible API access. You can also define your own list of tones of voice that you can apply to your assistant's responses.
IMPROVE / FIX
The AI responses are now wrapped in a code block
If you are willing to generate HTML content with AI, or even ask for custom code suggestions, it's now possible to do so since all the responses are wrapped in a code-friendly container and will display the correct tags on the screen.
IMPROVE / FIX
Darkmode supports “prefers-color-scheme” settings
When you add either a darkmode button or toggle to your page, the script will check the visitor's "prefers-color-scheme" settings and set darkmode accordingly.
IMPROVE / FIX
Improved compatibility with Mobile-first breakpoints
In some cases, the values applied using style overflow on elements using a mobile-first approach weren't set correctly.
IMPROVE / FIX
New Classes / ID Tab
An optional Tab "Classes / ID" tab has been added inside the style tab of each element. This consent you to quickly access your classes/id fields (thanks to the corresponding new tab shortcut) and keep the CSS tab focused on the CSS code only.
IMPROVE / FIX
Autoformat works inside the theme styles
The autoformat functions weren't working correctly inside the theme styles controls. This has been fixed.
IMPROVE / FIX
“body.brxc-dark” has been retired
The darkmode class "brxc-dark" set on the body has been retired. It has been replaced by a data-attribute on the HTML tag. To target it, use the following selector: html[data-theme="dark"].
Release 1.3
August 18, 2023
18 changes
we’ve got some exciting updates to share with you!
Introducing Class Manager
Get ready for something you’ve been waiting for! Now you can totally rock at managing your classes with this brand new Class Manager feature. We’re talking about cool filter options (like which classes are active on the current page, which classes have styles assigned, or even which ones are locked/unlocked), quick buttons for all sorts of actions (add, delete, rename, duplicate, change order, quick lock/unlock), a list showing you which elements are using a specific class, a sneak peek at the CSS magic Bricks does on the frontend, and guess what? You can even slap on some custom CSS right from the Class Manager. Give it a spin – you’re gonna love it! 🚀
NEW
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.
NEW
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.
NEW
Drag-n-drop your element’s classes
Whether you want to reorder the classes of an element for workflow consistency or to change the DOM priority of a class, you can now do that by simply drag-and-drop a class to your preferred position.
NEW
Auto-select Import Images in the Template popup
How annoying is it to import a full template on your page, but realize you forgot the option to import the images? Now you have to delete all and redo the steps again. Well, not anymore. Advanced Themer checks the "import images" for you every time you open the template popup.
IMPROVE / FIX
CSS doesn’t always apply inside Superpower CSS
There was an issue where the CSS code inserted inside the Superpower CSS wasn't refreshing quickly enough to get applied on the builder, and potentially created errors on the frontend.
IMPROVE / FIX
Typing “!” wasn’t triggering the suggestion dropdown in Superpower CSS
There were no more "!important" autocomplete suggestions inside the Superpower CSS. This has been fixed.
IMPROVE / FIX
:before and :after styles not applied correctly
In some cases, the styles applied to the pseudo-classes ":before" and ":after" weren't correctly reflected on frontend.
IMPROVE / FIX
The element shortcut sidebar wasn’t sticky anymore
When scrolling a long structure panel, the element shortcut sidebar was scrolling too - and led to getting the shortcuts hidden.
IMPROVE / FIX
Superpower CSS wasn’t mounted correctly when switching breakpoints.
In some cases, the CSS control field wasn't correctly loaded after changing a breakpoint, and you ended up with an empty field.
IMPROVE / FIX
Lorem/AI icons visible inside the class dropdown of the header element
When opening the class dropdown of a heading element, a z-index issue led to incorrectly showing the Lorem Ipsum and AI shortcut icons.
IMPROVE / FIX
1-column layout to the elements list
Now you have the option to list all your elements in a 1-column layout.
IMPROVE / FIX
New shortcut elements
The following element shortcuts have been added to the right sidebar: code, template & SVG.
IMPROVE / FIX
Class converter didn’t parse multiple “root” in custom css
There was an issue that led the class converter to parse the "root" value of the custom CSS only once. Now it convert all the root values found.
IMPROVE / FIX
Enhanced Firefox compatibility
On Firefox, some buttons were hardly clickable due to the Firefox-specific way of calculating the z-index on elements (which is a mess!).
IMPROVE / FIX
Added an option to set “SVG” as default library for Icons elements
If you're not planning to use the existing icon sets (themify, font awesome, etc...), now there is an option to set "SVG" as the default library and consent you to quickly upload your own SVG file.
IMPROVE / FIX
Custom HTML tags are now showing in the structure panel
When you selected a custom HTML tag for an element, you'd typically see the tag "CUSTOM" inside the structure panel. Now you should see the custom HTML tag correctly assigned.
IMPROVE / FIX
Builder Light mode enhancement
Some previous additions weren't looking good when the builder was set to Light mode.
IMPROVE / FIX
Added an option to transform the Heading input into a multiline textarea
Sometimes it can be tricky to add long content inside the dedicated input of the Header elements. Now you can set the input to be a textarea that handles multiline text.