How to style various elements of the shell.

Status Bar

The Status Bar is part of the mobile operation that shows the time and status of things like the cellular signal and battery. Your application doesn't have much control of this area of the display, but you can set the color of the foreground using the CSS below.

NavigationPage {
  -rock-status-bar-text: light;

(Valid values: light, dark)

The Navigation Bar is the top header of your application. It typically holds the header image and any content you want on the right side.

You can style this bar with the following CSS.

.navigation-bar {
    -xf-bar-background-color: #9acced;
    -xf-bar-text-color: #ffffff;

On iOS, the Navigation Bar normally has a small 1-pixel shadow/border line between the bottom of the bar and the page content. If you are trying to create a seamless color flow from the bar to your page background you can use the following CSS to turn that off.

.navigation-bar {
    -rock-ios-hide-navigation-bar-separator: true;

In iOS, there is a pattern in which the navigation bar is see-through and blurs the content beneath:

You can accomplish the same thing easily. There are settings to adjust this in the Styles tab of your mobile application app builder:

Or, alternatively, through CSS:

.navigation-bar {
    -xf-bar-background-color: rgba(255, 0, 0, 0.30); 
    -rock-ios-navbar-transparent: true;
    -rock-ios-navbar-blur: ultrathin;

To produce an outcome of:

Tab Bar

The Tab Bar only displays when the shell is set to Tab mode.

You can style this bar with the following CSS.

.tab-bar {
    -xf-bar-background-color: #9acced;
    -rock-selected-tab-color: #ffffff;
    -rock-unselected-tab-color: #d0d0d0;

Note: -rock-selected-tab-color and -rock-unselected-tab-color are only available in v2 and later of the mobile shell.

Additional Styling

Here are some more miscellaneous properties to allow customization of the shell.

Last updated

⚙️ Powered by Rock RMS