From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/temas/background/index.html | 99 +++++++++++++ files/es/temas/index.html | 20 +++ files/es/temas/theme_concepts/index.html | 231 +++++++++++++++++++++++++++++++ 3 files changed, 350 insertions(+) create mode 100644 files/es/temas/background/index.html create mode 100644 files/es/temas/index.html create mode 100644 files/es/temas/theme_concepts/index.html (limited to 'files/es/temas') diff --git a/files/es/temas/background/index.html b/files/es/temas/background/index.html new file mode 100644 index 0000000000..d30153f9c1 --- /dev/null +++ b/files/es/temas/background/index.html @@ -0,0 +1,99 @@ +--- +title: Background Themes +slug: Temas/Background +translation_of: Mozilla/Add-ons/Themes/Lightweight_themes +--- +

Cómo crear su propio fondo temático

+ +
+

Los temas se componen de un archivo de imagen gráfica "de cabecera", que superpone el valor por defecto del IU de Firefox.

+ +

¿Termino su diseño? Puede enviarlo ahora mismo!

+ +

Creación de una Imagen Cabecera del Tema

+ +

La imagen de cabecera se muestra como el fondo de la parte superior de la ventana del navegador, situado detrás de las barras de herramientas, barra de direcciones, barra de búsqueda y la barra de pestañas. Estará anclada en la esquina superior derecha de la ventana del navegador.

+ +

+ + + +

Requisitos de la Imagen

+ + + +

Consejos

+ + + +

Recursos de editores de imágenes en línea

+ + + +

Creando una imagen de pie de página del tema

+ +

En versiones anteriores de Firefox, o versiones más recientes con determinados complementos instalados, la imagen de pie de página se muestra como el fondo de la parte inferior de la ventana del navegador, detrás de las barras complemento. Estará anclada en la esquina inferior izquierda de la ventana del navegador. Imágenes de pie de página son opcionales.

+ +

+ + + +

Requisitos de la Imagen

+ + + +

Consejos

+ + + +

Presentar sus imagenes del tema

+ +

Para empezar a enviar sus imágenes, vaya a la página de presentación de Temas:

+ +
    +
  1. El nombre de su tema — elegir un nombre único para su tema. Nombres duplicados no están permitidos, por lo que puede que tenga que probar un par de veces para encontrar un nombre único.
    2. +
  2. Elija una categoría y etiquetas — seleccionar una categoría y entrar en algunas etiquetas que mejor describen su tema. Tenga en cuenta que un crítico puede rechazar su tema si es obvio que su categoría y / o etiquetas no están relacionados con su tema.
    3. +
  3. Describa su tema — escribir una breve descripción de su tema. Tenga en cuenta que un crítico puede rechazar su tema si su descripción no es una representación exacta de su tema.
    4. +
  4. Seleccione una licencia para su tema — decidir sobre una licencia de derechos de autor para su trabajo. Lea más acerca de los tipos de licencias Creative Common. +
      +
    • Importante: Por favor, asegúrese de que tiene los derechos para usar la imagen en su tema!
      • +
    +
    5. +
  5. Cargue sus imágenes — asegurarse de que son menos de 300 KB de tamaño y JPG o PNG!
    6. +
  6. Seleccione el texto y los colores de la ficha — puede elegir la pestaña ("background") color y color de texto plano que mejor funcione con su imagen de cabecera.
    7. +
  7. Vista previa de su tema — usted está listo para previsualizar su tema! Simplemente puntero del ratón sobre la imagen arriba del botón Enviar Tema y ver cómo se ve al instante.
    8. +
  8. Presentar su tema — si todo se ve bien, haga clic en el botón Enviar Tema y todo listo! Puede ver todos los temas que has sido autor en su página de perfil. +
      +
    • Consejo: para asegurarse de que su tema está aprobado para la galería, asegúrese de que cumple con las directrices de contenido y los términos de servicio!
      • +
    +
    9. +
+ +

+ +

Presente su Tema Ahora

+
diff --git a/files/es/temas/index.html b/files/es/temas/index.html new file mode 100644 index 0000000000..24376902a6 --- /dev/null +++ b/files/es/temas/index.html @@ -0,0 +1,20 @@ +--- +title: Temas +slug: Temas +tags: + - Complementos + - Temas + - Todas_las_Categorías +translation_of: Mozilla/Add-ons/Themes +--- +

 

+
Primeros pasos
Para quienes quieren crear un tema y no saben cómo.
+

Los Temas son skins (apariencias) para las aplicaciones Mozilla. Te permiten cambiar la apariencia de la interfaz de usuario y personalizarlo a tu gusto. Un tema puede cambiar simplemente el color de la UI o puede cambiar toda su apariencia.

+
+ +

Documentación

Creando un tema para Firefox
Para crear un tema para Firefox necesitaras saber tres cosas. Cómo editar imágenes, como extraer archivos zip, y como modificar CSS.
Empaquetar un Tema
Como empaquetar temas para Firefox y Thunderbird.
Cambios del tema en Firefox 2
¿Creaste un tema para Firefox 1.5, y ahora quieres actualizarlo para que funcione correctamente en Firefox 2?
Installing Extensions and Themes From Web Pages (en)
There are a variety of ways you can install Extensiones and Temas from web pages, including direct linking to the XPI files and using the InstallTrigger object.

;{{ mediawiki.external('http://cheeaun.phoenity.com/weblog/2004/12/first-steps-in-theme-design.html First steps in theme design (en)') }} :

Ver todos...

Comunidad

  • DesarrollMDNo Mozilla en los foros de Mozilla-ES.
  • View Mozilla forums...

{{ DiscussionList("dev-themes", "mozilla.dev.themes") }}

Ver todos...

Herramientas

Ver todos...

Temas relacionados

CSS
+

Categorías

+

Interwiki Language Links

+

 

+

 

+

{{ languages( { "de": "de/Themes", "en": "en/Themes", "fr": "fr/Th\u00e8mes", "ja": "ja/Themes", "pl": "pl/Motywy", "zh-cn": "cn/\u4e3b\u9898", "zh-tw": "zh_tw/\u4f48\u666f\u4e3b\u984c" } ) }}

diff --git a/files/es/temas/theme_concepts/index.html b/files/es/temas/theme_concepts/index.html new file mode 100644 index 0000000000..1f096e9586 --- /dev/null +++ b/files/es/temas/theme_concepts/index.html @@ -0,0 +1,231 @@ +--- +title: Conceptos de los temas +slug: Temas/Theme_concepts +translation_of: Mozilla/Add-ons/Themes/Theme_concepts +--- +
{{AddonSidebar()}}
+ +

Los temas desarrollados con la API WebExtensions en Firefox le permiten cambiar el aspecto del navegador al agregar imágenes al área del encabezado del navegador Firefox; este es el área detrás de la barra de menú, las barras de herramientas, la barra de direcciones, la barra de búsqueda y la barra de pestañas.

+ +

Estas opciones de tema se pueden implementar como temas estáticos (aunque las imágenes del tema pueden ser animadas) o como temas dinámicos creados en una extensión del navegador

+ +
+

If you have a lightweight theme 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.

+
+ +

Static themes

+ +
+

Note that you can't yet submit static WebExtension-based themes to addons.mozilla.org. The work to support this is tracked in https://github.com/mozilla/addons/issues/501. If you want to share a theme with other users, you'll need to make it either a lightweight theme or a dynamic theme.

+
+ +

Static themes are specified using the same resources as a browser extension: a manifest.json 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 addons.mozilla.org (AMO).

+ +
+

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 Dynamic themes.

+
+ +

Defining a theme

+ +

To create a theme (in this example a simple, single image theme):

+ + + +

Static theme approaches

+ +

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.

+ +

Single image themes

+ +

This is the basic or minimal theming option, where you define:

+ + + +

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
+ 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.
+ combined with a complementary background color, to create this effect in the header
+ A single image theme using the weta.png image

+ +

See details about this theme in the themes example weta_fade.

+ +

Obviously, you can still provide a single wide image if you prefer.

+ +

Multiple image themes

+ +

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.

+ +

Depending on the effect you want to create you may need to suppress the mandatory "headerURL": 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
+ 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.
+ to create this effect
+ A single image theme using the additional images option to align an image to the center of the heading and tile it.
+ Here you specify the weta image like this:

+ +
"images": {
+  "headerURL": "empty.png",
+  "additional_backgrounds": [ "weta_for_tiling.png"]
+},
+ +

and the images tiling with:

+ +
"properties": {
+  "additional_backgrounds_alignment": [ "top" ],
+  "additional_backgrounds_tiling": [ "repeat"  ]
+},
+ +

Full details of how to setup this theme can be found in the themes example weta_tiled. Full detais of the alignment and tiling options can be found in the "theme" key description.

+ +

Alternatively, you can use multiple images, say combining the original weta image with this one anchored to the left of the header
+ 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.
+ to create this effect
+ A theme using the additional images option to place two mirrored image to the left and right of the browser header.

+ +

Where the images are specified with:

+ +
"images": {
+  "headerURL": "empty.png",
+  "additional_backgrounds": [ "weta.png", "weta-left.png"]
+},
+ +

and their alignment by:

+ +
"properties": {
+  "additional_backgrounds_alignment": [ "right top" , "left top" ]
+},
+ +

Full details of how to setup this theme can be found in the themes example weta_mirror. Full detais of the alignment options can be found in the "theme" key description.

+ +

Static animated themes

+ +

It is possible to create an animated theme using an APNG format image, as in the themes example animated. However, remember that rapid animations, such as the one in the example might be too distracting for a practical theme.

+ +

You can also animate themes programmatically, which we discuss in Dynamic themes.

+ +

Dynamic themes

+ +

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:

+ + + +

And, obviously, you can combine the two and bundle a programmatically controlled theme with your extension.

+ +

Using the {{WebExtAPIRef("theme")}} API is straightforward. First, request "theme" permission in the extension's manifest.json 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.

+ +

For example, the following code, from the dynamic theme example defines the content for the day and night elements of the dynamic theme:

+ +
const themes = {
+  'day': {
+    images: {
+     headerURL: 'sun.jpg',
+    },
+    colors: {
+     accentcolor: '#CF723F',
+     textcolor: '#111',
+    }
+  },
+  'night': {
+    images: {
+     headerURL: 'moon.jpg',
+    },
+    colors: {
+     accentcolor: '#000',
+     textcolor: '#fff',
+    }
+  }
+};
+ +

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:

+ +
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]);
+}
+ +

Learn more about dynamic themes and see an additional example in the following video:

+ +

{{EmbedYouTube("ycckyrUN0AY")}}

+ +

 

+ +

If you have not built a browser extension before, check out Your first extension for a step-by-step guide.

+ +

Cross browser compatibility

+ +

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.

+ +

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:

+ + + +

Noting that "frame": and "tab_text": support RGB color definition only.

+ +

So, in the single image theme example (weta_fade) could be supported in Chrome using the following manifest.json file:

+ +
{
+  "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 ]
+    }
+  }
+}
+ +

However, there will be a couple of differences:

+ + + +

The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented.

+ +

For more information, see the notes on Chrome compatibility.

-- cgit v1.2.3-54-g00ecf