Styling is achieved using app themes. Each app has its own theme settings, which can be adjusted in the Table Builder and Form Builder theme menus. The default theme uses the font family and size defined on the page. The primary color is black, with an additional built-in palette for colorizing elements and shades. We recommend premium users to use the theme menu to customize fonts and colors, while free users can apply CSS classes during runtime.
The App Builder adds numerous CSS classes to app elements, from the app container to table cells, allowing for specific customizations. Here is an overview of the hierarchy.
- .pp-app-container.pp-app-{appId}
- .pp-component
- .pp-header
- .pp-table-container
- .pp-filter-container
- .{columnName}
- .pp-table
- .pp-top-toolbar
- table
- thead
- tr
- th.{columnName}
- tr
- tbody
- tr
- td.{columnName}
- td.pp-table-detail-panel
- tr
- thead
- .pp-bottom-toolbar-container
- .pp-table-info
- .pp-form
- .pp-registration-form-message (registration forms only)
- .pp-component
- .pp-form-modal
- .pp-form
Examples #
Styling table header cells and table cells #
.pp-table thead th,
.pp-table tbody td {
color: red;
}Styling filter containers #
.pp-table-container .pp-filter-container > * {
background-color: yellow;
color: red;
}Styling form input labels #
.pp-app-container .pp-component .pp-form .MuiInputLabel-root{
color: orange;
font-weight: bold !important;
font-style: italic !important;
}Styling form input labels on modal forms #
.pp-modal-form .pp-form .MuiInputLabel-root{
color: orange;
font-weight: bold !important;
font-style: italic !important;
}Notes #
- Do not use the ID assigned to an app container, as it changes with each page load and is intended for internal use only.
- If you need to display multiple instances of an app on the same page with different styles, wrap each app in a container and assign an ID to the container for specific styling purposes.
Don’t know how to add custom CSS to your WordPress theme? #
It’s easy to learn in just a few minutes! Watch the video below…
I think I asked this a few years ago as it related to legacy tables, but I’m wondering if the answer is different now with the creation of the new app features…
Is there a way to apply any conditional formatting? Such as a simple row background color based on if a cell in that row equals a certain value?
Hi Justin,
Conditional formatting is now possible with Table/Form hooks. You can read more about it here: https://wpdataaccess.com/docs/app-table-column-hooks/table-column-hooks-render/
Let us know if you have more questions!