Search completed in 0.86 seconds.
260 results for "theme":
Your results are loading. Please wait...
Sunbird Theme Tutorial - Archive of obsolete content
this tutorial is a step-by-step guide to making a theme for sunbird 0.3a1 and later versions.
... introduction a theme is a package that users can install in an application to change the appearance of the application, without changing how the application works.
... for example, a theme can change the size and colour of the toolbar buttons, and provide different icons on the buttons.
...And 53 more matches
Building a Theme - Archive of obsolete content
introduction this tutorial will take you through the steps required to build a very basic theme - one which updates the background color of the toolbars in firefox.
... note: this tutorial is about building themes for firefox 29 and later.
... other tutorials exist for building themes for earlier versions of firefox.
...And 40 more matches
Theme concepts
themes developed using the webextensions api in firefox enable you to change the look of the browser by adding images to the header area of the firefox browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.
... 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.
... if you have a lightweight theme it will be converted to this new theme format automatically before lightweight themes are deprecated.
...And 38 more matches
Frequently Asked Questions for Lightweight themes
introducing lightweight themes what are lightweight themes?
... lightweight themes are easy-to-install, easy-to-use skins that change the look of your firefox web browser.
... there are hundreds of thousands community-designed themes to choose from, with more added every day.
...And 27 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
the purpose of this page is to provide provide theme developers with notes on how to fix common issues.
... it is a companion document to the amo editors guide common theme problems, which provides editors with "boilerplate" copy and paste review notes for common theme issues.
...a little experimenting may be required to fully address this issue with your theme.
...And 19 more matches
Create Your Own Firefox Background Theme - Archive of obsolete content
how to create your own background theme themes are made up of a "header" graphic image file, which skins the default firefox ui background.
... creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... view a sample theme header here.
...And 15 more matches
Theme changes in Firefox 2 - Archive of obsolete content
this article covers the changes that need to be made to update a firefox theme to work properly in firefox 2.
... note: we could use an article called updating themes for firefox 2 that would serve as a how-to guide for updating themes.
... browser changes requiring theme updates there are a number of changed and deleted files in the browser that may require you to make changes to your theme.
...And 15 more matches
Lightweight themes
lightweight themes are sometimes referred to as "background themes" or, (on addons.mozilla.org) as just "themes".
... how to create your own lightweight theme lightweight themes are made up of a "header" graphic image file, which skins the default firefox ui background.
... creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
...And 13 more matches
Theme changes in Firefox 4 - Archive of obsolete content
this article covers changes in firefox 4 that affect theme developers.
...however, this does impact theme developers, since many of the files that they need to pull out and work with are now in a new place.
...the theme can now override the value by setting a special css property on the toolbar.
...And 10 more matches
Theme changes in Firefox 3 - Archive of obsolete content
this article covers the changes that need to be made to update a firefox theme to work properly in firefox 3.
... note: we could use an article called updating themes for firefox 3 that would serve as a how-to guide for updating themes.
... browser changes requiring theme updates there are a number of changed and deleted files in the browser that may require you to make changes to your theme.
...And 9 more matches
Theme Packaging
this document describes how to package themes for thunderbird.
... pre-requisites making a theme for thunderbird requires knowledge of cascading stylesheets (css), probably xbl, and some graphic design and aesthetic skill (...or maybe not).
... this document describes only how themes are packaged in order to be shown in firefox's themes window.
...And 6 more matches
Theme changes in Firefox 3.5 - Archive of obsolete content
this article covers the changes that need to be made to update a firefox theme to work properly in firefox 3.5.
... core, browser and toolkit changes requiring theme updates there are a number of changes in the browser that may require you to make changes to your theme.
...for the windows and linux native default themes, the gripper is now drawn as a part of the background of the scrollbar thumb widget.
...And 5 more matches
Using the standard theme - Archive of obsolete content
you can either provide a complete custom styling, but most of the time you also want to be able to reuse the standard theme (also called the "global skin") of the base application for non-custom elements, transparently with regard to which theme the user has currently chosen.
...meaning, some internal default will be applied, which does by no means correspond to the standard theme (the theme currently chosen by the user in the theme selector), or even the default theme delivered with your the base application.
... applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to add the following line to your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul widgets of your application use the selected chosen theme.
...And 3 more matches
Making sure your theme works with RTL locales - Archive of obsolete content
a screenshot of firefox 2 in hebrew what you need to do at this stage you might ask yourself, "how would i know what language is my theme installed on?
... should i make a special theme for these locales?" don't despair: making a theme rtl-compatible is fairly easy!
...all you have to do is add css rules to your theme that test for the value of this attribute, and use that to apply any rtl-specific rules that you may have.
...And 3 more matches
:-moz-system-metric(windows-default-theme) - Archive of obsolete content
the :-moz-system-metric(windows-default-theme) css pseudo-class matches an element if the user is currently using one of the following themes in windows: luna, royale, zune, or aero (i.e., vista basic, vista standard, or aero glass).
... this will exclude windows classic themes as well as third-party themes.
... this selector is intended for use mainly by theme developers.
...And 3 more matches
Installing Extensions and Themes From Web Pages - Archive of obsolete content
there are a variety of ways you can install extensions and themes from web pages, including direct linking to the xpi files and using the installtrigger object.
... themes pretty much everything i've described applies to themes too, except you'll use the installchrome function.
... because so many sites installed extensions by direct-linking the xpi file and relying on content handling to invoke the confirmation ui, many sites are (incorrectly) doing so for theme jar files too and wondering why they aren't auto-detected and installed.
...And 2 more matches
Themes
themes allow you to change the look and feel of the user interface and personalize it to your tastes.
... learn how to create and share themes!
... browser themes browser theme concepts get an introduction to creating themes for the latest versions of firefox using the amo theme generator use the theme generator to create and submit a new theme to amo lightweight themes lightweight themes have been deprecated and are no longer accepted by amo.
...And 2 more matches
theme-color - HTML: Hypertext Markup Language
WebHTMLElementmetanametheme-color
the theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface.
... example <meta name="theme-color" content="#4285f4"> the following image shows the effect that the <meta> element above will have on a document displayed in chrome running on an android mobile device.
... specifications specification html living standardthe definition of 'theme-color' in that specification.
theme_color - Web app manifests
type string mandatory no the theme_color member is a string that defines the default theme color for the application.
... this sometimes affects how the os displays the site (e.g., on android's task switcher, the theme color surrounds the site).
... examples "theme_color": "red" specification specification status comment feedback web app manifestthe definition of 'theme_color' in that specification.
Themes - Archive of obsolete content
archived theme documentation.
... building a themecommon firefox theme issues and solutionscreating a skin for firefoxuuidcontents.rdfinstall.rdfmaking sure your theme works with rtl localestheme changes in firefox 2theme changes in firefox 3theme changes in firefox 3.5theme changes in firefox 4 ...
:-moz-system-metric(mac-graphite-theme) - Archive of obsolete content
:-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.
... this selector is intended for use mainly by theme developers.
-moz-windows-theme - Archive of obsolete content
the -moz-windows-theme gecko-only css media feature is useful for customizing application skins and other chrome code to work well with the user's windows theme.
... syntax the -moz-windows-theme feature is specified as a keyword value that indicates which windows theme is currently being used.
lightweightthemes - Archive of obsolete content
« xul reference home lightweightthemes type: boolean true if the window supports lightweight themes, otherwise false.
lightweightthemesfooter - Archive of obsolete content
« xul reference home lightweightthemesfooter type: id specifies the id of an element to which a lightweight theme's footer image will be applied.
-moz-mac-graphite-theme - Archive of obsolete content
the -moz-mac-graphite-theme gecko-only css media feature can be used to apply styles based on whether the user has the mac os x "graphite" theme enabled.
-moz-windows-default-theme - Archive of obsolete content
syntax <integer> if the user is using one of the default windows themes—luna, royale, zune, or aero (including vista basic, vista advanced, and aero glass)—this is 1.
:-moz-lwtheme-brighttext
the :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.
:-moz-lwtheme-darktext
the :-moz-lwtheme-darktext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a dark text color is selected.
:-moz-lwtheme
the :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.
Index - Archive of obsolete content
238 extension theming guidelines add-ons, extensions this is a set of guidelines on how to control the look and feel of your extension while leaving it open for styling by custom themes.
... 247 installing extensions and themes from web pages add-ons, extensions, obsolete, themes there are a variety of ways you can install extensions and themes from web pages, including direct linking to the xpi files and using the installtrigger object.
... 300 signing an extension add-ons, administration, extensions, themes, xpinstall, enterprise this article describes how to digitally sign your extension for firefox and thunderbird, with a code signing certificate for object signing.
...And 40 more matches
The Firefox codebase: CSS Guidelines
most of the time, the common component already follows the a11y/theme standards defined in this guide.
... writing cross-platform css firefox supports many different platforms and each of those platforms can contain many different configurations: windows 7, 8 and 10 default theme aero basic (windows 7, 8) windows classic (windows 7) high contrast (all versions) linux macos file structure the browser/ directory contains styles specific to firefox the toolkit/ directory contains styles that are shared across all toolkit applications (thunderbird and seamonkey) under each of those two directories, there is a themes directory containing 4 sub-directori...
...theme css the following directories also contain css: browser/base/content/ toolkit/content/ these directories contain content css, that applies on all platforms, which is styling deemed to be essential for the browser to behave correctly.
...And 19 more matches
Getting Started - Archive of obsolete content
extract theme while you can hypothetically begin with any theme already designed for seamonkey 2, for the sake of consistency we'll speak as though everyone is editing classic (default seamonkey theme).
...this is the most critical directory in a theme.
... install your new theme before you can see the changes you make to a seamonkey theme (since live edits are restrictively difficult to set up) you must first learn how to repackage the classic theme to make it installable.
...And 15 more matches
Complete - Archive of obsolete content
in seamonkey it supports two themes (classic and modern).
...the following sections describe this extension's overall structure, and how it implements languages and themes.
...nstallation script for seamonkey chrome directory containing the extension code chrome/allcustom.jar the extension jar defaults/preferences directory containing a preferences file inside the jar there are three directories: content xul, javascript and other content that does not depend on the locale or theme locale files for each locale skin files for each theme version checks firefox etc.
...And 15 more matches
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
extract theme while you can hypothetically begin with any theme already designed for firefox, for the sake of consistency we'll speak as though everyone is editing the default firefox theme.
...see theme changes in firefox 4 for details on how to extract skin files from firefox 4 or later.
...this is the most critical directory in a theme.
...And 13 more matches
DevTools API - Firefox Developer Tools
api gdevtools the gdevtools api can be used to register new tools, themes and handle toolboxes for different tabs and windows.
... registertheme(themedefinition) registers a new theme.
... parameters: themedefinition {themedefinition} - an object that contains information about the theme.
...And 12 more matches
Enhanced Extension Installation - Archive of obsolete content
<location>/extensions.ini - an ini manifest listing the directories for all the extensions and themes at the location (used by the component manager, preferences system, chrome registry etc to locate files during the startup process).
...rather, if the system needs to know where an item is located, it checks to see if the item is a member of the the appropriate type container (urn:mozilla:extension:root or urn:mozilla:theme:root) in each of the two datasources.
... item type the extension system in firefox 1.0 supports only two item types, extensions and themes.
...And 7 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
this is a matter of personal preference, but the mac os theme seems to be designed so that the bookmarks toolbar is always the last one (it has a lighter color than the rest).
... here are the key similarities and differences between the 3 themes: all systems use small icons that are 16x16 pixels.
... only the gnome theme has a set of large icons that are 24x24 pixels.
...And 6 more matches
XUL Structure - Archive of obsolete content
mozilla also has one component for each installed theme and locale.
... skin - style sheets, images and other theme specific files style sheets describe details of the appearance of a window.
... they are stored separately from xul files to facilitate modifying the skin (theme) of an application.
...And 6 more matches
Index
678 make money from browser extensions guide, monetization, webextensions, distribution while users can download browser extensions for firefox free of cost from addons.mozilla.org (amo), this doesn’t mean you can’t make money from browser extensions, and to a more limited extent themes.
... 679 promoting your extension or theme add-ons, extensions, promotion, themes, webextensions, distribution so you’ve written a great extension, but only a few people have found and installed it from addons.mozilla.org—despite your efforts to create an appealing listing.
... 684 themes add-ons, look & feel, themes themes allow you to change the look and feel of the user interface and personalize it to your tastes.
...And 6 more matches
Getting Started - Archive of obsolete content
skin info when switching skins in mozilla, it displays a preview image and some information about the theme.
...take a screenshot of mozilla running your theme and create an image that is 438x89 pixels in size.
...list all the skins being supplied by this theme <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> in the code search for the part listed above.
...And 4 more matches
Structure of an installable bundle - Archive of obsolete content
xulrunner applications, extensions, and themes all share a common directory structure, and in some cases the same bundle can be used as a standalone xulrunner application as well as an installable application extension.
... basic structure of a bundle a bundle may include any of the following files: path from the root of the bundle description version information /install.rdf extension/theme install manifest /application.ini application launch manifest /bootstrap.js the bootstrap script for extensions not requiring a restart (those with <em:bootstrap>true</em:bootstrap> in their install.rdf).
...themes are limited for security reasons, and can normally only provide a chrome.manifest which registers the theme and a jar file.
...And 3 more matches
Manifest Files - Archive of obsolete content
for themes, 'skin' is used while 'locale' is used for locales.
...themes and locales the themes and locales, the syntax is similar as for content packages, but you also need to specify the content package you are providing a theme or locale for.
...in this case, a version number is being used as part of the theme name, but that is optional if you are making your own theme.
...And 3 more matches
Chrome registration
mozilla locates and reads the root chrome.manifest file for extensions and themes.
... in order to inform the chrome registry of the available chrome, a text manifest is used: this manifest is "chrome.manifest" in the root of an extension, or theme, or xulrunner application.
...for example: content packagename chrome/path/ content packagename chrome/path/ contentaccessible=yes os extensions (or themes) may offer different features depending on the operating system on which firefox is running.
...And 3 more matches
Observer Notifications
themes these topics indicate when actions related to themes occur.
... topic data description lightweight-theme-preview-requested json sent when the user requests to preview a lightweight theme, but before existing windows are styled with the new theme.
... lightweight-theme-change-requested json sent to indicate that the user has chosen a new theme in the add-ons manager, but before the change takes effect.
...And 3 more matches
prefers-color-scheme - CSS: Cascading Style Sheets
alternately, users can create the numeric preference ui.systemusesdarktheme to override the default behavior and return light (value: 0), dark (value: 1), or no-preference (value: 2).
... (any other value causes firefox to return light.) the prefers-color-scheme css media feature is used to detect if the user has requested the system use a light or dark color theme.
... syntax light indicates that user has notified the system that they prefer an interface that has a light theme, or has not expressed an active preference.
...And 3 more matches
Extension Theming Guidelines - Archive of obsolete content
this is a set of guidelines on how to control the look and feel of your extension while leaving it open for styling by custom themes.
...custom themes may then register a replacement for your skin package allowing them to provide their own styles for all of your content.
... branding certain items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your chrome skin package.
...And 2 more matches
Multiple item extension packaging - Archive of obsolete content
xpi file extension) and themes (e.g.
...the basic structure is shown below: /install.rdf install manifest /extension1.xpi extension /extension2.xpi extension /theme1.jar theme /theme2.jar theme ...
... installation installation can be performed using any of the existing methods used for installing extensions / themes.
...And 2 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
176 lightweightthemes lightweight themes, xul attributes, xul reference no summary!
... 177 lightweightthemesfooter no summary!
... 970 using the standard theme add-ons, extensions, themes no summary!
...And 2 more matches
The Chrome URL - Archive of obsolete content
another advantage over other url types is that they automatically handle multiple themes and locales.
... for example, a chrome url lets you refer to a file in the theme such as an image without needing to know which theme the user is using.
... as long as the filenames are the same in each theme, you can refer to the file using a chrome url.
...And 2 more matches
tab - Archive of obsolete content
ArchiveMozillaXULtab
this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.
...this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.
... depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
...And 2 more matches
XULRunner tips - Archive of obsolete content
the following prefs must also be set to make the xpinstall dialog, extension manager, and theme manager work: pref("xpinstall.dialog.confirm", "chrome://mozapps/content/xpinstall/xpinstallconfirm.xul"); pref("xpinstall.dialog.progress.skin", "chrome://mozapps/content/extensions/extensions.xul?type=themes"); pref("xpinstall.dialog.progress.chrome", "chrome://mozapps/content/extensions/extensions.xul?type=extensions"); pref("xpinstall.dialog.progress.type.skin", "extension:manager-themes"); ...
...hpending", false); pref("extensions.ignoremtimechanges", false); pref("extensions.logging.enabled", false); pref("general.skins.selectedskin", "classic/1.0"); // nb these point at amo pref("extensions.update.url", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmoreextensionsurl", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.getmorethemesurl", "chrome://mozapps/locale/extensions/extensions.properties"); if your application is based on gecko 2.0, you need to register a component through the new component registration because the extension manager uses fuel, namely application.restart(), to restart your xulrunner-based application after any change (installation, removal, enabling, disabling) in the extensions' list: copy files...
... window url window type extension manager chrome://mozapps/content/extensions/extensions.xul?type=extensions extension:manager-extensions theme manager chrome://mozapps/content/extensions/extensions.xul?type=themes extension:manager-themes javascript console chrome://global/content/console.xul global:console about:config chrome://global/content/config.xul developer extensions venkman need a custom build or a compatible extension need to edit compatibility in needs a method to start venk...
...And 2 more matches
Making decisions in your code — conditionals - Learn web development
the following live example shows a simple theme chooser where the styling for the site is applied using a ternary operator.
... <label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> </select> <h1>this is my website</h1> const select = document.queryselector('select'); const html = document.queryselector('html'); document.body.style.padding = '10px'; function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; } select.onchange = function() { ( select.value === 'black' ) ?
... update('black','white') : update('white','black'); } here we've got a <select> element to choose a theme (black or white), plus a simple <h1> to display a website title.
...And 2 more matches
Accessible Toolkit Checklist
provide theme compatibility with the operating system, at least as an option.
... some low vision users will be running your software with high contrast or large font themes.
...since the individual widgets predominately come from the operating system, they already implement standard keyboard commands and follow the operating system's visual theme.
...And 2 more matches
Extension Packaging - Archive of obsolete content
including add-ons in a customized application a customized application can include add-ons, including extensions and themes, by placing the unpacked (that is, not the xpi files, but the packages' contents) in the <appdir>/distribution/extensions directory.
... this directory containing the add-on must be named the same as the id of the add-on or theme.
... multi-item extension xpis in some cases, a single xpi file may wish to install multiple extensions/themes.
... official references for toolkit api structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package extensions theme packaging: specific information about how to package themes multiple-item extension packaging: specific information about multiple-item extension xpis xul application packaging: specific information about how to package xulrunner applications chrome registration printing in xul apps ...
Install Manifests - Archive of obsolete content
2 extensions 4 themes 8 locale 32 multiple item package 64 spell check dictionary 128 telemetry experiment 256 webextension experiment examples <em:type>2</em:type> this property was added for firefox 1.5, and is only required for add-on types other than extensions and themes.
... skinnable a true or false value property that tells the application whether the (complete) theme can be skinned by lightweight themes/personas: examples <em:skinnable>true</em:skinnable> strictcompatibility a boolean value indicating if the add-on should be enabled when the version of the application is greater than its max version.
... examples <em:targetplatform>winnt_x86-msvc</em:targetplatform> <em:targetplatform>linux</em:targetplatform> <em:targetplatform>darwin_ppc-gcc3</em:targetplatform> <em:targetplatform>sunos_sparc-sunc</em:targetplatform> usually, you would use only the os part for themes or for extensions that are not fully cross-platform.
... this object has a package property (with a path within the jar file or directory that leads to the location where the contents.rdf file responsible for registering that package is located), a locale property (ditto, but to register the locale) and a skin property (ditto, but to register the theme material).
New Skin Notes - Archive of obsolete content
--dria ok, the difference on the cavendish theme is negligible (to the point where i never noticed).
...--dria the menu column seems larger than before in the current test theme, so as to cause some reference pages to look ugly when browser set in 800x* resolution, using the default firefox 1.0.6 fonts settings on xfree86.
... a few examples: , .these work fine with the old theme, and i expect that this affects a lot of reference articles.
...--mmondor 12:25, 26 aug 2005 (pdt) hmm, note that when logged-in, the theme is all fine like the old one, it's when a user doesn't login and reads the docs through the test site that the menu bar then is at the right and is slightly too large...
XUL accessibility guidelines - Archive of obsolete content
groupboxes are essential for radiogroups or groups of checkboxes with a similar theme (e.g.
...many users set their computers to use larger than normal fonts and/or specific color themes.
...do this by changing system display settings to an accessible theme (such as the high-contrast theme on windows, available via left-alt + left-shift + printscreen).
...use css system colors to ensure that new widgets interact well with other widgets and with user-defined colors and themes.
Mozilla's Section 508 Compliance
the default theme, classic, uses the operating system's font and color contrast settings.
... when the windows "high contrast theme" is used classic, and thus the system look and feel, is automatically selected.
...the default theme, classic, uses gnome's font and color contrast settings.
... under linux/unix it is the user's choice, whether to stick with the gnome theme or not -- they must choose classic if they want to follow the gnome theme.
source-editor.jsm
theme constants these constants are used to identify the available themes that can be used by the syntax highlighter.
... constant value description sourceeditor.themes.mozilla "mozilla" the default mozilla syntax highlighter theme.
... sourceeditor.defaults.keys null sourceeditor.defaults.mode sourceeditor.modes.text sourceeditor.defaults.readonly false sourceeditor.defaults.showannotationruler false sourceeditor.defaults.showlinenumbers false sourceeditor.defaults.showoverviewruler false sourceeditor.defaults.tabsize 4 sourceeditor.defaults.theme sourceeditor.themes.mozilla sourceeditor.defaults.undolimit 200 event name constants these constants provide the names of the editor events for which you can listen.
... theme string a string indicating the default syntax highlighting theme to use; you may use one of the predefined values listed in theme constants, or you may provide your own css file reference.
-ms-high-contrast - CSS: Cascading Style Sheets
high contrast mode is a specialized display mode that prioritizes making content as legible as possible by dynamically replacing foreground and background colors with a user-specified theme.
... for web content, theme colors are mapped to content types.
... @media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors.
... because high contrast mode themes are dynamic, use these color keywords in place of other css color values.
Extension Etiquette - Archive of obsolete content
to maintain the default theme, avoid the use of an icon next to the menu items.
... theming if you have xul buttons in your extension that do functions similar to ones that already exist in a browser — for example, a feed reader that reloads and stops — use icons from the browser's theme.
... the icons makes the extension lighter, while providing more consistency, especially for users using different themes.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
most extensions include only one skin package, but you can include multiple skin packages to allow the gui to change with different themes.
...the extension will actually work fine even if these are located in the content package, but putting them in the skin package has the benefit of making it possible to design guis that match specific firefox themes, and allowing theme developers to create special visual effects for extensions.
...d/skin/overlay.css style chrome://global/content/customizetoolbar.xul chrome://helloworld/skin/overlay.css register skin package (skin instruction) line 1 beginning skin is used to register the skin package; helloworld is the package name; skin/classic/ is the relative path to the folder containing the source files; classic/1.0 indicates that this skin package is meant for the firefox standard theme.
Getting Started with Firefox Extensions - Archive of obsolete content
all extensions are add-ons, but add-ons can also be themes, plugins, or language packs.
... this tutorial is about extension development, but themes and language packs are developed in a very similar way.
...this is an important point to keep in mind if you're building an extension that manipulates other extensions or themes.
XUL user interfaces - Archive of obsolete content
veattribute("warning") status.setattribute("label", "") } else if (adate === false || isnan(adate.gettime())) { status.setattribute("warning", "true") status.setattribute("label", "date is not valid") } else { status.removeattribute("warning") status.setattribute("label", adate.tolocaledatestring()) } } to see the result exactly as intended, use the default theme in your browser.
... if you use a different theme, it changes some user-interface styles and the demonstration might look strange.
... much of the style that you see is determined by your browser's theme.
Index of archived content - Archive of obsolete content
n samples extension theming guidelines extension versioning, update and compatibility extensions support in seamonkey 2 firefox addons developer guide hiding browser chrome hotfix extension how to convert an overlay extension to restartless inline options install manifests installing extensions and themes from web pages interaction between privileged and non-privileged pages jetpack processes legacy add-ons legacy extensions for firefox for android api accounts.jsm browserapp addtab closetab ...
... x xembed extension for mozilla plugins sax security digital signatures encryption and decryption introduction to public-key cryptography introduction to ssl nspr release engineering guide ssl and tls solaris 10 build prerequisites sunbird theme tutorial table reflow internals tamarin tracing build documentation the basics of web services themes building a theme common firefox theme issues and solutions creating a skin for firefox uuid contents.rdf install.rdf makin...
...g sure your theme works with rtl locales theme changes in firefox 2 theme changes in firefox 3 theme changes in firefox 3.5 theme changes in firefox 4 updating an extension to support multiple mozilla applications using firebug and jquery (screencast) using io timeout and interrupt on nt using ssh to connect to cvs using web standards in your web pages developing cross-browser and cross-platform pages references summary of changes using the w3c dom using workers in extensions web standards choosing standards compliance over proprietary practices community ...
Source code directories overview - Archive of obsolete content
themes contains the default themes for mozilla, modern and classic.
... themes contains firefox themes.
... profilecontains the profile manager themescontains themes as they relate to toolkit things.
Supporting private browsing mode - Archive of obsolete content
the theme looks different in this scenario.
...private browsing for theme designers if you want to make your theme look different when used in private browsing mode, you can do so quite easily by using the browsingmode attribute in the window element in browser.xul.
...for example, if you want to use a different background color for the url bar when in private browsing mode, you could do the following: [browsingmode=private] #urlbar { -moz-appearance: none; background: #eee } similarly, if you want to theme the firefox button in firefox 4 differently when private browsing mode is permanent: #main-window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-window-inactive) { -moz-border-left-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); -moz-border-right-colors: rgba(255,255,255,.5) rgba(43,8,65,.9); } this snippet is pulled directly from the stand...
Learn XPI Installer Scripting by Example - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... to register new netscape 6-based software (e.g., plug-ins, new components, new themes, new packages) with the chrome registry, you must use the registerchrome function of the install object.
...in this most common form of the registerchrome function (it can also be used to support the now-deprecatedmanifest.rdf style of installation archive), the three parameters represent, in order, the chrome switch used to indicate what kind of software is being registered, the target destination of the software (e.g., the "chrome" folder in the example above), and the path within the xpi (or jar theme archive) where the contents.rdf file is located.
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
on:active {-moz-image-region: rect(39px 147px 72px 98px);} /* common style for all custom buttons - classic */ .custombutton {-moz-image-region: rect( 0px 145px 20px 126px);} .custombutton:hover {-moz-image-region: rect( 0px 164px 20px 145px);} .custombutton:active {-moz-image-region: rect( 0px 183px 20px 164px);} remove one of the common style sections, leaving the section for the theme that you use in seamonkey.
... (if you leave both sections in the file, then your button's appearance will match the classic theme.) save the file.
...the six parts at the left are for seamonkey's modern theme, and the three parts at the right are for its classic theme.
Adding Style Sheets - Archive of obsolete content
this method has the disadvantage because it means your application will not be themeable.
... the second method involves placing your files as part of a theme.
... let's assume that we are building the find files dialog for themeability, because the find files dialog can be referred to with the url chrome://findfile/content/findfile.xul so the style sheet file will be stored in chrome://findfile/skin/findfile.css.
listitem - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
...this is typically used by a theme to customize the focus ring.
...these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
window - Archive of obsolete content
attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!
... lightweightthemes type: boolean true if the window supports lightweight themes, otherwise false.
... lightweightthemesfooter type: id specifies the id of an element to which a lightweight theme's footer image will be applied.
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:my_theme"/> </rdf:seq> <rdf:description about="urn:mozilla:skin:my_theme" chrome:displayname="my theme" chrome:accesskey="n" chrome:author="" chrome:authorurl="" chrome:description="" chrome:name="my_theme" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:my_th...
...eme:browser"/> <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="urn:mozilla:skin:my_theme:mozapps"/> <rdf:li resource="urn:mozilla:skin:my_theme:help"/> </rdf:seq> </chrome:packages> </rdf:description> <!-- version information.
...--> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:browser"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:communicator"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:global"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:mozapps"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:help"/> </rdf:rdf> ...
:-moz-system-metric() - Archive of obsolete content
syntax values -moz-windows-compositormedia: media/visual accepts min/max prefixes: no:-moz-system-metric(images-in-menus)the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus.:-moz-system-metric(mac-graphite-theme):-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.:-moz-system-metric(scrollbar-end-backward)the :-moz-system-metric(scrollbar-end-backward) css pseudo-class will match an element if the computer's user interface includes a backward arrow button at the end of scrollbars.:-m...
... uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.:-moz-system-metric(touch-enabled)the :-moz-system-metric(touch-enabled) css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.:-moz-system-metric(windows-default-theme)the :-moz-system-metric(windows-default-theme) css pseudo-class matches an element if the user is currently using one of the following themes in windows: luna, royale, zune, or aero (i.e., vista basic, vista standard, or aero glass).
... this will exclude windows classic themes as well as third-party themes.
-moz-maemo-classic - Archive of obsolete content
the -moz-maemo-classic gecko-only css media feature can be used to apply styles based on whether the user agent is using the original maemo theme.
... syntax <integer> if the user agent is using maemo with the original theme, this is 1.
... if it's using the newer fremantle theme, this is 0.
Command line options
add-ons gecko 1.9.2 note -install-global-extension and -install-global-theme have been removed from gecko 1.9.2 and upwards.
... -install-global-theme /path/to/theme same as above, but for themes.
... note: since firefox 2.0.0.7, use of the -install-global-extension and -install-global-theme command line arguments have been restricted to only allow installing add-ons that are on local disks or mapped drives.
Mozilla CSS extensions - CSS: Cascading Style Sheets
-broken-image-icon -moz-image-region o -moz-orient -moz-osx-font-smoothing -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright overflow-clip-box overflow-clip-box-block overflow-clip-box-inline s–z -moz-stack-sizing :-moz-system-metric(images-in-menus) :-moz-system-metric(mac-graphite-theme) :-moz-system-metric(scrollbar-end-backward) :-moz-system-metric(scrollbar-end-forward) :-moz-system-metric(scrollbar-start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-window-drag...
...h ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-focus-inner ::-moz-focus-outer :-moz-focusring :-moz-full-screen :-moz-full-screen-ancestor :-moz-handler-blocked :-moz-handler-crashed :-moz-handler-disabled ::-moz-inline-table l :-moz-last-node :-moz-list-bullet :-moz-list-number :-moz-loading :-moz-locale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :-moz-lwtheme-darktext n – r :-moz-native-anonymous :-moz-only-whitespace ::-moz-page ::-moz-page-sequence ::-moz-pagebreak ::-moz-pagecontent :-moz-placeholderobsolete since gecko 51 ::-moz-placeholderdeprecated since gecko 51 ::-moz-progress-bar ::-moz-range-progress ::-moz-range-thumb ::-moz-range-track :-moz-read-only :-moz-read-write s ...
...ck :-moz-tree-image :-moz-tree-indentation :-moz-tree-line :-moz-tree-progressmeter :-moz-tree-row :-moz-tree-row(hover) :-moz-tree-separator :-moz-tree-twisty u – x :-moz-ui-invalid :-moz-ui-valid :-moz-user-disabled ::-moz-viewport ::-moz-viewport-scroll :-moz-window-inactive ::-moz-xul-anonymous-block at-rules @-moz-document media features -moz-mac-graphite-theme -moz-maemo-classic -moz-device-pixel-ratio -moz-os-version -moz-scrollbar-end-backward -moz-scrollbar-end-forward -moz-scrollbar-start-backward -moz-scrollbar-start-forward -moz-scrollbar-thumb-proportional -moz-touch-enabled -moz-windows-accent-color-in-titlebar -moz-windows-classic -moz-windows-compositor -moz-windows-default-theme -moz-windows-glass -moz-windows-theme other ...
How to make PWAs installable - Progressive web apps (PWAs)
{ "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#b12a34", "background_color": "#b12a34" } most of the fields are self-explanatory, but to be certain we're on the same page: name: the full name of your web app.
... theme_color: a primary color for the ui, used by operating system.
... the icon and the theme and background colors are used to create this screen.
Content Scripts - Archive of obsolete content
for example, this content script will fail with the error "themessage is not defined": var themessage = "hello from content script!"; anelement.setattribute("onclick", "alert(themessage);"); second, if you define an event listener by direct assignment to a global event handler like onclick, then the assignment might be overridden by the page.
...tscriptwhen: "start" }); this will work fine on most pages, but will fail on pages which also assign to onclick: <html> <head> </head> <body> <script> window.onclick = function() { window.alert("it's my click now!"); } </script> </body> </html> for these reasons, it's better to add event listeners using addeventlistener(), defining the listener as a function: var themessage = "hello from content script!"; anelement.onclick = function() { alert(themessage); }; anotherelement.addeventlistener("click", function() { alert(themessage); }); communicating with the add-on to enable add-on scripts and content scripts to communicate with each other, each end of the conversation has access to a port object.
Developing add-ons - Archive of obsolete content
there are three primary types of add-on: extensions, plugins, and themes.
... themes themes let users customize the appearance of the user interface presented by mozilla-based applications.
Chapter 1: Introduction to Extensions - Archive of obsolete content
this lowers the threshold both to using and to developing extensions; that fact, combined with firefox's rapidly growing popularity, has created a positive feedback loop, with the number of extension users and extension developers growing explosively—there are now more than 7000 extensions and themes published at the firefox add-ons site (https://addons.mozilla.org).
...themes, which alter firefox's appearance, are a kind of add-on.
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
on line 2 of listing 2, we’re reading in the theme’s standard style sheet.
... by referring to a special style sheet within chrome://global/skin/, we can make label and button sizes, window background color, etc, match the currently selected theme in firefox.
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>author@oftheme.com</em:id> <em:version>2.0b1</em:version> <!-- seamonkey --> <em:targetapplication> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.0b1pre</em:minversion> <em:maxversion>2.0b2pre</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>my_theme</em:name> <em:description>my first theme</em:description> <!-- front end integration hooks (used by th...
...eme manager)--> <em:creator>john johnson</em:creator> <em:contributor>john johnson</em:contributor> <em:homepageurl>https://mycoolskin.com/</em:homepageurl> <em:updateurl>https://mycoolskin.com/</em:updateurl> <em:abouturl>https://mycoolskin.com/</em:abouturl> <em:internalname>my_theme</em:internalname> </description> </rdf> ...
Mozilla Application Framework in Detail - Archive of obsolete content
you may also further enhance the user interface by allowing 3rd parties to develop "themes" for your application.
... themes are simply collections of images and css which can augment or replace your current ui elements.
Using gdb on wimpy computers - Archive of obsolete content
loaded symbols for /usr/lib/libgtk-1.2.so.0 reading symbols from /usr/lib/gtk/themes/engines/libthinice.so...done.
... loaded symbols for /usr/lib/gtk/themes/engines/libthinice.so (gdb) as you see above, it's possible to load more than one library with the same load command in gdb.
Creating XPI Installer Modules - Archive of obsolete content
mozilla has introduced major changes to the way that themes and all the other parts of the ui are packaged.
...when your package includes its own theme, localization packs, or other components it's convenient (but not necessary to create a subdirectory structure that reflects the role of the different parts.
Using XPInstall to Install Plugins - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
...this is, in fact, how skins and themes are installed to mozilla browsers, changing their look and feel.
InstallTrigger.installChrome - Archive of obsolete content
when a user clicks the link "install the new blue theme" in the example below, xpinstall downloads, registers, and installs the theme contained in newblue.xpi to the user's profile directory.
... <a href="#" onclick="installtrigger.installchrome( installtrigger.skin, 'http://wildskins/newblue.xpi', 'newblue/1.0');"> install the new blue theme</a> ...
Adding Labels and Images - Archive of obsolete content
the example below shows this: <image src="images/banner.jpg"/> although you can use this syntax, it would be better in order to support different themes to use a style sheet to set the image url.
...because images vary by theme, you would usually place images in the skin directory.
Creating an Installer - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... function donefn ( name , result ){ if (result) alert("an error occured: " + result); } var xpi = new object(); xpi["find files"] = "findfile.xpi"; installtrigger.install(xpi,donefn); the xpi archive note: if you want to create a new xulrunner application, extension, or theme, see bundles.
Modifying the Default Skin - Archive of obsolete content
firefox has a theme manager for changing the default skin.
... (although the underlying code for mozilla calls them skins and the user interface calls them themes, they're both referring to the same thing).
label - Archive of obsolete content
ArchiveMozillaXULlabel
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
...these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
menu - Archive of obsolete content
ArchiveMozillaXULmenu
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
...typcially, the theme will use this to highlight the item.
<statusbarpanel> - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
...these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
treecol - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
...this class should be used instead of changing the style of the element directly since it will fit more naturally with the user's selected theme.
Archived Mozilla and build documentation - Archive of obsolete content
creating a skin for seamonkey 2.x you're going to make a theme for seamonkey 2, but don't know how?
... structure of an installable bundle xulrunner applications, extensions, and themes all share a common directory structure, and in some cases the same bundle can be used as a standalone xulrunner application as well as an installable application extension.
Mozilla release FAQ - Archive of obsolete content
you can find replacement themes in preferences, under appearance->themes, using the 'get new themes' link there.
...you could tackle: porting mozilla to the os you use work on moving #ifdef platform to #ifdef feature/bug if you're on unix, port mozilla to the toolkit you prefer modularize/clean up apis fix bugs work on the expermental features (mail/news, aurora, nglayout) add new things: make opendoc and ole nglayout controls write new skins (see themes.org) add preference interfaces for the hidden features there's plenty to do..
Extentsions FAQ - Archive of obsolete content
inspector, talkback and the default theme are nowadays installed like this.
... friday, october 6 - 13, 2006 (↑ top) has anyone experienced problem with update that it only considers themes and extensions during the update check, ignoring langpacks with firefox 2.0?
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{themes_uuid}</em:id> <em:version>themes_version</em:version> <!-- target application this extension can install into, with minimum and maximum supported versions.
... --> <em:targetapplication> <description> <!-- firefox's uuid --> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>min_ff_version</em:minversion> <em:maxversion>max_ff_version</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <!-- my_theme --> <em:name>my_theme</em:name> <em:description>my_theme</em:description> <em:creator>your_name</em:creator> <em:contributor>contributors_names</em:contributor> <em:homepageurl>themes_homepage</em:homepageurl> <em:updateurl> url_of_update_location </em:updateurl> <em:abouturl> url_of_about_page </em:abouturl> <!-- front end integration hooks (used by theme manager)--> <em:internalname>my_theme</em:internalname> </description> </rdf> ...
The Business Benefits of Web Standards - Archive of obsolete content
by locating all the style and design issues in one document - the style sheet - whole sites can be rethemed in one go.
... the blogging community are particularly dynamic in this respect where on many platforms including wordpress, textpattern and habari, the site theme is a complete and discrete entity in its own right.
Archive of obsolete content
solaris 10 build prerequisites sunbird theme tutorial this tutorial is a step-by-step guide to making a theme for sunbird 0.3a1 and later versions.
... themes archived theme documentation.
What are browser developer tools? - Learn web development
this will give you a window like the following: to see what happens, try entering the following snippets of code into the console one by one (and then pressing enter): alert('hello!'); document.queryselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mywordmark.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); now try entering the following incorrect versions of the code and see what you get.
... alert('hello!); document.cheeseselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mybanana.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); you'll start to see the kind of errors that the browser returns.
Mozilla’s UAAG evaluation report
it does, however, support the look and feel of widgets on various operating systems, when the classic theme is selected (on by default).
...(p2) g use system colors by default (classic theme) underlines links by default does not have ui to highlight non-link and non-form elements that have event handlers can have user css for user styling of elements with event handlers 10.5 outline view.
Obsolete
this page contains theme documents and resources that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.
... creating a skin for firefox uuid contents.rdf install.rdf theme changes in firefox 2 theme changes in firefox 3 theme changes in firefox 3.5 theme changes in firefox 4 building a theme common theme issues and their solutions making sure your theme works with rtl locales creating a skin for seamonkey 2 dom inspector inspectorwidget force rtl yet another theme tutorial ...
Chrome-only CSS reference
MozillaGeckoChromeCSS
it only works in chrome code, and only on mac os x.:-moz-lwthemethe :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.:-moz-lwtheme-brighttextthe :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.:-moz-lwtheme-darktextthe :-moz-lwtheme-darktext pseudo-class matches in ch...
...rome documents when :-moz-lwtheme is true and a lightweight theme with a dark text color is selected.::-moz-tree-cellactivated by the properties attribute.::-moz-tree-cell-textactivated by the properties attribute.::-moz-tree-cell-text(hover)the :-moz-tree-cell-text(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell.::-moz-tree-columnactivated by the properties attribute.::-moz-tree-drop-feedbackactivated by the properties attribute.::-moz-tree-imageactivated by the properties attribute.::-moz-tree-indentationactivated by the properties attribute.::-moz-tree-lineactivated by the properties attribute.::-moz-tree-progressmeteractivated when the type attribute is set to progressmeter.
Toolkit API
these services include: profile management chrome registration browsing history extension and theme management application update service safe mode printing official references structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package extensions theme packaging: specific information about how to package themes multiple-item extension packaging: specific information about multiple-item extension xpis xul application packaging: specific information about how to package xu...
...lrunner applications chrome registration printing in xul apps see also the following developer pages contain examples and discussions of particular topics: xul xul overlays developing extensions xulrunner developing themes dom rdf storage ...
Index
MozillaTechXPCOMIndex
8 generating guids add-ons, developing mozilla, developing_mozilla:tools, extensions, tools, xpcom guids are used in mozilla programming for identifying several types of entities, including xpcom interfaces (this type of guids is callled iid), components (cid), and legacy add-ons—like extensions and themes—that were created prior to firefox 1.5.
... 701 nsiinstalllocation add-ons, extensions, interfaces, themes, xpcom, xpcom api reference, xpcom interface reference you can get the install location of a particular add-on using nsiextensionmanager interface: 702 nsiinterfacerequestor interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference this is similar to nsisupports.queryinterface().
Index
depending on the installed theme the result will look something like this: 80 building a thunderbird extension 7: installation extensions, thunderbird while you are developing the extension, there are two ways you can make thunderbird load it so you can test it as you go.
... 89 theme packaging add-ons, themes, toolkit api this document describes how to package themes for thunderbird.
Index - Firefox Developer Tools
6 dom inspector dom, dom:tools, dom_inspector, extensions, extensions:tools, themes, themes:tools, tools, web development, web development:tools, xul, xul:tools the dom inspector (also known as domi) is a developer tool used to inspect, browse, and edit the document object model of documents - usually web pages or xul windows.
... 30 devtoolscolors css this chart lists colors and css variables as implemented in the dark theme and light theme for developer tools.
Settings - Firefox Developer Tools
themes this enables you to choose one of two themes.
... there's a light theme, which is the default: a dark theme: common preferences settings that apply to more than one tool.
:host-context() - CSS: Cascading Style Sheets
another typical use would be to allow inner elements to react to classes or attributes on any anscestor elements - for example, applying a different text color when a .dark-theme class is applied to <body>.
... /* selects a shadow root host, only if it is a descendant of the selector argument given */ :host-context(h1) { font-weight: bold; } :host-context(main article) { font-weight: bold; } /* changes paragraph text color from black to white when a .dark-theme class is applied to the document body */ p { color: #000; } :host-context(body.dark-theme) p { color: #fff; } syntax :host-context( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>?
Introducing the CSS Cascade - CSS: Cascading Style Sheets
WebCSSCascade
the author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.
...this may happen in cases of animations, theme changes, and so forth.
Release notes - Archive of obsolete content
updated the default theme used for panels on mac os x.
Extension Versioning, Update and Compatibility - Archive of obsolete content
it varies depending on what type of add-on you are providing information for: for an extension or plugin bundle it must be urn:mozilla:extension:<id> for a theme it must be urn:mozilla:theme:<id> for any other type of add-on it must be urn:mozilla:item:<id> note: prior to gecko 2.0 (firefox 4.0), the ordering of the versions within the <rdf:seq> is significant.
Inline options - Archive of obsolete content
<setting pref="extensions.throbberrestored.showtxtontoolbar" title="show text on toolbar button" type="bool" oninputchanged="alert('new value is = ' + this.value); this.style.backgroundcolor='red';"> if labels on other toolbar buttons are visible (like by using add-on "classic theme restorer") then show label on throbber toolbar button </setting> note in order for the oninputchanged to execute, the setting must have a pref attribute, otherwise the oninputchanged will not trigger.
The Box Model - Archive of obsolete content
note that this is not really what you would expect from an extension, it's more like a theme.
The Essentials of an Extension - Archive of obsolete content
this division allows other developers to create themes that replace skins, and translators to create localizations in different languages, all of this without having to change your extension or your code.
Signing an extension - Archive of obsolete content
the following instructions also apply to a theme and other xpi files.
Install.js - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
List of Former Mozilla-Based Applications - Archive of obsolete content
ed mozilla browser to a plugin architecture with a qtwebkit plugin applications that are no longer being developed name description additional information aphrodite browser inactive aol client for mac internet software no longer available beonex communicator internet software last news item on site from 2004 chameleon theme builder inactive civil netizen p2p file delivery (email attachment replacement) site not updated since 2006 compuserve client internet software no longer available doczilla sgml/xml/html browser last release on site from july 2005 fabula language learning application inactive galeon browser last news item on site from s...
chrome.manifest - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "chrome.manifest": skin global my_theme jar:chrome/my_theme.jar!/global/ skin mozapps my_theme jar:chrome/my_theme.jar!/mozapps/ skin messenger my_theme jar:chrome/my_theme.jar!/messenger/ skin messenger-newsblog my_theme jar:chrome/my_theme.jar!/messenger-newsblog/ skin communicator my_theme jar:chrome/my_theme.jar!/communicator/ skin help my_theme jar:chrome/my_theme.jar!/help/ skin navigator my_theme jar:chrome/my_theme.jar!/navigator/ skin editor my_theme jar:chrome/my_theme.jar!/editor/ ...
Creating a Skin for SeaMonkey 2.x - Archive of obsolete content
introduction you're going to make a theme for seamonkey 2, but don't know how?
FAQ - Archive of obsolete content
in the case of skins the access key that you are defining is accessible by going to edit->preferences, appearance->themes, and then pressing a letter.
In-Depth - Archive of obsolete content
system colours css2 defines colours which are the same as your operating systems theme.
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> </rdf:seq> <rdf:description about="urn:mozilla:skin:myskin/1.0" chrome:displayname="my skin" chrome:accesskey="m" chrome:author="me" chrome:description="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:myskin/1.0:packages"> <rdf:li resource="u...
Creating a Skin for Mozilla - Archive of obsolete content
organizing images adding an image to the right of a toolbar jar file installer utility (provided by neil marshall) frequently asked questions links original document information author: neil marshall other contributors (suggestions/corrections): brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch last updated date: jan 5th, 2003 copyright information: copyright 2002-2003 neil marshall, permission given to devmo to migrate into the wiki april 2005 via email.
Force RTL - Archive of obsolete content
(this is a temporary placeholder/stub for the force rtl page) download force rtl making sure your theme works with rtl locales ehsan's force rtl page ...
Methods - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
File Object - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
InstallVersion Object - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
Methods - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
Properties - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
Install Object - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
Methods - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
WinProfile Object - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
Methods - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
WinReg Object - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
XPInstall API reference - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
XPInstall - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
afterselected - Archive of obsolete content
this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.
beforeselected - Archive of obsolete content
this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.
crop - Archive of obsolete content
ArchiveMozillaXULAttributecrop
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
current - Archive of obsolete content
this is typically used by a theme to customize the focus ring.
first-tab - Archive of obsolete content
this attribute should not be set manually, but is useful in a theme if the first tab should be styled differently.
last-tab - Archive of obsolete content
this attribute should not be set manually, but is useful in a theme if the last tab should be styled differently.
menuactive - Archive of obsolete content
typcially, the theme will use this to highlight the item.
treecol.type - Archive of obsolete content
here is an example css style using the current theme's checkboxes: treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells.
Deprecated and defunct markup - Archive of obsolete content
ch 2011 <bulletinboard> (made to support left/top styles, but <stack> can now do as well) <gripper> (inside of <scrollbar><thumb>; not to be used by itself) <listboxbody> (internal use only; part of xbl for <listbox>) <menubutton> (experiment in combining buttons and menus; use <button type> instead) <nativescrollbar> (displayed a native scrollbar; had been for mac only with native themes on) <outliner> (former name for <tree>; <listbox> had been "<tree>") <popup> (use menupopup) <package> (no longer present but in older documentation) <scrollbarbutton> (button at end of scrollbar; had been only within larger <scrollbar>) so, not deprecated, but internal use only?
MenuItems - Archive of obsolete content
although the exact size will vary depending on the theme being used, the size of menu item images should generally be around 16 by 16 pixels.
Positioning - Archive of obsolete content
this is because the default theme has a 21 pixel top margin on tooltips that moves them down by that much.
Printing from a XUL App - Archive of obsolete content
structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package extensions theme packaging: specific information about how to package themes multiple-item extension packaging: specific information about multiple-item extension xpis xul application packaging: specific information about how to package xulrunner applications chrome registration printing in xul apps ...
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
the dimensions of the icons in various applications for both modes are summarized in the following table (feel free to add information about other applications): application (theme name) big icon size small icon size firefox 1.0 (winstripe) 24x24 16x16 thunderbird 1.0 (qute) 24x24 16x16 the stylesheet to set the image for your toolbar button, use the following css rules: /* skin/toolbar-button.css */ #myextension-button { list-style-image: url("chrome://myextension/skin/btn_large.png"); } toolbar[iconsize="small"] #myextensi...
Toolbars - Archive of obsolete content
related topics xul, themes, developing mozilla ...
Adding more elements - Archive of obsolete content
a groupbox has the advantage that it draws a box with a nice beveled look, suitable for the current theme.
Element Positioning - Archive of obsolete content
it is not very portable and may not fit in with some themes.
Features of a Window - Archive of obsolete content
you should also consider that a user might be using a different theme or locale.
Progress Meters - Archive of obsolete content
the progress meter will have an animation such as a spinning barber pole or a sliding box, depending on the platform and theme used.
Scrolling Menus - Archive of obsolete content
note that the exact behavior of the scrolling will depend on the current theme.
Tabboxes - Archive of obsolete content
however, you should probably leave the tabs on top, otherwise they might not look very good under particular themes.
button - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
caption - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
checkbox - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
description - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
dialogheader - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
listcell - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
menuitem - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
menulist - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
menuseparator - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
radio - Archive of obsolete content
ArchiveMozillaXULradio
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
separator - Archive of obsolete content
these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
splitter - Archive of obsolete content
these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
textbox - Archive of obsolete content
these classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
toolbarbutton - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
toolbargrippy - Archive of obsolete content
this element is used internally by the toolbar and should only be used directly when modifying its theme.
toolbarseparator - Archive of obsolete content
it is functionally equivalent to a normal separator but some themes may apply a different appearance.
tooltip - Archive of obsolete content
depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped.
wizard - Archive of obsolete content
the wizard will rendered in a manner suitable for the user's selected theme and platform.
XUL Application Packaging - Archive of obsolete content
optional - default is 0 note: this option does not add menu items that make the extension/theme manager available in the ui; that is the responsibility of the application author.
Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
binding tab bar to new theme discussion about how to bind a new theme to a tab bar without losing its original binding.
Mozilla.dev.apps.firefox-2006-10-06 - Archive of obsolete content
discussions firefox trunk and rc1 slowdown using tabs discussion regarding certain theme components (specifically alpha-transparency) creating a high cpu load on os/2.
2006-09-29 - Archive of obsolete content
binding tab bar to new theme discussion about how to bind a new theme to a tab bar without losing its original binding.
2006-10-06 - Archive of obsolete content
discussions firefox trunk and rc1 slowdown using tabs discussion regarding certain theme components (specifically alpha-transparency) creating a high cpu load on os/2.
2006-10-13 - Archive of obsolete content
it's suggested that its a os problem in the desktop theme, as opposed to problem with firefox.
2006-10-20 - Archive of obsolete content
if your theme is chosen you will be placed on the hall of fame and will receive a gift from mozilla.
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
bundle structure toolkit bundles can be used for all add-ons including extensions, themes and plugins.
Creating a Skin for Firefox - Archive of obsolete content
contents getting started original document information author(s): neil marshall and tucker lee other contributors: brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch, anders conbere, tim regula (http://www.igraphics.nn.cx) copyright information: copyright 2002-2003 neil marshall, permission given to mdc to migrate into the wiki april 2005 via email.
:-moz-system-metric(images-in-menus) - Archive of obsolete content
this selector is intended for use mainly by theme developers.
:-moz-system-metric(scrollbar-end-backward) - Archive of obsolete content
this selector is intended for use mainly by theme developers.
:-moz-system-metric(scrollbar-end-forward) - Archive of obsolete content
this selector is intended for use mainly by theme developers.
:-moz-system-metric(scrollbar-start-backward) - Archive of obsolete content
this selector is intended for use mainly by theme developers.
:-moz-system-metric(scrollbar-start-forward) - Archive of obsolete content
this selector is intended for use mainly by theme developers.
:-moz-system-metric(scrollbar-thumb-proportional) - Archive of obsolete content
this selector is intended for use mainly by theme developers.
-moz-windows-classic - Archive of obsolete content
syntax <integer> if the user is using windows unthemed (in classic mode instead of using uxtheme), this is 1.
-moz-windows-glass - Archive of obsolete content
syntax <integer> if the user is using windows glass theme, this is 1; otherwise it's 0.
Community - Extensions
mozillazine extensions & themes forum #extdev channel on moznet irc network — extension development questions #addons channel on moznet irc network — questions about http://addons.mozilla.org mozdev project owners mailing list mozillazine knowledge base allyourideas — ideas for extensions ((really needs a unique captcha)) babelzilla — a community for developers and translators of extension for mozilla applications ...
Examples - Game development
qbqbqb a sci-fi themed arcade puzzle game.
Game promotion - Game development
plus competitions generally require games to follow a mandatory theme, so you can get creative around a theme if you are stuck for ideas.
Implementing controls using the Gamepad API - Game development
the theme for the competition was "change", so they submitted a game where you have to feed the hungry fridge by tapping the healthy food (apples, carrots, lettuces) and avoid the "bad" food (beer, burgers, pizza.) a countdown changes the type of food the fridge wants to eat every few seconds, so you have to be careful and act quickly.
Entity header - MDN Web Docs Glossary: Definitions of Web-related terms
an entity header is an http header that can be used in an http request or response, and describes the content of the body of themessage.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
134 entity header glossary, webmechanics an entity header is an http header that can be used in an http request or response, and describes the content of the body of themessage.
Mozilla Firefox - MDN Web Docs Glossary: Definitions of Web-related terms
first released in november 2004, firefox is completely customizable with themes, plug-ins, and add-ons.
TLD - MDN Web Docs Glossary: Definitions of Web-related terms
sponsored top-level domains (stld) these domains are proposed and sponsored by private organizations that decide whether an applicant is eligible to use the tld, based on community theme concepts.
HTML: A good basis for accessibility - Learn web development
— you'll keep seeing a common theme: the importance of using semantic html (sometimes called posh, or plain old semantic html).
HTML: A good basis for accessibility - Learn web development
— you'll keep seeing a common theme: the importance of using semantic html (sometimes called posh, or plain old semantic html).
Organizing your CSS - Learn web development
for example, look at the classes applied to this html from the page about bem naming conventions: <form class="form form--theme-xmas form--simple"> <input class="form__input" type="text" /> <input class="form__submit form__submit--disabled" type="submit" /> </form> the additional classes are similar to those used in the oocss example, however they use the strict naming conventions of bem.
Advanced form styling - Learn web development
you can use some of the built in themes, or create your own.
What will your website look like? - Learn web development
theme color to choose a color, go to the color picker and find a color you like.
Introduction to web APIs - Learn web development
different javascript apis work in slightly different ways, but generally, they have common features and similar themes to how they work.
Working with Svelte stores - Learn web development
for example, information about the logged in user, or whether the dark theme is selected or not.
Information for users
firefox accessibility skins and themes at the excellent access firefox website, you will find many valuable resources, including a list of firefox themes that have been specially designed for those with low vision: themes with high color constrast themes with big icons themes with extra large and bright icons themes with extra large and extra bold text join the mozilla accessibility community live chat both...
Software accessibility: Where are we today?
magnification enlarges the screen's contents: for those with low vision, it may suffice to use a larger font, a built-in high contrast theme, or even just an an extra large screen.
Add-ons
you’ll find: overview of the firefox extension features tools and processes for developing and testing how to publish your extension on addons.mozilla.org or distribute it yourself how to manage your published extension an enterprise guide for developing and using extensions how to develop themes for firefox firefox developer communities extensions for firefox for android in 2020, mozilla will release a new firefox for android experience.
mozbrowserloadend
can be used to make the theme of the surrounding ui complement the theme of the currently loaded content, for example.
mozbrowsermetachange
this can be viewmode, theme-color, theme-group, or application-name.
::-moz-tree-cell-text(hover)
this selector is intended for use mainly by theme developers.
::-moz-tree-row(hover)
this selector is intended for use mainly by theme developers.
Addon
operations my be restricted based on system policies (e.g., the system administrator may not allow certain add-ons to be uninstalled), add-on type (e.g., themes may not be disabled), or add-on state (e.g., an incompatible add-on cannot be enabled).
AddonManager
the existing add-on types are defined in xpiprovider.jsm and are, at this time, the following: extension, theme, locale, multipackage, dictionary and experiment.
AddonType
built-in values: value category 2000 locale 4000 extension 5000 theme 6000 plugin viewtype integer the type of ui to use to display this type of add-on in the ui.
Generating GUIDs
guids are used in mozilla programming for identifying several types of entities, including xpcom interfaces (this type of guids is callled iid), components (cid), and legacy add-ons—like extensions and themes—that were created prior to firefox 1.5.
nsIInstallLocation
toolkit/mozapps/extensions/public/nsiextensionmanager.idlscriptable interface representing a location where extensions, themes and so on are installed.
nsITreeBoxObject
void endupdatebatch(); clearstyleandimagecaches() called on a theme switch to flush out the tree's style and image caches.
nsIUpdateItem
constant gecko version description 1.8 1.8.1 1.9 1.9.1 1.9.2 type_app 0x01 type_extension 0x02 type_theme 0x04 type_locale 0x08 type_multi_xpi 0x20 type_addon type_extension + type_theme + type_locale + type_plugin type_extension + type_theme + type_locale type_any type_app + type_addon 0xff type_plugin 0x10 methods init() initializes the object.
XPCOM
here is how to make the same component in python using pyxpcom.fun with xbl and xpconnectgenerating guidsguids are used in mozilla programming for identifying several types of entities, including xpcom interfaces (this type of guids is callled iid), components (cid), and legacy add-ons—like extensions and themes—that were created prior to firefox 1.5.
DB Views (message lists)
properties these nsmsgdbview methods set properties, nsitreeview.getrowproperties (implementation) nsitreeview.getcellpropreties (implementation) theming the theme uses these properties to style the thread pane.
Building a Thunderbird extension 6: Adding JavaScript
depending on the installed theme the result will look something like this: modify xul elements with javascript save the following javascript code into the content/ folder next to your myhelloworld.xul file and name it overlay.js.
Thunderbird extensions
community / communications thunderbird specific : add-ons section on developer.thunderbird.net thunderbird communication channels add-on developers forum/mailing list #maildev irc channel more general : mozillazine extension development forum general developer channels related topics xul, javascript, xpcom, themes, developing mozilla categori ...
XPI
xpi modules (so called "bundles") are employed to install a wide variety of software, including plugins, extensions, themes, and thunderbird dictionaries.
Mozilla
xpi modules (so called " bundles") are employed to install a wide variety of software, including plugins, extensions, themes, and thunderbird dictionaries.
Introduction to DOM Inspector - Firefox Developer Tools
the rule that applies the search icon to the element uses a class simple selector and uses a list-style-image property to point to a file in the current theme.
Tips - Firefox Developer Tools
settings: choose between a light and a dark theme for the developer tools.
compareVersion - Web APIs
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
getVersion - Web APIs
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
installChrome - Web APIs
url url is a string containing a full or relative url to download name name is displayed in the dialog, but is also used to *select* the theme somust match exactly the name in the internal manifest.rdf file.
Window.open() - Web APIs
WebAPIWindowopen
an offset is universally implemented by browser manufacturers (it is 29 pixels in ie6 sp2 with the default theme) and its purpose is to help users to notice new windows opening.
Using the aria-labelledby attribute - Accessibility
al authority and accompanied by excommunication</dd> <dd role="definition" aria-labelledby="anathema">a vigorous denunciation : cursor</dd> <dt id="homily">homily</dt> <dd role="definition" aria-labelledby="homily">a usually short sermon</dd> <dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd> </dl> example 7: menus in the example below, a popup menu is associated with its label using the aria-labelledby attribute: <div role="menubar"> <div role="menuitem" aria-haspopup="true" id="filemenu">file</div> <div role="menu" aria-labelledby="filemenu"> <div role="menuitem">open</div> <div role="menuitem">save</div> <div role="menuitem">save as ...</div...
:-moz-broken - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers.
:-moz-handler-blocked - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers.
:-moz-handler-crashed - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers.
:-moz-handler-disabled - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers.
:-moz-loading - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers.
:-moz-locale-dir(ltr) - CSS: Cascading Style Sheets
note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale.
:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets
note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale.
:-moz-suppressed - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers.
:-moz-user-disabled - CSS: Cascading Style Sheets
note: this selector is mainly intended to be used by theme developers.
Color picker tool - CSS: Cascading Style Sheets
width: 80%; height: 80%; border: 2px dashed #fff; border-radius: 5px; background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; position: absolute; top: 10%; left: 10%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; transition: all 0.2s; } #delete[drag-state='enter'] { background-color: #999; } /** * color theme */ #color-theme { margin: 0 8px 0 0; border: 1px solid #eee; display: inline-block; float: right; } #color-theme .box { width: 80px; height: 92px; float: left; } /** * color info box */ #color-info { width: 360px; float: left; } #color-info .title { width: 100%; padding: 15px; font-size: 18px; text-align: center; background-image: url('https://mdn.mozillademos.org/files/6071/...
Shorthand properties - CSS: Cascading Style Sheets
the css specification defines shorthand properties to group the definition of common properties acting on the same theme.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
the appearance css property is used to display an element using platform-native styling, based on the operating system's theme.
overflow - CSS: Cascading Style Sheets
WebCSSoverflow
-moz-hidden-unscrollable intended mainly for internal use and by themes.
HTML5 - Developer guides
WebGuideHTMLHTML5
styling: letting authors write more sophisticated themes.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
appearance the appearance property enables the displaying of (almost) any element as a platform-native style based on the operating system's theme as well as the removal of any platform-native styling with the none value.
Standard metadata names - HTML: Hypertext Markup Language
WebHTMLElementmetaname
theme-color: indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
159 theme-color attribute, html, html document metadata, reference, metadata the theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface.
Using HTTP cookies - HTTP
WebHTTPCookies
cookies are mainly used for three purposes: session management logins, shopping carts, game scores, or anything else the server should remember personalization user preferences, themes, and other settings tracking recording and analyzing user behavior cookies were once used for general client-side storage.
Web app manifests
click each one for more information about it: background_colorcategoriesdescriptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "sizes": "72x72", "type":...
Performance fundamentals - Web Performance
text and images reflow automatically, ui elements automatically receive the system theme, and the system provides "built-in" support for some use cases developers may not think of initially, like different-resolution displays or right-to-left languages.
Progressive web app structure - Progressive web apps (PWAs)
view, the app shell is everything outside the content section: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header>...
Introduction to progressive web apps - Progressive web apps (PWAs)
the relevant web standard here is the web app manifest, which defines features of an app such as name, icon, splash screen, and theme colors in a json-formatted manifest file.
Structural overview of progressive web apps - Progressive web apps (PWAs)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header>...
SVG as an Image - SVG: Scalable Vector Graphics
platform-native widget styling (based on os theme) is disabled.