Release 1.0 (Beta)

April 9, 2023
57 changes

We’re thrilled to announce the initial beta release of Advanced Themer and give you a sneak peek at all the amazing features the plugin has to offer.

As Thomas mentioned, no software is perfect in its early stages, and Advanced Themer is no exception. That’s why our focus during the 1.* version series will be on fixing those little bugs and enhancing our current features to bring you a production-ready version as quickly as possible.

While we’re perfecting our stable version of Advanced Themer, you can also look forward to us putting some love into creating comprehensive documentation for all of the included features and showcasing real-life examples demonstrating how Advanced Themer can make your website-building experience with Bricks a whole lot smoother and more enjoyable.

During your tests, if you come across any errors, genius ideas for improvement, or just want to drop by and say hello, please don’t hesitate to shoot us a message. Your feedback means the world to our team!

So buckle up, and let’s embark on this exciting journey together! Kick back, relax, and have fun exploring all that Advanced Themer has in store for you! ?

NEW

Extend your classes & styles from any element

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

NEW

Advanced CSS Editor

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

NEW

Export ID Styles to any Class

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

NEW

Plain Classes Manager

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

NEW

Class Importer

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

NEW

Find & Replace any Style value

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

NEW

Responsive Grids utility classes

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

NEW

Reorder your Classes inside the Bricks Popup

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

NEW

Lock Styles on element ID level

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

NEW

Autocomplete support for Multiple Classes

The Bricks team has made a positive move by incorporating "multiple classes in bulk" support. Regrettably, this causes the class suggestion popup to break after the first class. When you use our Plain class modal, you'll get a suggestion popup (with autocomplete support) for each class you enter.

NEW

Reorder/Update/Remove/Reset classes in bulk

Check out this fresh addition to the Plain class modal! It doesn't just let you create new classes in bulk, you can update, remove, and even reset multiple classes at once, too. Just apply the changes to any class in the popup, and watch your class list refresh right before your eyes!

NEW

Highlight all the elements that share a same class

Discover how easy it is to see which elements have the same class! Simply click on any class within the builder, just like when you're applying styles. You'll soon notice a blue outline surrounding all the elements with that specific class.

NEW

Class counter & navigator

This new feature displays a handy class counter icon right next to your active class name. It lets you see the total number of times that particular class has been used on the current page. If you give that icon a click, it zips you through all the elements that share the same class like magic!

NEW

Dynamic Colors

Say goodbye to inline colors! With our Advanced Themer, all your color management is handled through custom CSS variables. Imagine your client wants to revamp their website's color scheme entirely. Fear not! In just a few clicks, you can easily make the changes!

NEW

Synced with Gutenberg Default Palette

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!

NEW

New Element: Darkmode Button

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!

NEW

New Element: Darkmode Toggle

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!

NEW

Element Tab Shortcuts

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.

NEW

Pseudo-elements shortcuts

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!

NEW

Lorem Ipsum generator

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!

NEW

Contrast Checker

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.

NEW

X-mode

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.

NEW

Grid Guides

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. This helps you make sure everything's aligned just right in a snap!

NEW

Parent Element Shortcut

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!

NEW

Control the grid columns inside the global elements panel

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.

NEW

Disable the outline border of the active element when styling Borders and Box-shadow

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!

NEW

Disable the PIN Icon on the elements list

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! 

NEW

Keyboard Shortcuts

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. 

NEW

Class Preview on hover

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.

NEW

Preview Colors on hover

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!

NEW

Darkmode toggle inside the toolbar

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.

NEW

Create Fluid and Static Variables on the fly

With Advanced Themer, you're free to explore beyond fixed variable categories. Go ahead and create your own variables, for any existing CSS property – be it with static or fluid values. Have fun as Advanced Themer comes up with a custom clamp function tailored for all your fluid variables!

NEW

Variable Picker

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.

NEW

Autocomplete your CSS Variables

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.

NEW

Fluid Typography

Design unique typography scales by selecting a minimum font-size for mobile and a maximum font-size for larger devices. The plugin will create the clamp function for you. Insert the variable into your font-size setting. Voila, all done! No need to care about breakpoints anymore.

NEW

Fluid Spacing

Just like with typography, you have the freedom to develop your own unique spacing approach! Our built-in repeater allows you to easily add or subtract any value according to your personal design guide. Although it comes with a default 8-point grid system, you're more than welcome to customize it to suit your needs.

NEW

Fluid Border-Radius

Isn't it frustrating when a beautiful border-radius on desktop gets totally messed up on smaller devices? Worry no more, as fluid border-radius variables have come to your rescue!

NEW

Resources Panel

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.

NEW

Generate Content right inside 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?)

NEW

Using new ChatGPT API functionalities without extra cost

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!

NEW

Add new content… or improve your existing one!

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.

NEW

Global Panel and Heading/Text element integration

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!

NEW

Advanced prompt Settings

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!

NEW

Generate AI images and save them right inside WordPress in one click

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!

NEW

Write faster CSS codes with your AI assistant

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!

NEW

All your session requests are saved in the history tab

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.

NEW

Chat back and forth with the AI assistant

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!

NEW

Your API key is securely stored

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!

NEW

Remove Template & Settings links everywhere

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.

NEW

Enable/disable elements options for your clients

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!

NEW

No access to styling options

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!

NEW

Builder tweaks for editors

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!

NEW

Disable links to edit the Header & Footer

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.

NEW

Enable/Disable Any Toolbar Icon

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.

NEW

Add your Company Logo inside the builder

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.

NEW

Change the Accent Color

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!

NEW

Reduce the Left Panel Visibility

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.