Universal Tab for Mozilla websites
CSS JavaScript HTML
Pull request Compare This branch is 32 commits behind mozilla:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
docs-assets
less
media/img
.gitignore
README.md
bower.json
gulpfile.js
index.html
package.json

README.md

Tabzilla

This is the home of Tabzilla, the universal tab you can add to your website. Below follows simple instructions on how to get, and use Tabzilla.

Upgrading to the new Tabzilla

Before you switch to the new Tabzilla, there are a couple of caveats you need to be aware of.

  • Tabzilla is no longer available as a hosted service. You have to add it to your website using one of the options below.
  • Tabzilla no longer needs any fonts bundled with it so, we are no longer including @font-face declarations for Open Sans in the CSS.
  • This version of Tabzilla is static and there is no requirement for JavaScript, as such, we no longer inject jQuery.

If you have been relying on any of these assets being included/injected by Tabzilla, you will now have to manually include them on your site.

Bower Package

Do you use Bower to manage your front-end dependencies? Well, then you will be happy to hear that you can install Tabzilla using Bower.

bower install mozilla-tabzilla

That's it! Now you have all the bits you need. Next step, add it to your site.

Manual Download

Don't use Bower? No problem, you can download the latest release right here from the releases page.

Once downloaded, extract the package and add the css and media folders to your project.

Using Tabzilla

First step is to add the tabzilla.css file to you main HTML file:

<link rel="stylesheet" type="text/css" href="css/tabzilla.css" media="screen" />

Next, you need to add the following required HTML to your document.

<div id="tabzilla">
    <a href="https://mozilla.org">Mozilla</a>
</div>

Changing The Color of the Wordmark

By default the color of the wordmark on Tabzilla is transparent, as below:

Tabzilla with transparent wordmark

You might want to change this to be a solid color instead. You can change the color of the wordmark by adding the following override to your CSS:

#tabzilla:before {
    background-color: #0C99D5;
}

The above will result in the wordmark being displayed as follows:

Tabzilla with custom pink wordmark