Search completed in 2.01 seconds.
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
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 locales
theme changes in firefox 2
theme changes in firefox 3
theme changes in firefox 3.5
theme changes in firefox 4 ...
-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.
:-moz-lwtheme-brighttext
the :-moz-lw
theme-brighttext pseudo-class matches in chrome documents when :-moz-lw
theme is true and a lightweight
theme with a bright text color is selected.
:-moz-lwtheme-darktext
the :-moz-lw
theme-darktext pseudo-class matches in chrome documents when :-moz-lw
theme is true and a lightweight
theme with a dark text color is selected.
:-moz-lwtheme
the :-moz-lw
theme pseudo-class matches in chrome documents when the root element's lightweight
themes 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.
... register
theme(
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.systemusesdark
theme 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
176 lightweight
themes lightweight
themes, xul attributes, xul reference no summary!
... 177 lightweight
themesfooter 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
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.getmore
themesurl", "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 ...
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, lightweight
themes, lightweight
themesfooter, 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!!
... lightweight
themes type: boolean true if the window supports lightweight
themes, otherwise false.
... lightweight
themesfooter 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-lw
theme :-moz-lw
theme-brighttext :-moz-lw
theme-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.
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.
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@of
theme.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> ...
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.
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.
label - 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.
menu - 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.
...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 re
themed 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
it only works in chrome code, and only on mac os x.:-moz-lw
themethe :-moz-lw
theme pseudo-class matches in chrome documents when the root element's lightweight
themes attribute is true and a
theme is selected.:-moz-lw
theme-brighttextthe :-moz-lw
theme-brighttext pseudo-class matches in chrome documents when :-moz-lw
theme is true and a lightweight
theme with a bright text color is selected.:-moz-lw
theme-darktextthe :-moz-lw
theme-darktext pseudo-class matches in ch...
...rome documents when :-moz-lw
theme 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
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>?
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.
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/ ...
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.
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.
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?
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...
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.
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.
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.
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 ...
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.
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.
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.
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.
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
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...
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/...
HTML documentation index - HTML: Hypertext Markup Language
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
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_url
theme_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>...
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>...