diff options
Diffstat (limited to 'files/fr/mozilla/add-ons/thèmes')
| -rw-r--r-- | files/fr/mozilla/add-ons/thèmes/fond/index.html | 79 | ||||
| -rw-r--r-- | files/fr/mozilla/add-ons/thèmes/index.html | 45 | ||||
| -rw-r--r-- | files/fr/mozilla/add-ons/thèmes/theme_concepts/index.html | 231 |
3 files changed, 0 insertions, 355 deletions
diff --git a/files/fr/mozilla/add-ons/thèmes/fond/index.html b/files/fr/mozilla/add-ons/thèmes/fond/index.html deleted file mode 100644 index 2af0b0031c..0000000000 --- a/files/fr/mozilla/add-ons/thèmes/fond/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Thème de fond -slug: Mozilla/Add-ons/Thèmes/Fond -translation_of: Mozilla/Add-ons/Themes/Lightweight_themes ---- -<p>{{AddonSidebar}}</p> - -<h2 id="Comment_créer_votre_propre_thème">Comment créer votre propre thème</h2> - -<div class="primary auto" id="getting-started"> -<p>Les thèmes sont fait d'une image "header" qui va remplacer le fond de base de Firefox.</p> - -<p>Vous avez fini votre thème ? <a href="https://addons.mozilla.org/developers/theme/submit">Mettez-le en ligne maintenant !</a></p> - -<h3 id="Création_de_l'image_header_du_thème">Création de l'image "header" du thème</h3> - -<p>L'image header est affichée en fond en haut de la fenêtre du navigateur, on la voit aussi derrière les barres d'outils, la barre d'adresse, la barre "Rehercher" et la ligne d'onglets. Elle sera <strong>ancrée au coin supérieur-droit</strong> de la fenêtre.</p> - -<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9929/header-step.jpg" style="height: 215px; width: 1059px;"></p> - -<ul> - <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/header.jpg">Voir un exemple d'image Header ici.</a></li> -</ul> - -<h4 id="Image_Requise">Image Requise</h4> - -<ul> - <li>Les dimensions doivent être <strong>3000px de large × 200px de hauteur</strong></li> - <li>En format PNG ou JPG</li> - <li>L'image ne doit pas faire plus de 300KB de mémoire</li> -</ul> - -<h4 id="Petites_aides">Petites aides</h4> - -<ul> - <li>Une image discrète, peu contrastée et assez uniforme est recommandée; une image très détaillée ressortira trop par rapport à l'interface du navigateur</li> - <li>Firefox peut afficher plus loin que la partie basse de l'image si une autre barre d'outils ou d'autres éléments d'interface sont ajoutés en haut de la fenêtre.</li> - <li>Le coin en haut à droite de l'image devrait avoir les informations les plus importantes -quand l'utilisateur agrandit la fenêtre du navigateur, celui-ci montre plus du côté gauche de l'image.</li> -</ul> - -<h4 id="Ressources_édition_d'images_en_ligne">Ressources : édition d'images en ligne</h4> - -<ul> - <li><a href="http://www.pixlr.com">Pixlr</a> — Pixlr offre un outil professionnel et simple d'utilisation pour créer et modifier des images dans votre navigateur.</li> - <li><a href="http://www.photoshop.com/tools?wf=editor">Photoshop</a> — Retouchez, tournez et modifiez des photos avec Photoshop® Express, un éditeur de photo en ligne gratuit.</li> -</ul> - -<h3 id="Envoyer_votre_thème_personnalisé">Envoyer votre thème personnalisé</h3> - -<p>Pour commencer à envoyer vos images, allez sur la page <a href="https://addons.mozilla.org/developers/theme/submit">Soumettre un thème.</a></p> - -<ol class="itemized"> - <li><strong>Nommez votre thème</strong> — choisissez un nom unique pour votre thème. 2 thèmes avec le même nom ne sont pas autorisés, alors vus devriez peut-être essayer plusieurs fois pour trouver un nom unique.</li> - <li><strong>Choisissez une catégorie et des tags</strong> — sélectionnez une catégorie et entrez des tags (mots clés) qui décrivent le mieux votre thème. Rappelez-vous qu'un utilisateur pourrait rejeter votre thème si sa catégorie et ses tags ne sont pas fidèles à votre thème.</li> - <li><strong>Décrivez votre thème</strong> — écrivez une courte description de votre thème. Rappelez-vous qu'un utilisateur pourrait rejeter votre thème si sa description n'est pas fidèle à votre thème.</li> - <li><strong>Sélectionnez</strong> une license pour votre thème — décidez une license de droits d'auteurs pour votre travail. <a href="http://creativecommons.org/licenses/">Lire plus à propos des types de licences Creative Common.</a> - <ul> - <li><strong>Important:</strong> Soyez sur d'avoir les droits d'utiliser cette image dans votre thème !</li> - </ul> - </li> - <li><strong>Envoyez votre image</strong> — soyez sur qu'elle fait moins de 300 KB et qu'elle soit au formant JPG ou PNG !</li> - <li><strong>Sélectionnez la couleur des textes et des onglets</strong> — vous pouvez choisir la couleur de "fond" des onglets et celle des textes qui colle le mieux avec votre image header.</li> - <li><strong>Prévisualisez votre thème</strong> — vous êtes prêts à prévisualiser votre thème ! Passez simplement votre souris sur le bouton "Soumettre le thème", et vous verrez à quoi il ressemble.</li> - <li><strong>Soumettre votre thème</strong> — si tout à l'air bon, cliquez sur le bouton "Soumettre le thème" et vous avez fini ! Vous pouvez voir tous les thèmes que vous avez créé sur votre page de profil. - <ul> - <li><strong>Info:</strong> pour vous assurer que votre thème est approuvé pour la galerie, soyez sur qu'il n'enfreint aucune règles des Conditions d'Utilisation !</li> - </ul> - </li> -</ol> - -<p class="call-to-submit"><a class="button prominent" href="https://addons.mozilla.org/en-US/developers/theme/submit">soumettre votre thème ici</a></p> - -<h2 class="call-to-submit" id="Plus_de_tutoriels">Plus de tutoriels</h2> - -<p><a href="http://vanillaorchidstutorials.blogspot.com/2015/11/mozilla-themes-focal-point-sizing.html">Mozilla Themes Focal Point on Sizing</a> - A tutorial on theming with a focus on sizing, by VanillaOrchids.<br> - <br> - <br> - <sup>Traduit par Tocram2 ;)</sup></p> -</div> diff --git a/files/fr/mozilla/add-ons/thèmes/index.html b/files/fr/mozilla/add-ons/thèmes/index.html deleted file mode 100644 index b0b2cd163a..0000000000 --- a/files/fr/mozilla/add-ons/thèmes/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Thèmes -slug: Mozilla/Add-ons/Thèmes -tags: - - Apparences - - Extensions - - Theme -translation_of: Mozilla/Add-ons/Themes ---- -<p>{{AddonSidebar}}</p> - -<p><span id="result_box" lang="fr"><span>Les thèmes vous permettent de modifier l'apparence de l'interface utilisateur et de la personnaliser selon vos goûts.</span> <span>Apprenez comment créer et partager des thèmes !</span></span></p> - -<div class="column-container"> -<div class="column-half"> -<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/fr/Add-ons/Themes/Theme_concepts" title="Building a Theme">Créer un thème de navigateur</a></dt> - <dd>Introduction pour la création de thèmes pour les dernières versions de Firefox.</dd> - <dt> - <h2 id="Thèmes_légers">Thèmes légers</h2> - </dt> - <dt><a href="https://developer.mozilla.org/fr/Add-ons/Themes/Lightweight_themes" title="Themes/Lightweight themes">Thèmes légers</a></dt> - <dd>La création de thèmes utilisant peu d'espaces pour Firefox.</dd> - <dt><a href="https://developer.mozilla.org/fr/Add-ons/Themes/Lightweight_Themes/FAQ" title="Themes/Common_Firefox_Theme_Issues_and_Solutions">FAQ des thèmes légers</a></dt> - <dd>Donne les réponses aux questions les plus courantes.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 class="Tools" id="Tools" name="Tools">Outils et ressources</h2> - -<ul> - <li><a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions/manifest.json/theme">Thème de navigateur les clés du manifest.json</a></li> - <li><a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions/API/theme">API extensions pour les thèmes de navigateur</a></li> - <li><a href="http://vanillaorchidstutorials.blogspot.com/2015/11/mozilla-themes-focal-point-sizing.html">Tutoriel pour les thèmes légers (en)</a></li> - <li><a href="https://discourse.mozilla.org/c/add-ons/themes">Discussions du forum (en)</a></li> - <li><a href="https://blog.mozilla.org/addons/category/personas/">Thèmes abordés dans les fils du blog (en)</a></li> - <li> <a href="https://developer.mozilla.org/en-US/Mozilla/Add-ons/Themes/Obsolete">Ressources archivées</a></li> -</ul> -</div> -</div> - -<p> </p> diff --git a/files/fr/mozilla/add-ons/thèmes/theme_concepts/index.html b/files/fr/mozilla/add-ons/thèmes/theme_concepts/index.html deleted file mode 100644 index 8856f4e38f..0000000000 --- a/files/fr/mozilla/add-ons/thèmes/theme_concepts/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Theme concepts -slug: Mozilla/Add-ons/Thèmes/Theme_concepts -translation_of: Mozilla/Add-ons/Themes/Theme_concepts ---- -<div>{{AddonSidebar()}}</div> - -<p>Dans Firefox, les thèmes développés par la bibliothèque <a href="/en-US/Add-ons/WebExtensions">WebExtensions API</a> vous permet de modifier le rendu du navigateur. Le cas se présente en ajoutant des images à la région de l'en-tête du navigateur Firefox : il s'agit de la partie, en arrière-plan, des barres de menu, d'outils, d'hyperliens, de recherche et de l'ensemble des onglets d'une même fenêtre.</p> - -<p>These theme options can be implemented as static themes (although the theme images themselves may be animated) or as dynamic themes created in a browser extension.</p> - -<div class="note"> -<p>If you have a <a href="/en-US/docs/Mozilla/Add-ons/Themes/Lightweight_themes">lightweight theme</a> it will be converted to this new theme format automatically before lightweight themes are deprecated. You do not need to port your theme. However, please feel free to update your themes to use any of the new features described here.</p> -</div> - -<h2 id="Static_themes">Static themes</h2> - -<div class="note"> -<p id="Image_formats">Note that you can't yet submit static WebExtension-based themes to addons.mozilla.org. The work to support this is tracked in <a href="https://github.com/mozilla/addons/issues/501">https://github.com/mozilla/addons/issues/501</a>. If you want to share a theme with other users, you'll need to make it either a <a href="/en-US/docs/Mozilla/Add-ons/Themes/Lightweight_themes">lightweight theme</a> or a <a href="/en-US/Add-ons/WebExtensions/API/theme">dynamic theme</a>.</p> -</div> - -<p>Static themes are specified using the same resources as a browser extension: a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file to define the theme components with those components stored in the same folder as the manifest.json file or a sub folder. These resources are then packed in a zip for publication on <a href="https://addons.mozilla.org">addons.mozilla.org</a> (AMO).</p> - -<div class="note"> -<p>A theme and browser extension functionality cannot be defined in one package, such as including a theme to complement an extension. You can, however, programmatically include a theme in an extension using the Theme API. See <a href="#Dynamic_themes">Dynamic themes</a>.</p> -</div> - -<h3 id="Defining_a_theme">Defining a theme</h3> - -<p>To create a theme (in this example a simple, single image theme):</p> - -<ul> - <li>Create a folder in a suitable location on your computer.</li> - <li>Add the theme image file to the folder: - <pre><mytheme> - <your_header_image>.<type></pre> - </li> - <li>Create a file called manifest.json in the folder and edit its content as follows: - <pre class="brush: json">{ - "manifest_version": 2, - "version": "1.0", - "name": "<your_theme_name>", - "theme": { - "images": { - "headerURL": "<your_header_image>.<type>" - }, - "colors": { - "accentcolor": "#FFFFFF", - "textcolor": "#000" - } - } -} -</pre> - Where: - - <ul> - <li><code>"accentcolor":</code> is the heading area background color for your theme.</li> - <li><code>"</code><code>textcolor</code><code>":</code> the color of the text in the heading area.</li> - </ul> - </li> - <li>Package your theme and submit it to AMO, <a href="/en-US/Add-ons/WebExtensions/Publishing_your_WebExtension">following these instructions</a>.</li> -</ul> - -<h3 id="Static_theme_approaches">Static theme approaches</h3> - -<p>There are two approaches you can take to theming the header area of Firefox: using a single image or using multiple images. You could combine the two, but it’s easier to treat them separately.</p> - -<h4 id="Single_image_themes">Single image themes</h4> - -<p>This is the basic or minimal theming option, where you define:</p> - -<ul> - <li>a single image, which is anchored to the top right of the header area.</li> - <li>A color for the text in the header.</li> -</ul> - -<p>The area your header image needs to fill is a maximum of 200 pixels high. The maximum image width is determined by the resolution of the monitor Firefox is displaying on and how much of the monitor Firefox is using. Practically, this means you would need to allow for a width of up to 5120 pixels wide (for the next generation of 5k monitors). However, rather than creating a very wide image, a better approach is to use a narrower image with a transparent left edge so that it fades to the background color. For example, we could use this image<br> - <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left edge fading to total transparency." src="https://mdn.mozillademos.org/files/15215/weta.png" style="height: 200px; width: 406px;"><br> - combined with a complementary background color, to create this effect in the header<br> - <img alt="A single image theme using the weta.png image" src="https://mdn.mozillademos.org/files/15217/basic_theme.png" style="height: 113px; width: 679px;"></p> - -<p>See details about this theme in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade">weta_fade</a>.</p> - -<p>Obviously, you can still provide a single wide image if you prefer.</p> - -<h4 id="Multiple_image_themes">Multiple image themes</h4> - -<p>As an alternative to creating a single image theme, you have the option to use multiple images. These images can be individually anchored to locations within the header, with the option to apply tiling to each image.</p> - -<p>Depending on the effect you want to create you may need to suppress the mandatory <code>"</code><code>headerURL</code><code>":</code> image with an empty or transparent image. You would use an empty or transparent image if, for example, you wanted to tile a centrally justified image, such as<br> - <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left and right edges fading to total transparency." src="https://mdn.mozillademos.org/files/15219/weta_for_tiling.png" style="height: 200px; width: 270px;"><br> - to create this effect<br> - <img alt="A single image theme using the additional images option to align an image to the center of the heading and tile it. " src="https://mdn.mozillademos.org/files/15221/tiled_theme.png" style="height: 113px; width: 679px;"><br> - Here you specify the weta image like this:</p> - -<pre class="brush: json" dir="ltr">"images": { - "headerURL": "empty.png", - "additional_backgrounds": [ "weta_for_tiling.png"] -},</pre> - -<p dir="ltr">and the images tiling with:</p> - -<pre class="brush: json" dir="ltr">"properties": { - "additional_backgrounds_alignment": [ "top" ], - "additional_backgrounds_tiling": [ "repeat" ] -},</pre> - -<p>Full details of how to setup this theme can be found in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_tiled">weta_tiled</a>. Full detais of the alignment and tiling options can be found in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p> - -<p>Alternatively, you can use multiple images, say combining the original weta image with this one anchored to the left of the header<br> - <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the right edge fading to total transparency." src="https://mdn.mozillademos.org/files/15223/weta-left.png" style="height: 200px; width: 406px;"><br> - to create this effect<br> - <img alt="A theme using the additional images option to place two mirrored image to the left and right of the browser header." src="https://mdn.mozillademos.org/files/15225/multi_image_theme.png" style="height: 113px; width: 679px;"></p> - -<p>Where the images are specified with:</p> - -<pre class="brush: json" dir="ltr">"images": { - "headerURL": "empty.png", - "additional_backgrounds": [ "weta.png", "weta-left.png"] -},</pre> - -<p dir="ltr">and their alignment by:</p> - -<pre class="brush: json" dir="ltr">"properties": { - "additional_backgrounds_alignment": [ "right top" , "left top" ] -},</pre> - -<p>Full details of how to setup this theme can be found in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_mirror">weta_mirror</a>. Full detais of the alignment options can be found in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p> - -<h3 id="Static_animated_themes">Static animated themes</h3> - -<p>It is possible to create an animated theme using an APNG format image, as in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/animated">animated</a>. However, remember that rapid animations, such as the one in the example might be too distracting for a practical theme.</p> - -<p dir="ltr">You can also animate themes programmatically, which we discuss in <a href="#Dynamic_themes">Dynamic themes</a>.</p> - -<h2 id="Dynamic_themes">Dynamic themes</h2> - -<p>As an alternative to defining a static theme, you can use the {{WebExtAPIRef("theme")}} API to control the theme used in Firefox from within a browser extension. There are a couple of use cases for this option:</p> - -<ul> - <li>To bundle a theme with a browser extension, as an added extra.</li> - <li>Create a dynamic theme that changes under programmatic control.</li> -</ul> - -<p>And, obviously, you can combine the two and bundle a programmatically controlled theme with your extension.</p> - -<p>Using the {{WebExtAPIRef("theme")}} API is straightforward. First, request "theme"<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions"> permission</a> in the extension's<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"> manifest.json</a> file. Next, you build a JSON object containing the same information you would use in a static theme’s manifest.json, Finally, pass the JSON object in a {{WebExtAPIRef("theme.update()")}} call.</p> - -<p>For example, the following code, from the <a href="https://github.com/mdn/webextensions-examples/tree/master/dynamic-theme">dynamic theme example</a> defines the content for the day and night elements of the dynamic theme:</p> - -<pre class="brush: js" dir="ltr">const themes = { - 'day': { - images: { - headerURL: 'sun.jpg', - }, - colors: { - accentcolor: '#CF723F', - textcolor: '#111', - } - }, - 'night': { - images: { - headerURL: 'moon.jpg', - }, - colors: { - accentcolor: '#000', - textcolor: '#fff', - } - } -};</pre> - -<p>The theme.Theme object is then passed to {{WebExtAPIRef("theme.update()")}} to change the header theme, as in this code snippet from the same example:</p> - -<pre class="brush: js" dir="ltr">function setTheme(theme) { - if (currentTheme === theme) { - // No point in changing the theme if it has already been set. - return; - } - currentTheme = theme; - browser.theme.update(themes[theme]); -}</pre> - -<p dir="ltr">Learn more about dynamic themes and see an additional example in the following video:</p> - -<p dir="ltr">{{EmbedYouTube("ycckyrUN0AY")}}</p> - -<p dir="ltr"> </p> - -<p dir="ltr">If you have not built a browser extension before, check out <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a> for a step-by-step guide.</p> - -<h2 id="Cross_browser_compatibility">Cross browser compatibility</h2> - -<p>There is currently limited compatibility between themes in the major browsers. Opera takes an entirely different approach, and Microsoft Edge themes are not yet open to developers.</p> - -<p>There is some compatibility between Firefox static themes and Chrome themes, providing the ability to port a single header image theme from Firefox to Chrome. This would be done by amending the manifest.json keys as follows:</p> - -<ul> - <li><code>"headerURL":</code> to <code>"theme_frame":</code></li> - <li><code>"accentcolor":</code> to <code>"frame":</code></li> - <li><code>"textcolor":</code> to <code>"tab_text":</code></li> -</ul> - -<p>Noting that "frame": and "tab_text": support RGB color definition only.</p> - -<p>So, in the single image theme example (weta_fade) could be supported in Chrome using the following manifest.json file:</p> - -<pre class="brush: json" dir="ltr">{ - "manifest_version": 2, - "version": "1.0", - "name": "<your_theme_name>", - "theme": { - "images": { - "theme_frame": "weta.png" - }, - "colors": { - "frame": [ 173 , 176 , 159 ], - "tab_text": [ 0 , 0 , 0 ] - } - } -}</pre> - -<p>However, there will be a couple of differences:</p> - -<ul> - <li>Chrome tiles the <code>“theme_frame”:</code> image from the left of the header area.</li> - <li><code>"tab_text":</code> only affects the text on the highlighted/active tab.</li> -</ul> - -<p dir="ltr"><img alt="The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented." src="https://mdn.mozillademos.org/files/15227/basic_in_chrome.png" style="height: 113px; width: 679px;"></p> - -<p>For more information, see the notes on <a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">Chrome compatibility</a>.</p> |