Styling
This section covers the different styling properties that can be applied to elements, such as colors, borders, shadows and fonts.
Each element that you add to your page has a default styling applied to it. In short, styling refers to what your elements look like, and this is done by changing styling settings:
- Background color or image
- Border
- Shadow
- Font
- Transitions
The settings above open up for a wide range of different looks where to elements that perform exactly the same task can look very different.
These two input element serve the same purpose, but their styles are different. The bottom one seems to hover above the page – an effect often used to draw attention to a particular element.
Each element can be styled individually by opening the Property Editor and making changes to the settings in the Appereance tab:
You can tweak the style settings of each individual element, but Bubble also offers tools to set up stylesheets that you can manage from one place.
But Bubble also has several different tools for efficiently managing and updating the styles of your app's elements. They are split into three different sections:
The Color Variables feature in the Styles tab enables you to establish a palette of colors that you can apply throughout your app. Making changes in a Color variable automatically applies those changes to every Style and element connected to that variable.
The Font Variables feature in the Styles tab enables you to establish a collection of fonts that you can apply throughout your app. Making changes in a Font variable automatically applies those changes to every Style and element connected to that variable.
The Styles tab in Bubble provides you with a centralized place to define and manage all of your app's style settings.
Styles create a consistent, visually appealing design for your app while making it easier to update that design in the future. Making changes to a Style automatically applies those changes to every element connected to it.
Article: Styles
This section covers the general styling settings of your app:
- Favicon
- Progress bar color
- Data loading spinner color
- Remove Bubble mention in console
Last modified 2mo ago