Release 1.0 (Beta)
April 9, 2023
65 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.
NEW
Test your Variables on Frontend
The frontend playground lets you have fun with your theme variables without impacting your entire site. It's an excellent method to experiment with various color schemes, achieve consistent typography and spacing, all while keeping your settings safe and sound!
NEW
Overview of your Imported Classes
At the playground, you can easily see all the classes you've imported, count their usage on any page, and smoothly browse through all the elements that utilize them.
NEW
Hex Color Converter
Looking to convert a HEX color to RGB or HSL? Numerous online tools can help you out. Though, why step away from creating your masterpiece and lose precious time when you can obtain these values right on your website?
NEW
Scale & Gradient Generator
Within the frontend Playground, you'll find a handy scale generator! Simply pick at least two distinct colors, and the script will generate all the intermediate shades nestled between them.
NEW
Color Palette Generator
The frontend Playground is full of handy tools designed to assist you in crafting the ideal color scheme for your project. One such tool is the color palette generator - just pick a base color, and the script will whip up an awesome palette just for you.
NEW
Popular Palettes
The popular palette helper offers you the chance to explore well-loved color pairings that you can easily copy and paste into your personal color palette.
NEW
Color Lab
The Color Lab helper lets you have fun working with a particular color: tweak the brightness and saturation levels to achieve the precise shade you desire. Additionally, you can easily modify the luminance percentage based on certain accessibility needs.
NEW
Light and Dark Color Theme
The frontend playground offers a light/dark theme color choice. Depending on your site's overall vibe, picking the right theme could make your life easier!