Last active
May 18, 2025 17:54
-
-
Save ayoubkhan558/4e8370d92db2e2ed970e116525275f7b to your computer and use it in GitHub Desktop.
Bricks Builder UI/Skin/Editor Tweaks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [data-builder-mode=custom] { | |
| --builder-bg: #1a1a1a; | |
| --builder-bg-2: #222222; | |
| --builder-bg-3: #2c2c2c; | |
| --builder-bg-accent: #33334d; | |
| --builder-color: #f0f0f0; | |
| --builder-color-description: #bbbbbb; | |
| --builder-color-accent: #6c63ff; | |
| --builder-color-accent-inverse: #ffffff; | |
| --builder-color-knob: #444444; | |
| --builder-border-color: #3a3a3a; | |
| --builder-placeholder-opacity: 0.4; | |
| --bricks-tooltip-bg: #0f0f0f; | |
| --bricks-tooltip-text: #f0f0f0; | |
| } | |
| /* --- Make highlight of the active element in structure more prominent --- */ | |
| #bricks-structure .element.active>.structure-item { | |
| background-color: var(--builder-color-accent); | |
| } | |
| #bricks-structure .element.active>.structure-item input, | |
| #bricks-structure .element.active>.structure-item>.title input, | |
| #bricks-structure .element.active>.structure-item>.title i, | |
| #bricks-structure .element.active .structure-item .more { | |
| color: #000; | |
| } | |
| #bricks-structure .element.active>.structure-item input::-moz-selection { /* Code for Firefox */ | |
| color: #fff; | |
| background: #1a99e0; | |
| } | |
| #bricks-structure .element.active>.structure-item input::selection { | |
| color: #fff; | |
| background: #1a99e0; | |
| } | |
| #bricks-structure .element.active > .structure-item:hover .actions .action .bricks-svg-wrapper path { | |
| color: #111; | |
| } | |
| /* --- Make + button more prominent */ | |
| #bricks-toolbar .logo { | |
| background-color: #818689; | |
| } | |
| #bricks-toolbar .logo:hover { | |
| background-color: var(--builder-color-accent); | |
| } | |
| #bricks-toolbar li.elements { | |
| background-color: var(--builder-color-accent); | |
| opacity: 1; | |
| } | |
| #bricks-toolbar li.elements:hover { | |
| background-color: #edca5b; | |
| } | |
| #bricks-toolbar li.elements .bricks-svg-wrapper .bricks-svg { | |
| color: var(--builder-border-color); | |
| } | |
| /* --- Make active STYLE panel more prominent */ | |
| .bricks-panel-controls .control-group.open .control-group-title { | |
| background-color: var(--builder-color-accent); | |
| color: #000; | |
| font-weight: 600; | |
| letter-spacing: 2px; | |
| } | |
| .control-group.open { | |
| background-color: #161614; | |
| } | |
| /* --- Make controls separators more prominent */ | |
| .bricks-panel-controls .control-groups .control-separator { | |
| background-color: var(--builder-bg-accent); | |
| margin: 0; | |
| padding: 10px 20px; | |
| } | |
| .bricks-panel-controls .control-separator label { | |
| letter-spacing: 2px; | |
| font-weight: 500; | |
| font-size: 11px; | |
| padding: 0; | |
| } | |
| .bricks-panel-controls .control-separator .control-inner { | |
| gap: 0; | |
| } | |
| .bricks-panel-controls .control { | |
| margin-bottom: 8px; | |
| } | |
| [data-control=separator]:before { | |
| display: none; | |
| } | |
| /* --- Make active class prominent */ | |
| #bricks-panel-element-classes .active-class.active input { | |
| background-color: var(--wp--preset--color--light-green-cyan); | |
| color: #000; | |
| } | |
| /* --- Move element actions under the element --- */ | |
| .brx-body.iframe .bricks-element-actions { | |
| top: 100%; | |
| } | |
| /* --- Prominent Has Setting Indicators --- */ | |
| .bricks-panel-controls .has-setting { | |
| left: -11px; | |
| width: 3px; | |
| background-color: var(--builder-color-accent); | |
| transition: background-color 0.1s; | |
| transform: none; | |
| } | |
| .bricks-panel-controls .control-group-title .has-setting { | |
| left: 9px; | |
| } | |
| .bricks-panel-controls .has-setting:hover { | |
| background-color: transparent; | |
| } | |
| .bricks-panel-controls .has-setting .indicator { | |
| display: none; | |
| } | |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://www.reddit.com/r/BricksBuilder/comments/1afhsmp/did_anyone_custom_styled_the_bricks_ui/
https://brickslabs.com/bricks-builder-editor-tweaks/