initial commit

3 files changed, 350 insertions, 0 deletions

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
+---
+<h2 id="Cómo_crear_su_propio_fondo_temático"><span class="short_text" id="result_box" lang="es"><span class="hps">Cómo crear</span> <span class="hps">su propio fondo</span> <span class="hps">temático</span></span></h2>
+
+<div class="primary auto" id="getting-started">
+<p><span id="result_box" lang="es"><span class="hps">Los temas se</span> <span class="hps">componen de</span> <span class="hps">un archivo de</span> <span class="hps">imagen gráfica</span> <span class="hps">"de cabecera</span><span>"</span><span>, que</span> <span class="hps">superpone</span> <span class="hps">el valor por defecto</span> <span class="hps">del IU</span></span><span lang="es"><span class="hps"> de Firefox</span></span>.</p>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">¿Termino</span> <span class="hps">su diseño</span><span>?</span> <span class="hps">Puede</span></span> <a href="https://addons.mozilla.org/developers/theme/submit">enviarlo ahora mismo!</a></p>
+
+<h3 id="Creación_de_una_Imagen_Cabecera_del_Tema"><span class="short_text" id="result_box" lang="es"><span class="hps">Creación de una Imagen </span></span> Cabecera del Tema</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">La</span> <span class="hps">imagen de cabecera</span> <span class="hps">se muestra como</span> <span class="hps">el fondo de la</span> <span class="hps">parte superior de la</span> <span class="hps">ventana del navegador</span><span>, situado</span> <span class="hps">detrás de</span> <span class="hps">las barras de herramientas</span><span>, barra</span> <span class="hps">de direcciones,</span> <span class="hps">barra de búsqueda y</span> <span class="hps">la barra de pestañas</span><span>.</span></span> <span id="result_box" lang="es"><span class="hps">Estará</span> <span class="hps">anclada en</span> <span class="hps">la esquina superior</span> <span class="hps">derecha de la</span> <span class="hps">ventana del navegador.</span></span></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">Ver un ejemplo del Encabezado del Tema aqui.</a></li>
+</ul>
+
+<h4 id="Requisitos_de_la_Imagen"><span class="short_text" id="result_box" lang="es"><span class="hps">Requisitos de la Imagen</span></span></h4>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Las dimensiones</span> <span class="hps">deben ser de</span> <strong><span class="hps">3000px</span> <span class="hps">de ancho</span> <span class="hps">×</span> <span class="hps">200 píxeles</span> <span class="hps">de alto</span></strong></span></li>
+ <li>Formato de archivo PNG o JPG</li>
+ <li>El archivo de imagen no debe ser mayor de 300 KB</li>
+</ul>
+
+<h4 id="Consejos">Consejos</h4>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Sutil</span><span>,</span> <span class="hps">imágenes de contraste</span> <span class="hps">suaves</span> <span class="hps">y gradientes</span> <span class="hps">funcionan mejor</span><span>;</span></span> imagenes muy detalladas <span id="result_box" lang="es"><span class="hps">competirá con</span> <span class="hps">la IU</span> <span class="hps">del navegador</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Firefox</span> <span class="hps">puede revelar</span> <span class="hps">más</span> <span class="hps">de la porción inferior</span> <span class="hps">de la imagen si</span> <span class="hps">otra barra de herramientas</span> <span class="hps">u otro elemento de</span> <span class="hps">la interfaz de usuario</span> <span class="hps">se añade a</span> <span class="hps">la parte superior de</span> <span class="hps">la ventana.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">La parte</span> <span class="hps">superior derecha</span> <span class="hps">de la imagen</span> <span class="hps">debe tener la</span> <span class="hps">información</span> <span class="hps">más importante ya que cuando un</span> <span class="hps">usuario</span> <span class="hps">aumenta</span> <span class="hps">el ancho de la</span> <span class="hps">ventana del navegador</span><span>, el navegador</span> <span class="hps">muestra</span> <span class="hps">más de la</span> <span class="hps">parte izquierda</span> <span class="hps">de la imagen.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Los monitores Ultrawide pueden funcionar en una extensión de 3440px. Para obtener una buena visualización en estos monitores, puede aumentar el tamaño de la imagen o asegurarse de que la parte izquierda de la imagen se difumine hacia un color sólido.</span></span></li>
+</ul>
+
+<h4 id="Recursos_de_editores_de_imágenes_en_línea"><span class="short_text" id="result_box" lang="es"><span class="hps">Recursos de editores</span> <span class="hps">de imágenes en línea</span></span></h4>
+
+<ul>
+ <li><a href="http://www.pixlr.com">Pixlr</a> — <span id="result_box" lang="es"><span class="hps">Pixlr</span> <span class="hps">ofrece</span> <span class="hps">herramientas profesionales</span> <span class="hps">y fáciles</span> <span class="hps">de usar para la</span> <span class="hps">creación y edición de</span> <span class="hps">imágenes dentro de</span> <span class="hps">un navegador.</span></span></li>
+ <li><a href="http://www.photoshop.com">Photoshop</a> — Retoques<span id="result_box" lang="es"><span>, rotar y</span> <span class="hps">retocar</span> <span class="hps">fotos</span> <span class="hps">con</span> <span class="hps">Photoshop</span> <span class="hps">Express,</span> <span class="hps">un editor de</span> <span class="hps">fotos en línea gratis</span><span>.</span></span></li>
+</ul>
+
+<h3 id="Creando_una_imagen_de_pie_de_página_del_tema"><strong>Creando una imagen de pie de página del tema</strong></h3>
+
+<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">versiones anteriores de</span> <span class="hps">Firefox</span><span>,</span> <span class="hps">o</span> <span class="hps">versiones más recientes</span> <span class="hps">con</span> <span class="hps">determinados</span> <span class="hps">complementos</span> <span class="hps">instalados,</span> <span class="hps">la imagen</span> <span class="hps">de pie de página</span> <span class="hps">se muestra como</span> <span class="hps">el fondo de la</span> <span class="hps">parte inferior de la</span> <span class="hps">ventana del navegador,</span></span> <span id="result_box" lang="es"><span class="hps">detrás de las barras</span> <span class="hps">complemento</span></span>. <span id="result_box" lang="es"><span class="hps">Estará</span> <span class="hps">anclada en</span> <span class="hps">la esquina</span> <span class="hps">inferior izquierda de</span> <span class="hps">la ventana del navegador</span><span>.</span> <span class="hps">Imágenes</span> <span class="hps">de pie de página</span> <span class="hps">son opcionales</span><span>.</span></span></p>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9935/footer-step.jpg" style="height: 56px; width: 1249px;"></p>
+
+<ul>
+ <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/footer.jpg">Ver una muestra de Tema de pie de página aquí..</a></li>
+</ul>
+
+<h4 id="Requisitos_de_la_Imagen_2"><span class="short_text" id="result_box" lang="es"><span class="hps">Requisitos de la Imagen</span></span></h4>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Las dimensiones</span> <span class="hps">deben ser de</span> <strong><span class="hps">3000px</span> <span class="hps">de ancho</span> <span class="hps">×</span> <span class="hps">100 píxeles</span> <span class="hps">de alto</span></strong></span></li>
+ <li>Formato de archivo PNG o JPG</li>
+ <li>El archivo de imagen no debe ser mayor de 300 KB</li>
+</ul>
+
+<h4 id="Consejos_2">Consejos</h4>
+
+<ul>
+ <li><span id="result_box" lang="es"><span class="hps">Sutil</span><span>,</span> <span class="hps">imágenes de contraste</span> <span class="hps">suaves</span> <span class="hps">y gradientes</span> <span class="hps">funcionan mejor</span><span>;</span></span> imagenes muy detalladas <span id="result_box" lang="es"><span class="hps">competirá con</span> <span class="hps">la IU</span> <span class="hps">del navegador</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Firefox</span> <span class="hps">puede revelar</span> <span class="hps">más</span> <span class="hps">de la porción inferior</span> <span class="hps">de la imagen si</span> <span class="hps">otra barra de herramientas</span> <span class="hps">u otro elemento de</span> <span class="hps">la interfaz de usuario</span> <span class="hps">se añade a</span> <span class="hps">la parte superior de</span> <span class="hps">la ventana.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">La parte</span> <span class="hps">superior derecha</span> <span class="hps">de la imagen</span> <span class="hps">debe tener la</span> <span class="hps">información</span> <span class="hps">más importante ya que un</span> <span class="hps">usuario</span> <span class="hps">aumenta</span> <span class="hps">el ancho de la</span> <span class="hps">ventana del navegador</span><span>, el navegador</span> <span class="hps">muestra</span> <span class="hps">más de la</span> <span class="hps">parte izquierda</span> <span class="hps">de la imagen.</span></span></li>
+</ul>
+
+<h3 id="Presentar_sus_imagenes_del_tema">Presentar sus imagenes del tema</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Para empezar a</span> <span class="hps">enviar sus</span> <span class="hps">imágenes</span><span>, vaya</span> <span class="hps">a la página</span> <span class="hps">de presentación</span> de <span class="hps">Temas:</span></span></p>
+
+<ol class="itemized">
+ <li><span id="result_box" lang="es"><strong><span class="hps">El nombre de su</span> <span class="hps">tema</span> </strong></span>—<span lang="es"> <span class="hps">elegir un</span> <span class="hps">nombre único para</span> <span class="hps">su tema.</span> <span class="hps">Nombres</span> <span class="hps">duplicados no</span> <span class="hps">están permitidos,</span> <span class="hps">por lo que puede</span> <span class="hps">que tenga que probar</span> <span class="hps">un par de veces</span> <span class="hps">para encontrar</span> <span class="hps">un nombre único.</span></span></li>
+ <li><strong><span id="result_box" lang="es"><span class="hps">Elija una categoría</span> <span class="hps">y</span> <span class="hps">etiquetas</span> </span></strong>—<span lang="es"> <span class="hps">seleccionar una categoría</span> <span class="hps">y entrar en</span> <span class="hps">algunas etiquetas</span> <span class="hps">que mejor describen</span> <span class="hps">su tema.</span> <span class="hps">Tenga en cuenta que</span> <span class="hps">un crítico</span> <span class="hps">puede rechazar</span> <span class="hps">su tema</span> <span class="hps">si es obvio</span> <span class="hps">que su</span> <span class="hps">categoría y / o</span> <span class="hps">etiquetas</span> <span class="hps">no están relacionados con</span> <span class="hps">su tema.</span></span></li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Describa su</span> <span class="hps">tema</span></strong> </span>—<span lang="es"> <span class="hps">escribir una breve</span> <span class="hps">descripción de</span> <span class="hps">su tema.</span> <span class="hps">Tenga en cuenta que</span> <span class="hps">un crítico</span> <span class="hps">puede rechazar</span> <span class="hps">su tema</span> <span class="hps">si su</span> <span class="hps">descripción no es</span> <span class="hps">una representación exacta de</span> <span class="hps">su tema.</span></span></li>
+ <li><span id="result_box" lang="es"><span class="hps">Seleccione</span> <span class="hps">una licencia</span> <span class="hps">para su tema</span> </span>—<span lang="es"> <span class="hps">decidir sobre</span> <span class="hps">una licencia</span> <span class="hps">de derechos de autor</span> <span class="hps">para su trabajo.</span></span> <a href="http://creativecommons.org/licenses/">Lea más acerca de los tipos de licencias Creative Common.</a>
+  <ul>
+   <li><span id="result_box" lang="es"><span class="hps">Importante</span><span>: Por favor,</span> <span class="hps">asegúrese de que tiene</span> <span class="hps">los derechos para usar</span> <span class="hps">la imagen en</span> <span class="hps">su tema</span><span>!</span></span></li>
+  </ul>
+ </li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Cargue sus imágenes</span></strong> </span>—<span lang="es"> <span class="hps">asegurarse de que son</span> <span class="hps">menos de 300</span> <span class="hps">KB</span> <span class="hps">de tamaño y</span> <span class="hps">JPG</span> <span class="hps">o PNG</span><span>!</span></span></li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Seleccione</span> <span class="hps">el texto y</span> <span class="hps">los colores</span> <span class="hps">de la ficha</span></strong> </span>—<span lang="es"><span class="hps"> puede elegir</span> <span class="hps">la pestaña</span> <span class="atn hps">(</span><span class="hps">"background</span><span>"</span><span>)</span><span class="hps"> color</span> <span class="hps">y color</span> <span class="hps">de texto</span> <span class="hps">plano</span> <span class="hps">que</span> <span class="hps">mejor</span> funcione con <span class="hps">su</span> <span class="hps">imagen de cabecera</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Vista previa de</span> <span class="hps">su tema</span></strong> </span>—<span lang="es"> <span class="hps">usted está listo</span> <span class="hps">para previsualizar</span> <span class="hps">su tema</span><span>!</span> <span class="hps">Simplemente</span> <span class="hps">puntero del ratón sobre</span> <span class="hps">la imagen arriba</span> <span class="hps">del botón</span><span class="hps"> Enviar</span> Tema <span class="hps">y</span> <span class="hps">ver</span> <span class="hps">cómo se ve</span> <span class="hps">al instante.</span></span></li>
+ <li><span id="result_box" lang="es"><strong><span class="hps">Presentar</span> <span class="hps">su tema</span> </strong></span>—<span lang="es"> <span class="hps">si todo</span> <span class="hps">se ve bien</span><span>,</span> <span class="hps">haga clic en el</span> <span class="hps">botón</span> <span class="hps">Enviar</span> <span class="hps">Tema y</span> <span class="hps">todo listo!</span> <span class="hps">Puede ver todos</span> <span class="hps">los temas</span> <span class="hps">que has</span> <span class="hps">sido autor</span> <span class="hps">en su página de</span> <span class="hps">perfil.</span></span>
+  <ul>
+   <li><span id="result_box" lang="es"><strong><span class="hps">Consejo:</span></strong> <span class="hps">para asegurarse de que</span> <span class="hps">su tema</span> <span class="hps">está aprobado para</span> <span class="hps">la galería</span><span>, asegúrese de que</span> <span class="hps">cumple con</span> <span class="hps">las directrices</span> <span class="hps">de contenido y</span> <span class="hps">los términos de servicio</span><span>!</span></span></li>
+  </ul>
+ </li>
+</ol>
+
+<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9933/submission-step.jpg" style="height: 1800px; width: 785px;"></p>
+
+<p class="call-to-submit"><a class="button prominent" href="https://addons.mozilla.org/en-US/developers/theme/submit">Presente su Tema Ahora</a></p>
+</div>
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
+---
+<p> </p>
+<div class="callout-box"><strong><a href="/es/Creando_un_skin_para_Firefox/Como_empezar" title="es/Creando_un_skin_para_Firefox/Como_empezar">Primeros pasos</a></strong><br> Para quienes quieren crear un tema y no saben cómo.</div>
+<div> <p>Los <strong>Temas</strong> 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.</p>
+</div>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=Temas&amp;language=es" title="Special:Tags?tag=Temas&amp;language=es">Documentación</a></h4> <dl> <dt><a href="/es/Creando_un_tema_para_Firefox" title="es/Creando_un_tema_para_Firefox">Creando un tema para Firefox</a></dt> <dd><small>Para crear un tema para Firefox necesitaras saber tres cosas. Cómo editar imágenes, como extraer archivos zip, y como modificar CSS.</small></dd> </dl> <dl> <dt><a href="/es/Empaquetar_un_Tema" title="es/Empaquetar_un_Tema">Empaquetar un Tema</a></dt> <dd><small>Como empaquetar temas para Firefox y Thunderbird.</small></dd> </dl> <dl> <dt><a href="/es/Cambios_del_tema_en_Firefox_2" title="es/Cambios_del_tema_en_Firefox_2">Cambios del tema en Firefox 2</a></dt> <dd><small>¿Creaste un tema para Firefox 1.5, y ahora quieres actualizarlo para que funcione correctamente en Firefox 2?</small></dd> </dl> <dl> <dt><a href="/en/Installing_Extensions_and_Themes_From_Web_Pages" title="en/Installing_Extensions_and_Themes_From_Web_Pages">Installing Extensions and Themes From Web Pages (en)</a></dt> <dd><small>There are a variety of ways you can install <a href="/es/Extensiones" title="es/Extensiones">Extensiones</a> and <a href="/es/Temas" title="es/Temas">Temas</a> from web pages, including direct linking to the XPI files and using the <a href="/en/InstallTrigger" title="en/InstallTrigger">InstallTrigger</a> object.</small></dd> </dl> <p><span class="comment">;{{ mediawiki.external('http://cheeaun.phoenity.com/weblog/2004/12/first-steps-in-theme-design.html First steps in theme design (en)') }} :</span></p> <p><span class="alllinks"><a href="/Special:Tags?tag=Temas&amp;language=es" title="Special:Tags?tag=Temas&amp;language=es">Ver todos...</a></span></p> </td> <td style="background-color: #dda0dd;"> <h4 id="Comunidad" name="Comunidad">Comunidad</h4> <ul> <li><a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&amp;Itemid=122&amp;page=viewforum&amp;f=15">Desarroll</a><span style="color: #ff66ff;"><a class=" external" href="http://www.publicdomainpictures.net/pictures/1000/nahled/345-1217201669MHzo.jpg" title="MDN"><img alt="MDN" class="default" src="http://www.publicdomainpictures.net/pictures/1000/nahled/345-1217201669MHzo.jpg"></a></span>o Mozilla en los foros de Mozilla-ES.</li> </ul> <ul> <li>View Mozilla forums...</li> </ul> <p>{{ DiscussionList("dev-themes", "mozilla.dev.themes") }}</p> <ul> <li><a class="external" href="http://forums.mozillazine.org/viewforum.php?f=18">MozillaZine Themes forum</a></li> </ul> <p><span class="alllinks"><a href="/es/Temas/Comunidad" title="es/Temas/Comunidad">Ver todos...</a></span></p> <h4 id="Herramientas" name="Herramientas">Herramientas</h4> <ul> <li><a href="/es/DOM_Inspector" title="es/DOM_Inspector">DOM Inspector</a></li> <li><a class="external" href="http://www.extensionsmirror.nl/index.php?showtopic=21">ChromeEdit, extensión para Firefox</a></li> </ul> <p><span class="alllinks"><a href="/Special:Tags?tag=Temas:Herramientas&amp;language=es" title="Special:Tags?tag=Temas:Herramientas&amp;language=es">Ver todos...</a></span></p> <h4 id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h4> <dl> <dd><a href="/es/CSS" title="es/CSS">CSS</a></dd> </dl> </td> </tr> </tbody>
+</table>
+<p><span class="comment">Categorías</span></p>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p> </p>
+<p> </p>
+<p>{{ 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" } ) }}</p>
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
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>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.</p>
+
+<p>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</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>&lt;mytheme&gt;
+ &lt;your_header_image&gt;.&lt;type&gt;</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": "&lt;your_theme_name&gt;",
+  "theme": {
+    "images": {
+      "headerURL": "&lt;your_header_image&gt;.&lt;type&gt;"
+    },
+    "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": "&lt;your_theme_name&gt;",
+  "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>