When you want to apply style changes to multiple elements in Bricks, you either have to duplicate each element (and adjust the content for each) or copy/paste classes and styles manually. But now, Advanced Themer brings in an “Extend” feature that allows you to apply styles and classes from a specific element to multiple targets swiftly.

We know it can be a bit bothersome dealing with such limited space for custom CSS in bricks, particularly when you’ve grown fond of using tools such as VS Code or similar. That’s why we came up with a full-width advanced CSS Editor that boasts some great features, such as autocomplete CSS properties (including variables), AI assistant, autoclose brackets, search, lints, and so much more.

Another HUGE time-saver! Don’t you often begin styling on the ID level and then realize it should be on a dedicated class? This handy feature enables you to create a new class (or update an existing one), transfer all your ID styles to it, and reset the styles on the ID element with just one simple action.

Recently, Bricks introduced an awesome new feature allowing us to add multiple classes all at once! Unfortunately, it’s not perfect yet – you still can’t delete or replace a bunch of classes in one go. No worries, though! The Plain classes manager comes to the rescue, complete with auto-completion to suggest existing classes while you type.

If you’re an experienced developer looking to incorporate your own custom classes within the builder, you’re in luck – it’s now a breeze. All you have to do is upload your Stylesheet into the theme options. Advanced Themer will take care of the rest, automatically enqueuing, parsing, and including all the classes in the bricks global classes list.

When dealing with CSS variables, we know how tricky it can become when you choose to alter a variable’s name and chaos breaks loose. Advanced Themer comes to the rescue with its nifty “find and replace” feature, making it a breeze to globally switch out any CSS value on your page.

Easily craft CSS Grids with a smile: simply select the maximum column count on larger screens, pick the minimum width for each column, and decide the spacing in between. Advanced Themer will create a custom class that can be used right inside the builder.

This small enhancement can lead to a huge boost in efficiency. No more wasted time trying to find the class you need! When you enable this feature, Advanced Themer will automatically sort your classes in alphabetical order. Trust me, managing classes is so much simpler when they’re neatly organized.

We all know that styling on the ID level isn’t recommended. But let’s be honest, how often do we forget to create a class and start tinkering with the ID’s style? Activating this feature will disable styling at the ID level, encouraging you to create a class to access the style panel. Voila!

The Plain Classes feature is not only about managing your global class list, but it makes adding your classes easier and faster.

Once the builder tweak is activated, you’ll see a “P” icon inside the class field. The icon will only be visible when you’re inside the element vue – it will not appear if a class is active.

Clicking on the Plain classes icon will open a new modal where you can manage your global classes through a text area field.

let’s now add a couple of new classes using the autocomplete feature. Just digit the first letters of your class:

A suggestion dropdown is showing all the global classes that match the initial letters. Use the UP/DOWN key arrows to select the one you are after and hit “Enter” to autocomplete the class.

Let’s do the same for our third class:

Once you’re happy with the global class selection, click on the “Update Classes” button and you’re done!

The plain class feature can do much more than just adding global classes in bulk. Let’s review the functionalities.

Once the builder tweak is activated, you’ll see a “P” icon inside the class field. The icon will only be visible when you’re inside the element vue – it will not appear if a class is active.

Clicking on the Plain classes icon will open a new modal where you can manage your global classes through a text area field.

Bulk Delete

To delete several classes in bulk, just delete them from the textarea and click on “Update Classes”:

The modal will automatically close and the the global class list will be refreshed:

Reset all global classes

If you want to remove all the classes on a specific element, click on the “Reset Classes” button:

Bulk Reorder Global Classes

The Plain classes feature also support reordering your classes based on the order each class appears inside the textarea.

In the example above, we are adding .new-class-1 at the third position, and .new-class-2 at the end of the list:

Once clicking on “Update Classes”, the new classes are correctly added to respective positions.

As soon as you enable this feature and activate a global class, you’ll see a blue outline on all the elements that share the same class over the entire page:

The same will apply to the structure panel:

As soon as you enable this feature, you’ll see a new icon popping up inside the class field of each element panel when a class is active:

The number shows how many elements share the active class on the current page.

By clicking on the icon, you’ll navigate through all the elements – one by one – that have the current class added.

Since 2.0, Advanced Themer allows you to easily create and manage your dynamic colors inside the builder. You just have to enable the Color Manager and start creating your global colors from there – the script will automatically create the required CSS variables for you and enqueue them on the frontend without writing one line of code.

Configuration

Once you correctly activated the Global Colors in the theme settings, you’ll see a new “Global Colors” tab on top of the screen. Click on it to access to the related settings:

There are two options that you really want to set before starting creating your palettes with the Color Manager:

• ADD A PREFIX TO YOUR CSS VARIABLES: this can be really handy to avoid naming conflicts with other CSS variables on your website. The prefix will be added at the beginning of the variable’s name, and won’t be displayed inside the Color Manager – it’s a “set and forget” kind of security layer.
• ENABLE DARK MODE ON FRONTEND: toggle on this option if you want to enqueue the dark variation of your colors on the frontend. Keeping this option disabled won’t have any effect on your “light mode” colors.

Note: at the moment of writing this documentation, Bricks 1.9 doesn’t automatically replace modified variable values on your elements. That means that if you decide to add or change the prefix of the color variables after you previously assigned the colors to your elements, you may have to reassign your colors manually to be correctly reflected on both the builder and the frontend. Please vote to solve this issue here: https://forum.bricksbuilder.io/t/changing-the-css-variable-of-a-global-color-doesnt-reflect-on-elements/15709

Where can I find it inside the builder?

Once you enabled the Global Colors inside the theme settings, you’ll see a new color palette icon inside the topbar of the builder:

Clicking on the icon will open the Color Manager on top of the Structure Panel:

This is the expected result once the colors are added to your palette.

Assigning a color to a variable

Assigning a color value to your variable is pretty straightforward: click on the colored button next to the variable name – the color picker will be revealed. Just drag both the hue selector and the lightness/saturation levels to define the matching value, or manually add it inside the dedicated inputs on the bottom of the color picker.

Clicking on the arrow icon next to the color inputs will switch the format. The available formats are HEX(A), RGB(A), HSL(A) – A stands for the Algha Channel (= transparency) and it’s supported by all the formats. The transparency can be changed by dragging the slide input below the hue selector. Once you’re all set, just click outside the color picker to close it. Congrats! Your color has been successfully assigned to the variable!

Keep in mind that – independently of the format you choose to set your color – the final color saved in the database will be translated to HSL.

The frontend output

Let’s now inspect the result on frontend:

As you can see, all the CSS variables have been correctly created (using the name assigned to each color), the prefix has been correctly added to each variable, and all the values assigned are using the HSL format.

Overriding color values on local scopes

Since we are using variables, we can assign any custom value to all our color variables on “local scopes” – which means the color will be overridden only on the target element (and his children), without affecting parent or sibling elements.

Let’s say we want our primary color to be red on a specific element. We will add the following CSS declarations inside the Custom CSS control:

In this example:

• %root% is targetting our current element
• we assign a new value red to our primary variable
• we apply to newly assigned variable to the background-color CSS property using the var() function

Assigning new values to a variable can be applied on specific breakpoints:

…or on a specific pseudo-element or state:

…or even on concatenated classes:

Long story short, the options are endless!

How to convert the old AT’s color palettes to the new Color Manager

Before 2.0, AT’s color system was based on a dedicated Color Palette CPT – which has been deprecated in favor of the new builder integration. The colors that were previously saved to your database will be converted as native Bricks color palettes as soon as you update AT to 2.0+.

Note: the conversion is automatic – you don’t have to do anything specific. However, keep in mind that if you added a prefix to your old color palettes, these will be imported inside each color name – and thus will be visible inside the Color Manager. If you want to manage the prefix globally from the theme settings, you’ll have to manually delete the existing prefix from the Color Manager, and then add the global prefix in the Theme Settings.

You’ve set up your color palette in Bricks – nice job! Now, let’s say you’re looking to integrate a Gutenberg block into your design. No more tedious copy/pasting needed! With Advanced Themer, all your colors – including the vanilla Bricks colors – are seamlessly synced between Bricks and WordPress. Enjoy streamlined designs without any extra hassle!

This feature allows you to effortlessly add a lightmode/darkmode switch to your page. Do you typically go for a fixed position at one of the corners of your site? Or do you fancy incorporating it into your header or footer? No worries! Every combination is now achievable. Plus, you can tailor each design element to your taste – icons, colors, sizes, shapes, borders, and more!

The dark mode toggle works just like the Dark Mode button switch. The key difference is one is a button and the other is a toggle – quite the observation! Seriously, this is all about your design preference. Give both a whirl and pick the one that suits you best!

Gone are the days when you had to jump to the style tab and search for the right accordion to style your element. With this nifty feature, you can effortlessly reach any style tab in the element panel, all by simply clicking one of the smart tab shortcuts conveniently placed on the left panel.

Now you can quickly access your pseudo-classes styles without any hassle! Advanced Themer provides five helpful icon shortcuts for each element – the hover state, as well as the :before, the :after, the :active, and the :focus pseudo-elements! Simply click on them and – presto, you’ve got it!

Have you ever begun creating your designs while still waiting for your clients to send the content? If yes, then you’re surely familiar with lorem ipsum! You know, the hassle of constantly swapping windows just to copy and paste your lorem ipsum text into Bricks? Well, not anymore! Lorem ipsum is now integrated within the builder itself!

To make your design WCAG 2.0 compliant, it’s essential to have the right contrast between elements, which can involve complicated tests. The contrast checker handles it all by highlighting any elements in the builder that don’t meet WCAG 2.0 standards.

X-mode offers a convenient method to identify overflowing elements on your page or just to review your overall layout structure. By clicking on this toolbar feature, all your elements will receive a greyscale filter and a distinct dark outline to easily spot any issues.

If you’re a Figma user, you must be familiar with this cool feature. Advanced Themer pops a toggle icon on the toolbar, and when you activate it, a neat grid layer shows up over your design. You can even customize the number of columns, the gap, and the grid color for each breakpoint!

When your code starts getting a bit more complex, with loads of items in your structure panel, it can be a bit tricky to quickly spot the direct parent element. No worries though! Advanced Themer resolves this issue by placing a super handy icon shortcut in your left panel. This little gem lets you jump to the parent element in a flash!

By default, the elements list is showcased in a two-column grid, which looks pretty good. However, it can lead to excessive scrolling when searching for a specific element. When you enable this feature, a fresh set of icons will appear at the top of the panel, allowing you to increase the number of columns up to 4.

When you’re working on the borders and box-shadows of an element, the active outline might cover up your adjustments. To reveal them, you have to change the active element and cross your fingers that you won’t need to make extra tweaks! This feature ensures the active outline stays hidden while you style borders and box-shadows!

Have you ever felt a tiny bit annoyed when you were all set to add a new element to your page, only to have that pin icon pop up in your way, just as you clicked on the element? Truth be told, we’re perfectly fine without those pesky pin icons, right? Well, that’s precisely what this special feature is all about! 

If you’re a fan of “keyboard shortcuts,” this feature has got you covered! Advanced Themer lets you assign custom keyboard shortcuts to the global functions. This includes activating grid guides, x-mode, contrast checker, dark mode toggle, opening the Advanced CSS editor panel, the resource panel, and the global AI panel. 

Quite like the “Color Preview on hover” option, this handy feature lets you see the effect of a class on an element simply by hovering over it. It comes in really handy when you’re working with a CSS framework full of similar choices. You won’t need to guess the ideal fit anymore – just hover and select the perfect match.

This feature comes in super handy when you’re uncertain about the perfect color shade for an element. Just hover over the color within the builder to preview it on the spot! Saves loads of time and effort!

Want to see how your website appears in dark mode? You can now find a toggle for that within the Bricks toolbar! This feature makes it super easy to identify and fix any style issues in dark mode all in a snap.

This one is amazing! Now you don’t have to memorize all your variables! Instead, simply open a convenient modal displaying your CSS variables, select the most suitable one, and let the plugin set the field automatically or copy the selection to your clipboard.

If you prefer typing instead of selecting options, this alternative to the Variable Picker is perfect for you. Simply begin typing inside any styling field, and a helpful suggestion window will appear with all the matching variables for your convenience.

Are you building a template from a design file? Need a quick way to access your CheatSheets? Or maybe you want to filter your media gallery and grab the full image URL? The resource panel has got your back! Simply create your galleries in the theme options, and you can easily display them within the builder.

Can you believe we’re living in a world where content, assets, and even codes can be generated by a friendly robot right within the builder, all for an incredibly low cost? Welcome to the future, because Advanced Themer is here as the first production-ready plugin for Bricks, seamlessly combining openAI and ChatGPT features. (Pretty neat, right?)

There’s been an influx of ChatGPT tools lately, most of which charge you to use their APIs. That’s totally fine! But, we’ve decided to take a different approach with Advanced Themer. By using your own API keys, you are billed directly by OpenAI – we don’t earn anything from your daily usage. Isn’t that cool? This way, it becomes incredibly affordable for you!

Creating fresh new content for your website with OpenAI is a breeze, but did you know you can effortlessly fine-tune the existing one too? Your content element is auto-copied into the prompt – just give some simple directions to the AI like checking grammar, adjusting the tone, or even enhancing the text overall.

There are two different panels incorporated into Bricks for your convenience! The first, the global AI panel, allows you to create cool content like completions, chats, edits, and images. The second panel is directly connected to the core text and header elements; simply click the dedicated icon, generate your snazzy content, and paste it right back inside your textarea. Easy peasy!

Get the most out of the impressive openAI API by tailoring your prompts with features like custom voice tones, system context, temperature, top probability tokens, presence and frequency penalties, maximum tokens, and the number of results. Give it a shot and see the difference for yourself!

That’s simply magical! Just hop onto your AI assistant, personalize your prompt, pick the number of images to create and the size format, and voila! Effortlessly, all the AI images will be crafted and stored in your media library from within the builder. So satisfying!

Are you not super confident in CSS? Don’t worry, your friendly AI assistant is here to create actionable CSS code for you! With only a few simple clicks, you’ll reach your personalized prompt within the builder. After the AI generates your CSS, just tap on the main CTA to place the code right into your page’s CSS. And there you have it!

The History tab lets you easily find all your past prompts and AI-made content from your session. Want to go back to an earlier AI-created article? No worries, only a few clicks will take you there. Plus, you’ll find handy details such as the token count per request, any unique settings you used, as well as a super helpful copy/paste Call to Action.

Sometimes, it might take a few tries to achieve the perfect result. No worries, the new ChatGPT 3 & 4 API has chat functionality, which makes communicating with AI a breeze! The best part, it’s seamlessly integrated within the builder. Though it’s token-hungry, it will truly put a smile on your face!

Your database has been leaked? Well, that sucks… The good news is that your OpenAI API key is safe because it’s stored using 128-bit AES encryption in your database. But next time, you may wanna ask your AI assistant for a couple of suggestions about how to correctly secure your website from database leaks!

As previously noted, editors can’t access the built-in Bricks templates and settings. Despite this, there are quite a few links leading to them, resulting in error pages (examples include the admin bar links, dashboard menu, getting started page, and so on). This feature takes care of these by getting rid of any menu item or page directing to the template archive or global settings.

Select the elements that editors can access within the builder! Disabling an element ensures that they won’t be able to click on it, see any associated settings, and prevent them from messing around!

All the styling options have been cleared from your client builder’s left panel. Amazing! But don’t forget about the capacity for your clients to modify the padding or margin within the builder! You know, those green spaces beneath the active elements, right? Those have been taken away as well!

When you turn on Strict Editor View, things become much easier and cleaner for your clients! The structure panel vanishes, and unwanted icons from the toolbar disappear too. We’ve even transformed the left panel to be super user-friendly and intuitive!

In the standard editor mode, your client may not have access to the Bricks templates. However, if they edit a page featuring header/footer templates, they’ll still see the characteristical red outline and the “Edit Header/Footer” button when hovering over the header and the footer, which could lead to confusion. This feature removes any visible link to header/footer templates when using the Strict Editor Mode for a more seamless experience.

The default toolbar icons could be a tad puzzling for clients who aren’t design experts. If you’re taking advantage of the Strict Editor View, it’s quite likely that you simply wish to allow your clients to modify the content, while preventing them from tinkering with the settings and responsive choices. This feature enables you to manage which toolbar icons will show up in the Strict editor View.

This small addition can truly make an impact on your clients’ impressions. This handy feature lets you replace the top-left Bricks logo with your very own.

Maintaining consistency is important, right? When personalizing the appearance of the builder for your clients, it might be beneficial to adjust the builder’s accent color to align with your company’s style guide. This feature is designed precisely for that purpose!

Your clients should be able to concentrate on their content without having to worry about the settings. That’s why we’ve designed this feature to keep the left panel mostly out of sight, making it pop back into the builder only when it’s truly needed, such as when adding a new image or picking an icon.