Styling Overview

User Interfaces created with UI Builder can be styled to create a unique and customized visual look and feel. Backendless uses CSS and LESS for style customizations. This means anything that is possible with CSS and LESS is supported by Backendless. There are two levels of styling available for your UI Builder applications: themes and extensions. Themes apply to all pages and should be used as general styling settings applicable the entire application. Extensions should be used to provide CSS/LESS styles that should apply to individual components or pages. Let's review a simple styling configuration that modifies a Select component.

The select component has the following default appearance:

Suppose the top select component needs to have a larger font size and a shadow. To accomplish this, select the top Select component in the User Interface section and type in a class name in the Classes field. The name of the class is arbitrary, we use dropDownStyles, but it can be any other name at this point since the class name is defined in the further steps:

Click the THEME tab, switch to the EXTENSIONS section and click the + New Extension button. In the Create New Style popup, type in the name for your extension. Again, it can be an arbitrary name, we used dropdown. Click SAVE to create the extension:

Once an extension is created, you can add your CSS styles in the EDITOR panel. Add the following CSS class. Notice the name of the class is the same as the name assigned in the Classes field in the first step above:

.dropDownStyles {  
  font-size:20pt;  
  box-shadow: 5px 5px 5px rgba(0,0,0,0.1);  
}

The CSS class defines a font size of 20pt and a shadow. Since the top Select component has the class assigned, it now uses the specified font size and displays a shadow. You can preview the rendering of the page on the PREVIEW tab. Make sure to select the page and click the with extensions checkbox: