Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Avertissement : Cet article mentionne l'ancien nom (”Persona“) des thèmes d’arrière-plan . Actuellemnt, ce système distribué par Mozilla (nom interne: BrowserID) est appelé Persona. Cette article nécéssite d'être mis à jour afin d'y ajouter ces changements.

Firefox 3.6 introduit un support natif de thèmes d’arrière-plan ; il est simple et facile de créer des thèmes sur la base de l'architure des thèmes Personas développé par Mozilla Labs. Auparavant ces thèmes nécessitaient l'installation de l'extension Personas dans les versions antérieures à Firefox 3.6.

Les utilisateurs des versions de Firefox comprises entre 3 et 3.5 doivent donc utiliser l'extension Personas.

Les thèmes d’arrière-plan sont faits à partir de deux images : Une pour la barre d'outils, la barre d'adresse, la barre de recherche et une seconde pour le fond des statuts et de la barre de recherche sur la page en bas de fenêtre.

Se référer à l'article Personas how to pour des informations plus détaillées sur la création d'un thème d’arrière-plan.

Notification des thèmes d’arrière-plan

Plusieurs notifications sont envoyées pour permettre aux utilisateurs de savoir quels changements s'appliqueront , des changements allant de la liste des thèmes d’arrière-plan disponibles au changement par rapport au thème utilisé. Voir cette liste pour plus de détails.

Distribuer vos thèmes d’arrière-plan sur votre propre site

 

Voici un exemple de code utilisable. (Basé sur la page test trouvable au Bug 511771)

JavaScript:

var themes = [
  {
    id: "example-01",
    name: "Third Planet",
    headerURL: "http://www.example.com/firefox/personas/01/header.jpg",
    footerURL: "http://www.example.com/firefox/personas/01/footer.jpg",
    textcolor: "#fff",
    accentcolor: "#6b6b6b"
  },
  {
    id: "example-02",
    name: "Foxkeh Boom",
    headerURL: "http://www.example.com/firefox/personas/02/header.jpg",
    footerURL: "http://www.example.com/firefox/personas/02/footer.jpg",
    textcolor: "#bcf",
    accentcolor: "#8888FF"
  }
];

const INSTALL = "InstallBrowserTheme";
const PREVIEW = "PreviewBrowserTheme";
const RESET_PREVIEW = "ResetBrowserThemePreview";

function setTheme(node, theme, action) {
  node.setAttribute("data-browsertheme", JSON.stringify(themes[theme]));
  var event = document.createEvent("Events");
  event.initEvent(action, true, false);
  node.dispatchEvent(event);
}

HTML:

<button onclick="setTheme(this, 0, INSTALL);"
        onmouseover="setTheme(this, 0, PREVIEW);"
        onmouseout="setTheme(this, 0, RESET_PREVIEW);">Install Third Planet Theme</button>
<button onclick="setTheme(this, 1, INSTALL);"
        onmouseover="setTheme(this, 1, PREVIEW);"
        onmouseout="setTheme(this, 1, RESET_PREVIEW);">Install Foxkeh Boom Theme</button>

Nota bene:

Cet aperçu avec 'mouseover', le survol par la souris ne fonctionne pas avec les sites ne figurants pas sur la liste blanche de Firefox.

Distribuer vos thèmes d’arrière-plan en tant qu'extensions téléchargeables (aka XPIs)

From within a BootstrapedPlugin's bootstrap.js, you can issue code similar to the following to install and activate a lightweight theme and uninstall it on plugin deactivation.

let lightweightTheme = {
    id: "example-01",
    name: "Third Planet",
    headerURL: "http://www.example.com/firefox/personas/01/header.jpg",
    footerURL: "http://www.example.com/firefox/personas/01/footer.jpg",
    textcolor: "#fff",
    accentcolor: "#6b6b6b"
};

Components.utils.import("resource://gre/modules/LightweightThemeManager.jsm");

function startup(data, reason) {
    LightweightThemeManager.themeChanged(lightweightTheme);
}
function shutdown(data, reason) {
    LightweightThemeManager.forgetUsedTheme(lightweightTheme.id);
}

A voir aussi

 

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : 54jack, Cuiver
 Dernière mise à jour par : 54jack,