App Design and Themes

Themes

There are several pre-built themes that can be applied to your app. Themes are located in Settings -> Themes.

There are 2 types of Themes to choose from.

General: These are general use themes that simply change the colors of various elements throughout the app.

Custom: Custom themes include more advanced modifications to elements such as toggles, side navigation, flexbox menus, etc. These themes are production ready but may be updated frequently.

Design Options

Throughout the Tadabase platform, there are basic design options present in several different locations. These design options are consistent throughout each area and can be used to change the basic look and feel of rows, columns, and components. The options that are available are listed below:

To customize the design options for any row, column, or component, you must first edit the element you wish to customize.

Editing Rows and Columns

For Rows and Columns, hover over the element and select Edit from the dropdown menu.

Editing Components

For Components, you must first click on the component to open the component configuration window. Select the Design tab to customize.

Fonts

Within the Fonts tab, you can customize the font family, font size, line height, alignment, and color.

If you have imported external font families, you can enter the name of the imported font family here to apply the font family to element you are currently editing.

Background

Within the Background tab, you can customize the background color, size, and repeat options.

Border

Within the Border tab, you can customize the border style, width, direction, and color.

Spacing

Within the Spacing tab, you can define custom spacing and padding to be used with the page element. 

Margin: The space between an elements border and the edge of the next element.

Padding: The space between the elements border and the content within the element

You may use the following units to define margin and padding

CSS

Within the CSS tab, you can enter custom CSS or CSS classes to further customize this element.

When adding custom CSS inside of a component, you do not need to include the CSS selector as the selector will be predefined by the component itself. You can write the CSS as "inline".

For example:

height: 500px; width: 500px; display: block;