Shell
Below is tips for styling the mobile 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 foreground color using the CSS below.
1
NavigationPage {
2
-rock-status-bar-text: light;
3
}
Copied!
(Valid values: light,dark)

Navigation Bar

The Navigation Bar is the top of 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.
1
.navigation-bar {
2
-xf-bar-background-color: #9acced;
3
-xf-bar-text-color: #ffffff;
4
}
Copied!
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.
1
.navigation-bar {
2
-rock-ios-hide-navigation-bar-separator: true;
3
}
Copied!

Tab Bar

The Tab Bar only displays when the shell is set to Tab mode.
You can style this bar with the following CSS.
1
.tab-bar {
2
-xf-bar-background-color: #9acced;
3
-rock-selected-tab-color: #ffffff;
4
-rock-unselected-tab-color: #d0d0d0;
5
}
Copied!
Note: -rock-selected-tab-color and -rock-unselected-tab-color are only available in v2 and later of the mobile shell.
Last modified 7mo ago