Styles & Classes

Style Overview

This feature enhances your ability to easily review/add/edit/delete all active styles linked to the current element's ID, as well as its corresponding classes across all breakpoints and pseudo-elements.

The initial issue

In vanilla Bricks, seeing all the styles applied to an element - on each breakpoint and for all your pseudo-elements - can be time-consuming at best. And if you want to change multiple style values on each breakpoint, you'll have to manually jump on each breakpoint to see what's going on. With Style Overview, you have access to a table with all the custom styles applied to a specific element (and to all the classes attached to it) for each breakpoint / pseudo-element, and you can even edit your values directly from the table.

How to activate it

Go to the Theme SettingsBuilder TweaksStructure PanelContextual MenuToggle on "Style Overview"

Initial Release Date

June 29, 2023

Last Modification

February 13, 2025

Official Videos

Content Creators Videos

Documentation

The style overview feature enables you to inspect all applied styles for an element within a unified view. This includes styles applied at the ID level, as well as those associated with any class or pseudo-elements. Within the modal, you have the convenience of easily modifying any applied style, copying and pasting styles across different breakpoints, resetting styles at any breakpoint, and even examining the generated CSS on the frontend.

Where can I find it inside the builder?

Once you activate Style Overview in the AT’s Theme Settings, you can simply right-click on any element inside the structure panel – you should see a new “Style Overview” item in the contextual menu. Clicking on this item will open up the Style Overview modal.

More Features in the Styles & Classes category:

List & Manage Unused Global Classes across your whole websiteCheck it Out
Remove All Styling ControlsCheck it Out
WPCodeBox integrationCheck it Out
Cleanup deleted global classes from the elementsCheck it Out
Merge Global ClassesCheck it Out
Contextual Class MenuCheck it Out
Copy/Paste/Reset all the global classes from one element to anotherCheck it Out
SASS integration for Advanced CSS & SuperPower CSSCheck it Out
Class ManagerCheck it Out
Group your Classes by CategoriesCheck it Out
Generate CSS with AICheck it Out
Bulk Actions on ClassesCheck it Out
Style OverviewCheck it Out
Review the CSS generated by Bricks for each Element and ClassesCheck it Out
Class ConverterCheck it Out
Style indicators for the left panel and the pseudo elements shortcutsCheck it Out
Style & classes indicators inside the structure panelCheck it Out
Breakpoint IndicatorsCheck it Out
Indicators of styles inherited from a classCheck it Out
Extend your classes & styles from any elementCheck it Out
Advanced CSS EditorCheck it Out
Export ID Styles to any ClassCheck it Out
Plain ClassesCheck it Out
Class ImporterCheck it Out
More used classes suggestion & group filterCheck it Out
Style Overview ShortcutCheck it Out
Class Manager ShortcutCheck it Out
Component Class ManagerCheck it Out
Autoformat your control values with advanced CSS functionsCheck it Out
Autogenerate your CSS Component selectorsCheck it Out
Extract your classes from Advanced CSS and save them as Bricks Global ClassesCheck it Out
Save your Global CSS from the builderCheck it Out
Group classes by Lock StatusCheck it Out
Autoselect the first unlocked classCheck it Out
Auto-close CSS Variable BracketsCheck it Out
“Class Highlight” indicator in the structure panelCheck it Out
Locked Class IndicatorCheck it Out
Clone any classCheck it Out
Copy class to clipboardCheck it Out
Find & Replace any Style valueCheck it Out
Responsive Grids utility classesCheck it Out
Reorder your Classes inside the Bricks PopupCheck it Out
Lock Styles on element ID levelCheck it Out
Autocomplete support for Multiple ClassesCheck it Out
Reorder/Update/Remove/Reset classes in bulkCheck it Out
Highlight all the elements that share a same classCheck it Out
Class counter & navigatorCheck it Out

You won't build websites without it anymore!

Check the Pricing Plans - Starts from $59