# Styling WebUI for Connected Portal

- Published on Jan 29, 2024
- 2 minute(s) read

Since Connected Portals are often accessed by a customer, it is sometimes valuable to have the UI/UX/look and feel of the Connected Portal reflect the UI/UX/look and feel of the customer organization. Even more so, a customer app which is entirely branded and has the look and feel of the customer's organization can be created in Mobileforce.

## Styling Customer Apps with CSS

To achieve this, Mobileforce provides the following CSS based styling capabilities for the connected portal customer app using the following prop:

### Code snippet

```none
<prop key="adlwebui-css"> https://apps.mobileforcesoftware.com/customers/customer/style.css
</prop>
```

In the above example, CSS files are kept under /ebs/www/html/customers where a file called style.css can be created and used to customize this app’s styling.

## Styling Configuration

### Customer Home URL specification

Location : applet->data->prop

```none
<prop key="customhomeurl">http://apps.fonemine.com/adlwebui/navscreen.php?path=companyName&amp;initialbgcolor=0096d6</prop>
```

The URL can take following style parameter which controls the style before ADL is loaded. When mobile client loads the above URL, the initial page gets loaded with header bar, background color with loading indicator. Then the ADL gets read and the view is rendered. The following GET parameters control the style of the initial page:

- initialbgcolor - Takes hex color value
- initialfgcolor - Takes hex color value
- initialbgimage - Take URL for the background image (not recommended, as it slows the initial load time of the page)

### Component Style Control

The following controls can be specified to control the WebUI:

### Code snippet

```xml
<prop key="style#header-bar#color">#FFFFFF</prop>
<prop key="style-ios#header-bar#color">#FFFFFF</prop>
<prop key="style-ios#phone-header-bar#color">#FFFFFF</prop>
<prop key="style-ios-tablet#header-bar#color">#FFFFFF</prop>
<prop key="style-android#header-bar#color">#FFFFFF</prop>
<prop key="style-andorid-phone#header-bar#color">#FFFFFF</prop>
<prop key="style-andorid-tablet#header-bar#color">#FFFFFF</prop>
```

## Components Styles

### Gradient CSS Format

For gradient color specification we have to follow the special format:

### Code snippet

```xml
<prop key="style#<component-prefix>#gradient">style, start hex color, end hex color</prop>
```

- style - Can take the following value top/left/circle

#### For example:

### Code snippet

```xml
<prop key="style#banner#gradient">top,#0E4ED0,#3BBCF9</prop>
```

#### Header Bar Style

### Code snippet

```xml
<prop key="style#header-bar#color">#FFFFFF</prop>
<prop key="style#header-bar#background-color">#0096d6</prop>
```

#### Banner Style

### Code snippet

```xml
<prop key="style#banner#gradient">top,#0E4ED0,#3BBCF9</prop>
```

#### Tool Bar Style

### Code snippet

```xml
<prop key="style#toolbar#background-color">#FFFFFF</prop>
<prop key="style#toolbar#border-top-color">#0096d6</prop>
<prop key="style#toolbar#border-top-width">1px</prop>
<prop key="style#toolbar#border-top-style">solid</prop>
```

#### Search Bar Style

### Code snippet

```xml
<prop key="style#search-bar#background-color">#0096d6</prop>
```

#### Segment Bar Style

### Code snippet

```xml
<prop key="style#segment-bar#background-color">#0096d6</prop>
<prop key="style#segment-bar#border-color">#FFFFFF</prop>
<prop key="style#segment-bar#color">#FFFFFF</prop>
<prop key="style#segment-bar-selected#background-color">#FFFFFF</prop>
<prop key="style#segment-bar-selected#color">#0096d6</prop>
```

#### Screen List Style

### Code snippet

```xml
<prop key="style#screen-list-container#gradient">top,#FFFFFF,#FFFFFF</prop>
<prop key="style-android#screen-list#background-color">#e9e9e9</prop>
<prop key="style-android#screen-list#color">#2a2a2a</prop>
<prop key="style-android#screen-list-border#border-color">#d3d3d3</prop>
```

- screen-list-container - property is used to change the background color of the screen type "list". If this property is not specified, then "style#screen" properties is used.

#### Screen List Section Style

### Code snippet

```xml
<prop key="style#screen-list-section#background-color">#e9e9FF</prop>
<prop key="style#screen-list-section#color">#2a2aFF</prop>
<prop key="style#screen-list-border-section#border-color">#d3d3FF</prop>
```

### Screen Grid Style

### Code snippet

```xml
<prop key="style#screen#gradient">top,#0E4ED0,#3BBCF9</prop>
<prop key="style#screen#background-color">#0E4ED0</prop>
```

- style#screen - Is used to control both the grid and list screen background. If style#screen-list-container is specified for screen type "list", then it takes higher precedence.

### Slider Buttons

Slider buttons are present in RSS, CMS, and Binder screen.

### Code snippet

```xml
<prop key="style#slider-buttons#background-color">#0096d6</prop>
```