Coding guide: Banners/Status bars

Here you can find examples of how to create banners/status bars on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.

Implementing banners

To implement a banner/status bar using the style shown here, place the CSS and media files into your app and then import the CSS using the @import at-rule:

@import url(resources/status.css);

Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).

Example

HTML to create the banner

The HTML below creates a simple banner.

<section role="status" id="alarm-banner" hidden>
  <p>The Alarm is set for <strong>7 hours</strong> and <strong>14 minutes</strong> from now.</p>
</section>

JavaScript content

The code below displays the banner every time the screen is tapped; the banner disappears after four seconds.

// Set up the banner to disappear after 4 seconds
function scheduleBanner() {
  window.setTimeout(function() {
    document.getElementById("alarm-banner").hidden = true;
  }, 4000);
}
// Display the banner
function showBanner() {
  document.getElementById("alarm-banner").hidden = false;
  scheduleBanner();
}
// Create the banner on any document click; normally you
// would create the banner on some sort of activity occurring.
document.addEventListener("click", showBanner);
// For demo purposes, let's go ahead and create the banner when
// the page loads.
showBanner();

Working demo

You can try out the banner in this live demonstration. Just click the simulated Firefox OS screen to make the banner appear again.

@import url(https://developer.mozilla.org/media/gaia/shared/style/status.css);
@import url('https://developer.mozilla.org/media/css/gaia.css');
html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
  overflow-x: hidden;
  background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed;
}
body { background: none; }

Notice that the <strong> element creates the blue text that's recommended for emphasis of content.