Manual Styling with CSS

Styling is achieved using app themes. Each app has its own theme settings, which can be adjusted in the theme menu. 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. Premium users can use the theme menu to customize fonts and colors.

The App Builder adds numerous CSS classes to app elements, from the app container to table cells, allowing specific customizations to premium and free users. Here is an overview of the hierarchy.

Manual styling is available to free and premium users.

Class 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}
          • tbody
            • tr
              • td.{columnName}
              • td.pp-table-detail-panel
        • .pp-bottom-toolbar
          • .pp-bottom-toolbar-container
            • .pp-table-info
    • .pp-form
      • .pp-registration-form-message (registration forms only)
• .pp-form-modal
  • .pp-form

Adding Custom Classes

The class hierarchy mentioned above is available by default. Additional custom CSS class names can be added to table and form columns in the Table Builder and Form Builder respectively. Custom CSS classes are used similarly to default CSS classes.

Adding CSS Classes to Table Columns

Adding CSS Classes to Form Columns

Examples

✨ Example Styling Table Cells

.pp-table thead th,
.pp-table tbody td {
    color: red;
}

✨ Example Styling Filter Containers

.pp-table-container .pp-filter-container > * {
    background-color: yellow;
    color: red;
}

✨ Example Styling Form Input Labels

.pp-app-container .pp-component .pp-form .MuiInputLabel-root{
    color: orange;
    font-weight: bold !important;
    font-style: italic !important;
}

✨ Example 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.