mozilla

Tabzilla

The universal tab for the Mozilla websites.

Using Tabzilla

Adding the universal tab requires to a site requires:

  1. Add the static tab link (example below) to the top of your template
    <a href="http://www.mozilla.org/" id="tabzilla">mozilla</a>
  2. Include the tabzilla.css CSS file either as a CSS include or built into your minified styles
    <link href="//www.mozilla.org/tabzilla/media/css/tabzilla.css" rel="stylesheet" />
  3. Include the tabzilla.js file in your template (preferably in the footer)
    <script src="//www.mozilla.org/tabzilla/media/js/tabzilla.js"></script>

Using Localized Tabzilla

To use localizable version of tabzilla, you need to go by step 1 & step 2 as before. Then in the step 3, instead of the previous one, add these two JavaScripts as follows:

<script src="https://raw.github.com/debloper/tabzilla/master/media/js/tabzilla.js"></script>
<script src="https://raw.github.com/debloper/tabzilla/master/media/js/locale.js"></script>

You can see the a working example of localized tabzilla in this page itself — if you need reference.

Once the localization code is mature (probably by next week), you can expect it to be loaded from the same Mozilla-server as before. For now, just use it for testing and please don't use it for production.

Presetting Tabzilla's Language

Tabzilla will load English[US] by default. If you want to change this behavior, and want it to initialize in your favorite language, then in the step 1 you need to mention the language code as a data-attribute to the anchor-tag:

<a href="http://www.mozilla.org/" id="tabzilla" data-locale="de-DE">mozilla</a>

Contribute to Tabzilla's Localization

"en" : { // Locale strings for English

    // Title Strings
    titleMozilla:       "Mozilla",
    titleProducts:      "Products",
    titleInnovation:    "Innovation",
    titleGetInvolved:   "Get Involved",

    // Link Strings
    linkMission:        "Mission",
    linkAbout:          "About",
    linkProjects:       "Projects",
    linkSupport:        "Support",
    linkMDN:            "Developer Network",
    linkFirefox:        "Firefox",
    linkThunderbird:    "Thunderbird",
    linkWebFWD:         "WebFWD",
    linkLabs:           "Labs",
    linkWebmaker:       "Webmaker"
    linkVolunteer:      "Volunteer",
    linkCareers:        "Careers",
    linkFindUs:         "Find Us",
    linkJoinUs:         "Join Us",
    linkWebDir:         "Website Directory",

    // Locale for the Promotional Contents
    promoLink:          "Download Firefox Beta,
        provide feedback and help make the next
        version of Firefox even more awesome."
},

If you want to see tabzilla in your own language, then step forward & submit the l10n-strings. All you need to do is to change the English strings (within quotes) with your language's translated word(s), along with the language code (as you see beside) — and, send this in.

If you have a GitHub account, then please check for an issue with your language code (else create one) & post the translation as a comment. If you don't have a GitHub account, then come talk to us at #mcs in Mozilla-IRC and we'll figure something out.

Tabzilla is yet available in 10+ languages, including the most popular/widely-spoken ones in the world.