# Gấu Bricks - Bricks Builder Child Theme | Enhancing Bricks Builder with simple, useful refinements

**URL:** <https://forum.bricksbuilder.io/t/g-u-bricks-bricks-builder-child-theme-enhancing-bricks-builder-with-simple-useful-refinements/35312>\
**Category:** Developers\
**Created:** [September 3, 2025, 1:14pm UTC](https://forum.bricksbuilder.io/t/g-u-bricks-bricks-builder-child-theme-enhancing-bricks-builder-with-simple-useful-refinements/35312 "2025-09-03T13:14:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![datgausaigon](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/datgausaigon/32/31116_2.png) [@datgausaigon](https://forum.bricksbuilder.io/u/datgausaigon)\
**Post date:** [September 3, 2025, 1:14pm UTC](https://forum.bricksbuilder.io/t/g-u-bricks-bricks-builder-child-theme-enhancing-bricks-builder-with-simple-useful-refinements/35312/1 "2025-09-03T13:14:18Z")

</div>

Hi,

While using **Bricks Builder** , I encountered several usability issues. That inspired me to develop [Gấu Bricks Child Theme](https://github.com/datgausaigon/gau-bricks), focusing on practical refinements:

### 1. “Popup” for the Color Palette selector:

- **Problem** : By default, the Color Palette is embedded in the Panel, which is cramped and inconvenient.
- **Solution** : I moved it into a separate **Popup** , much more user-friendly.
- I wrote a dedicated article about this earlier: [Colors Palette Manager/Select in Popup Windows](https://forum.bricksbuilder.io/t/colors-palette-manager-select-in-popup-windows/25849)

 ![Color Palette in the Panel](https://forum.bricksbuilder.io/uploads/default/original/3X/f/2/f23b68a9aacd1f2abaacd27ac30f4548fa46220c.png)

### 2. Optimized element renaming in the Structure Panel:

- **Problem** : Renaming an element was cumbersome:
  - Drag & drop could still be triggered unintentionally.
  - Selecting text blocks for editing was difficult.
  - No visual feedback to indicate “rename mode.”

- **Solution** : My refinements include:
  - Blocking drag while renaming.
  - Enabling smooth text block selection.
  - Adding custom styling (color/format) to make the rename state visually clear.

- I also published a proposal about this: [Improve element renaming in Bricks Builder’s Structure Panel](https://forum.bricksbuilder.io/t/improve-element-renaming-in-bricks-builder-s-structure-panel/35309)

 ![Renaming Elements in the Structure Panel](https://forum.bricksbuilder.io/uploads/default/original/3X/e/9/e98e3738f66bad5b9f94ebe9d75b9d3f8b36781c.png)

### 3. “Popup” for the Element Rich Text (Text Edit – TinyMCE):

- **Problem** : No fullscreen option and the default font was hard to read.
- **Solution** :
  - Added **Fullscreen** mode for comfortable editing.
  - Applied **better fonts and styles** for readability.

 ![Custom Element Text](https://forum.bricksbuilder.io/uploads/default/original/3X/c/f/cfbd93311dc911acd9a657b3372112fa5a247da2.png)

### 4. Panel Scrollbar:

**Problem:** Left/right panels have no scrollbar; users cannot manually scroll with a scrollbar when needed.  
**Solution:**

- Enabled native browser scrollbars for both panels.
- Styled scrollbars to be slim and consistent with Builder UI.
- Added filter toggle for optional activation.

 ![Panel Scrollbar](https://forum.bricksbuilder.io/uploads/default/original/3X/f/6/f662141ca74092f92e8e18680560d9885671bdd5.png)

### 5. Vietnam Theme:

- To celebrate the **80th Anniversary of Vietnam National Day (Sep 2, 1945 – Sep 2, 2025)**, I added a small feature: an optional **Vietnam Theme** for Bricks Builder.

 ![80th Anniversary of Vietnam National Day](https://forum.bricksbuilder.io/uploads/default/original/3X/d/1/d1f30a77abe1d71fb1f1585ca1dd871cb2c7ebf6.png)

> **[GitHub - datgausaigon/gau-bricks: 🐻 Gấu Bricks — Bricks Builder Child Theme | Tối ưu...](https://github.com/datgausaigon/gau-bricks)**
>
> 🐻 Gấu Bricks — Bricks Builder Child Theme | Tối ưu Bricks Builder với các tinh chỉnh nhỏ gọn và hữu ích (Enhancing Bricks Builder with simple, useful refinements).

 ![Vietnam Theme](https://forum.bricksbuilder.io/uploads/default/original/3X/5/1/5179bb830309d138b5f7c5a00c0fec340a1ebf7d.jpeg)

Thanks  
🐻

---

<div class="post-metadata">

**Author:** ![Lukay](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/lukay/32/4222_2.png) [@Lukay](https://forum.bricksbuilder.io/u/Lukay)\
**Post date:** [October 8, 2025, 9:21am UTC](https://forum.bricksbuilder.io/t/g-u-bricks-bricks-builder-child-theme-enhancing-bricks-builder-with-simple-useful-refinements/35312/2 "2025-10-08T09:21:08Z")

</div>

Thanks for your work😄

Unfortunately I’m already using a child theme that gives me gsap etc. I don’t want to be that guy that asks if these enhancements could be implemented by using code snippets. I found you posted them for the rename handling. Any possibility to post them for the other improvements if possible?

Thanks in advance and your work is much appreciated ✨

---

<div class="post-metadata">

**Author:** ![datgausaigon](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/datgausaigon/32/31116_2.png) [@datgausaigon](https://forum.bricksbuilder.io/u/datgausaigon)\
**Post date:** [October 8, 2025, 9:40am UTC](https://forum.bricksbuilder.io/t/g-u-bricks-bricks-builder-child-theme-enhancing-bricks-builder-with-simple-useful-refinements/35312/3 "2025-10-08T09:40:51Z")

</div>

Hi @Lukay ,  
Thanks for checking out and enjoying my open source code. I will take the time to make it a plugin editon.

And since it’s open source, you can also view and reuse it, integrate it if you want.

> **[GitHub - datgausaigon/gau-bricks: 🐻 Gấu Bricks — Bricks Builder Child Theme | Tối ưu...](https://github.com/datgausaigon/gau-bricks)**
>
> 🐻 Gấu Bricks — Bricks Builder Child Theme | Tối ưu Bricks Builder với các tinh chỉnh nhỏ gọn và hữu ích (Enhancing Bricks Builder with simple, useful refinements).

Thanks  
🐻

---

<div class="post-metadata">

**Author:** ![datgausaigon](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/datgausaigon/32/31116_2.png) [@datgausaigon](https://forum.bricksbuilder.io/u/datgausaigon)\
**Post date:** [October 12, 2025, 12:23pm UTC](https://forum.bricksbuilder.io/t/g-u-bricks-bricks-builder-child-theme-enhancing-bricks-builder-with-simple-useful-refinements/35312/4 "2025-10-12T12:23:51Z")

</div>

Hi,  
New Version v1.0.3  
Updated with Bricks 2.1.2  
Especially with the ability to edit element names in the Structure Panel.

- **Visual styling** while renaming: highlight the element being renamed for better visibility.

- **Lock drag/drop** of elements while renaming.

- Allow **text selection** (highlight part or full text when renaming).

- Allow **paste text** via Ctrl/Cmd+V and Context Menu during renaming.  
 ![01](https://forum.bricksbuilder.io/uploads/default/original/3X/6/4/64c2b35c2a31274e6c4edc801f44b6f753d074b8.png)

- Click the icon on the left to enable/disable renaming/drag-drop element  
 ![02](https://forum.bricksbuilder.io/uploads/default/original/3X/f/4/f4541cd571b34a760d9605d2c544c4395bcc1a26.png)  
–  
 ![3](https://forum.bricksbuilder.io/uploads/default/original/3X/3/f/3f15edd40bfd81416ecc810152ecef47db5f9d56.png)

- You can use the default Enter shortcut to enter renaming state.

> **[GitHub - datgausaigon/gau-bricks: 🐻 Gấu Bricks — Bricks Builder Child Theme | Tối ưu...](https://github.com/datgausaigon/gau-bricks)**
>
> 🐻 Gấu Bricks — Bricks Builder Child Theme | Tối ưu Bricks Builder với các tinh chỉnh nhỏ gọn và hữu ích (Enhancing Bricks Builder with simple, useful refinements).

@Lukay  
I have also separated the source code of the modules. You can refer to the previous research to integrate into your code.  
Use the files:

```auto
assets/custom-structure-item-renaming.js
assets/custom-structure-item-renaming.css

```

into your project.

Thanks  
🐻

---

<div class="post-metadata">

**Author:** ![bricksonemore](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/b/b5ac83/32.png) [@bricksonemore](https://forum.bricksbuilder.io/u/bricksonemore)\
**Post date:** [October 13, 2025, 9:48am UTC](https://forum.bricksbuilder.io/t/g-u-bricks-bricks-builder-child-theme-enhancing-bricks-builder-with-simple-useful-refinements/35312/5 "2025-10-13T09:48:23Z")

</div>

Thanks for sharing. Clean code and CSS only fullscreen color control popup is great.

Just share it back here

```auto
/ ***color-palette-popup.css*** /

/ ***after line 53, gradient two tone color for bacjground*** /
background: linear-gradient(to right, var(--builder-bg) 63%, var(--builder-bg-2) 63%);
box-shadow: inset 0 0 0 6px #b05990;

/ ***after line 83 and 101, scrollbar*** /
scrollbar-color: var(--builder-color-accent) var(--builder-bg-3);
scrollbar-width: thick;

```

Using **MutationObserver** just to handle color palette list toggling seems isn’t really performance-efficient — it’s overkill for such a simple UI change.

A direct event listener or a small state check would be more lightweight and performant in this case.

```auto
// color-palette-popup.js
// replace it from line 19 to 35

window.addEventListener('load', () => {
    const innerPanel = document.getElementById('bricks-panel-inner');
    if ( ! innerPanel ) return;

    let colorTimeout;
    innerPanel.addEventListener('click', (event) => {
        const targetEle = event.target;
        if ( targetEle.closest('.bricks-control-preview') && targetEle.closest('div[data-control="color"]') ) {
            clearTimeout(colorTimeout);
            colorTimeout = setTimeout(() => {
                const colorControl = targetEle.closest('.bricks-control-preview');
                const colorPopup = colorControl?.nextElementSibling;
                const colorPalette = colorPopup?.firstElementChild;

                if ( colorPalette?.classList?.contains('color-palette') ) {
                    maybeSetColorsToList(colorPopup);
                }
            }, 300);
        }
    });
})

```

---

<div class="post-metadata">

**Author:** ![datgausaigon](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/datgausaigon/32/31116_2.png) [@datgausaigon](https://forum.bricksbuilder.io/u/datgausaigon)\
**Post date:** [October 14, 2025, 2:01am UTC](https://forum.bricksbuilder.io/t/g-u-bricks-bricks-builder-child-theme-enhancing-bricks-builder-with-simple-useful-refinements/35312/6 "2025-10-14T02:01:33Z")

</div>

Hi @bricksonemore  
Thanks for the improved source code. I will update in a patch.  
If you have time please go through and evaluate the other features.  
Thanks  
🐻

---

<div class="post-metadata">

**Author:** ![datgausaigon](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/datgausaigon/32/31116_2.png) [@datgausaigon](https://forum.bricksbuilder.io/u/datgausaigon)\
**Post date:** [February 18, 2026, 9:01am UTC](https://forum.bricksbuilder.io/t/g-u-bricks-bricks-builder-child-theme-enhancing-bricks-builder-with-simple-useful-refinements/35312/7 "2026-02-18T09:01:07Z")

</div>

Hi all,  
New Version v1.1.0  
Updated with Bricks 2.2.0  
Plugin Version v1.0.0

**New Feature – Compact Elements Panel:**

 ![image](https://forum.bricksbuilder.io/uploads/default/original/3X/4/3/4311eec7bf2beb2d5fe6362f5cff40b691ac618f.png)

Hook/Filter:

`add_filter( ‘gau/bricks/builder/enable_compact_elements_panel’, ‘__return_true’ );`

**Bricks 2.2 Compatibility:**

- **Color Palette popup** is now working correctly with Bricks 2.2.

- **Element renaming optimization** in the **Structure Panel** is now fully functional with Bricks 2.2.

- Improved **Popup** experience for Element Text (Text Edit – TinyMCE).

**Special features:**

- The Popup Color Palette can be easily expanded/collapsed.
- Other features can be used within the Popup when it is expanded.

 ![Screenshot 2026-02-18 155433](https://forum.bricksbuilder.io/uploads/default/original/3X/4/d/4d0682c428f0b09082218b63c6119559951f496f.png)

**New button feature: Expand Palettle Popup.**

 ![image](https://forum.bricksbuilder.io/uploads/default/original/3X/0/8/08caf04b2db3fa3dc03a80c9e2e7db085571f342.png)

**Color Palette Popup Expand with all features.**

You can use the Child Theme version here:

> **[GitHub - datgausaigon/gau-bricks: 🐻 Gấu Bricks — Bricks Builder Child Theme | Tối ưu...](https://github.com/datgausaigon/gau-bricks)**
>
> 🐻 Gấu Bricks — Bricks Builder Child Theme | Tối ưu Bricks Builder với các tinh chỉnh nhỏ gọn và hữu ích (Enhancing Bricks Builder with simple, useful refinements).

You can use the Plugin version here:

> **[GitHub - datgausaigon/gau-bricks-addon: 🐻 Gấu Bricks Addon — Phiên bản Plugin của Gấu...](https://github.com/datgausaigon/gau-bricks-addon)**
>
> 🐻 Gấu Bricks Addon — Phiên bản Plugin của Gấu Bricks Theme

Thanks

🐻