Increase font size of element names in the builder

How To
1

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.

1 Like
2

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
4

Hi Sridhar

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

cheers - roy

5

Hi @royby

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

Screenshot_52
Screenshot_521583Ă—983 95 KB

2 Likes
6

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

1 Like
7

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

1 Like
8

Thank you for your reply. Cheers

9

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