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.