Element style

Element style is key to the look and feel of a webpage. It’s about the design features you add to parts like buttons, forms, and text fields.

In this section, we’ll look at style options that help you show your data in a clear and engaging way.

Overview

The Application Builder offers a wide range of customization options to personalize the look and feel of a page. You can control everything, from color schemes, to typography, and spacing.

Each element on a page has its own style editor on the right sidebar. This area has everything you need to change how an element looks, like colors and fonts.

You can set the font style and size, as well as the color, for each element on its own. This lets you make an app that’s both good-looking and easy to understand.

Alternatively, you can choose to inherit the default styles defined in your theme settings for a cohesive look.

Set theme

Baserow allows for the customization of specific elements on your page. To do this, select the element you want to customize, go to the General tab in the right-hand panel, and click the settings icon to open a modal window with styling options. The available options will vary depending on the element selected. Make the desired adjustments within the modal window.

Learn more about how to customize your applications at the application level.

Element border

To add a top and bottom border to an element and customize the border width and color, follow these steps:

1. Select the element: Identify the element to which you want to add the borders.
2. Access the style editor: Navigate to the style editor of the selected element.
3. Specify border width and color: There are options to set borders for different sides (top, bottom, left, right) separately. Set the width and color of the borders.
4. Preview and adjust: After setting the border properties, preview your changes to ensure they look as expected.

By following these steps, you can easily add custom borders with the desired width and color to elements within a page.

Element padding

Padding offers control over the spacing between the content and the border of an element.

Padding creates a buffer zone around the content, giving you control over the layout and visual hierarchy of the page.

• Left and Right Padding: This adjusts the horizontal space between the content and the left and right borders of the element.
• Top Padding: This controls the vertical space between the content and the top border, impacting how close the content sits to the top of the element.
• Bottom Padding: This adjusts the vertical space between the content and the bottom border, affecting how close the content sits to the bottom of the element.

Element background color

Background colors enhance the visual design and user experience of a page. Setting a background color for an element fills the entire area of that element.

Adding a background color gives a spotlight to certain elements on a page.

To change the default background color, adjust the color in the theme settings. This will cause any element using the colored background to update.

You can remove an existing background color at any time by selecting None.

Element width

Element width determines how much horizontal space an element takes up on the screen. Essentially, it controls how wide your element will be.

Baserow Application Builder offers several options for customizing element width:

• Full Width: Stretches the element to fill the entire available space.
• Normal: Sets the element to a standard width, creating a balanced layout.
• Medium: Makes the element slightly narrower than the normal width.
• Small: Creates the narrowest size option for the element.

Each choice corresponds to a specific width setting, allowing you to tailor the layout according to your design needs.