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.