Shell Components
How to style various elements of the shell.
Last updated
How to style various elements of the shell.
Last updated
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.
(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.
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.
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:
To produce an outcome of:
The Tab Bar only displays when the shell is set to Tab mode.
You can style this bar with the following CSS.
Note: -rock-selected-tab-color and -rock-unselected-tab-color are only available in v2 and later of the mobile shell.
Here are some more miscellaneous properties to allow customization of the shell.
.navigation-bar-title
Label
Style the title of the page that displays on the navigation bar.
.navigation-bar-image
Image
Style the image that if uploaded, displays in the middle of the navigation bar.
