Increase font size of element names in the builder

We now have the ability to change the colors In the builder, thank you, it is easier for me to read. Would like to increase the font size so the elements are easier to read.

You can add the following sample CSS in Builder tab of Bricks’ settings to increase the font-size of some interface elements’ text, increase the opacity of placeholder text for better readability etc.:

[data-builder-mode=custom] {
    --builder-placeholder-opacity: .75;
    --builder-color-description: #ddd;
}

#bricks-panel-elements-categories .category-title {
    font-size: 16px;
    letter-spacing: 1px;
}

#bricks-panel-search {
    font-size: 16px !important;
}

.bricks-add-element .element-label,
.bricks-structure-list input[type="text"],
#panel-element-classes .bricks-control-popup ul li .name,
.bricks-panel,
.bricks-panel-controls .control-group-title,
.bricks-panel-controls .control .description {
    font-size: 15px;
}

#panel-element-classes .active-class input,
#panel-element-classes .active-class .symbol,
[data-balloon]:after {
    font-size: 14px;
}

[data-control=editor] .wp-editor-tools button {
    font-size: 13px;
}
5 Likes

Hi Sridhar

I don’t see any place in the builder tab to add this code, bricks version 1.4 RC2

cheers - roy

Hi @royby

It’s hidden by default, you need to set it to custom first. Please see image below

2 Likes

Hi @royby, you can also find a helpful entry in the Bricks Academy:

1 Like

Thanks Michael, I had no idea this function existed. Cheers :blush:

1 Like

Thank you for your reply. Cheers

Thank you @Sridhar, your code helped me create a much more usable (for me) UI/UX.