Themes: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(→‎Lightweight theme: updated some outdated info and made some other changes)
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
==What is a theme?==
==What is a theme?==
A theme is a visual design or style for the application. Each application (Firefox, Thunderbird, or Mozilla Suite) comes with a default theme, but you can also choose from a variety of other themes available to find one (or more!) that suits your own personal tastes. By changing themes, you can get a new color scheme, a different set of icons, and a whole new look and feel to the application.
A theme is a visual design or style for the application. Each application (Firefox, Thunderbird, or Mozilla Suite) comes with a default theme, but you can also choose from a variety of other themes available to find one (or more!) that suits your own personal tastes. By changing themes, you can get a new color scheme, a different set of icons, and a whole new look and feel to the application.
==Lightweight theme==
Firefox 3.6 and later versions have native support for lightweight themes [http://mozillalinks.org/wp/2009/09/firefox-3-6-gets-lightweight-themes-personas/ <!-- Firefox 3.6 gets lightweight themes (Personas) - Mozilla Links -->].
Such themes allow to make changes to the default theme and do not replace that theme completely like regular themes do.
Personas are an example of such a lightweight theme and this implies that you can't use ''personas'' with a custom theme.
Personas add a background image (skin) to the user interface part of Firefox (toolbars and Add-ons bar [https://bugzilla.mozilla.org/show_bug.cgi?id=541206 <!-- Bug 541206 – status bar's background doesn't get set, using Lightweight Themes / Personas with "Windows Classic" window-style -->]) that can be changed without restarting Firefox. Normal themes require a restart to take effect.
In Firefox 3 versions prior to Firefox 3.6 you can use the [https://addons.mozilla.org/en-US/firefox/addon/10900 Personas] extension to add support for ''personas''.
If you visit a website like ''www.getpersonas.com'' that offers ''personas'' then you can hover an example image to get a preview impression of how it looks like. That preview times out after 30 seconds<!-- MAX_PREVIEW_SECONDS = 30; resource:///modules/LightweightThemeManager.jsm http://mxr.mozilla.org/mozilla-central/source/toolkit/mozapps/extensions/LightweightThemeManager.jsm#28 -->. Preview only works if you use the default theme <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=520124 Bug 520124 – Allow applying a persona on top of any custom theme --> and only on websites that are whitelisted as an allow exception in ''"[[Menu_differences|Tools -> Options]] -> Security > Warn me when sites try to install add-ons: Exceptions"''. If a website is not whitelisted then you won't get a preview, but you can still install a ''persona'' if you click the ''Allow'' button on the sliding bar at the top that Firefox shows to ask for permission.  If you do not want a preview then remove that website from the exception list. You can reset some prefs on the [[about:config]] page to restore the default software exceptions for installing extensions and personas: ''xpinstall.whitelist.add''  (addons.mozilla.org) and ''xpinstall.whitelist.add.36'' (getpersonas.com). You can manage ''personas'' like other themes via ''"Tools > Add-ons -> Themes"''. There is currently a limitation of 30 ''personas'' as a maximum<!-- DEFAULT_MAX_USED_THEMES_COUNT = 30;--> (see this chrome URI for details: ''resource:///modules/LightweightThemeManager.jsm''). Bug 520482  [https://bugzilla.mozilla.org/show_bug.cgi?id=520482 <!-- Bug 520482 - Firefox doesn't remember more then 8 lightweight themes -->] has added support for an Integer pref ''lightweightThemes.maxUsedThemes'' to change this maximum. This pref doesn't exist by default, so you need to create a new Integer pref via the right-click context menu if you want to change this maximum.  If you exceed this maximum then the oldest is removed without warning from ''"Tools > Add-ons -> Themes"'' in favor of that new persona. There is a pref ''lightweightThemes.update.enabled'' (default is true) to control updating of ''personas'' [http://kb.mozillazine.org/about%3Aconfig]. Personas are stored in the browser cache and if the cache is cleared then you can't switch the ''persona'' if you are offline (you can, but it will look weird). The currently selected persona is also stored in the [[Profile_folder_-_Firefox|Firefox Profile Folder]]. All personas data is stored in the pref ''lightweightThemes.usedThemes'' in [[prefs.js]] in the profile folder and you can backup that pref to a file or copy that pref to [[user.js]] if you want to initialize a new profile. Don't leave it in user.js or you won't be able to add new personas because user.js is read on every start of Firefox and you lose personas added in the previous browser session.


==Sources for themes==
==Sources for themes==
Line 15: Line 23:
'''Firefox'''
'''Firefox'''
* When you find a theme that you want to install, click on the "Install" or "Install Now" link.
* When you find a theme that you want to install, click on the "Install" or "Install Now" link.
* Alternatively, save the theme to your computer and install using [http://www.pryan.org/mozilla/site/TheOneKEA/themer/ this extension].
* Alternatively, save the theme to your computer and install using [http://www.pryan.org/mozilla/site/TheOneKEA/themer/ this extension] or you can drag the saved .jar file in the left pane of the "Tools -> Add-ons -> Themes" window.


'''Thunderbird'''
'''Thunderbird'''
Line 53: Line 61:
==Other information==
==Other information==


* Customizing the application's appearance: [[UserChrome.css|userChrome.css]] and [[UserContent.css|userContent.css]]
* [[Theme development]]
* [[Theme development]]


[[Category:Visual customizations (Firefox)]] [[Category:Visual customizations (Thunderbird)]]
[[Category:Visual customizations (Firefox)]] [[Category:Visual customizations (Thunderbird)]]

Revision as of 17:35, 24 December 2012

What is a theme?

A theme is a visual design or style for the application. Each application (Firefox, Thunderbird, or Mozilla Suite) comes with a default theme, but you can also choose from a variety of other themes available to find one (or more!) that suits your own personal tastes. By changing themes, you can get a new color scheme, a different set of icons, and a whole new look and feel to the application.

Lightweight theme

Firefox 3.6 and later versions have native support for lightweight themes [1]. Such themes allow to make changes to the default theme and do not replace that theme completely like regular themes do. Personas are an example of such a lightweight theme and this implies that you can't use personas with a custom theme. Personas add a background image (skin) to the user interface part of Firefox (toolbars and Add-ons bar [2]) that can be changed without restarting Firefox. Normal themes require a restart to take effect. In Firefox 3 versions prior to Firefox 3.6 you can use the Personas extension to add support for personas. If you visit a website like www.getpersonas.com that offers personas then you can hover an example image to get a preview impression of how it looks like. That preview times out after 30 seconds. Preview only works if you use the default theme and only on websites that are whitelisted as an allow exception in "Tools -> Options -> Security > Warn me when sites try to install add-ons: Exceptions". If a website is not whitelisted then you won't get a preview, but you can still install a persona if you click the Allow button on the sliding bar at the top that Firefox shows to ask for permission. If you do not want a preview then remove that website from the exception list. You can reset some prefs on the about:config page to restore the default software exceptions for installing extensions and personas: xpinstall.whitelist.add (addons.mozilla.org) and xpinstall.whitelist.add.36 (getpersonas.com). You can manage personas like other themes via "Tools > Add-ons -> Themes". There is currently a limitation of 30 personas as a maximum (see this chrome URI for details: resource:///modules/LightweightThemeManager.jsm). Bug 520482 [3] has added support for an Integer pref lightweightThemes.maxUsedThemes to change this maximum. This pref doesn't exist by default, so you need to create a new Integer pref via the right-click context menu if you want to change this maximum. If you exceed this maximum then the oldest is removed without warning from "Tools > Add-ons -> Themes" in favor of that new persona. There is a pref lightweightThemes.update.enabled (default is true) to control updating of personas [4]. Personas are stored in the browser cache and if the cache is cleared then you can't switch the persona if you are offline (you can, but it will look weird). The currently selected persona is also stored in the Firefox Profile Folder. All personas data is stored in the pref lightweightThemes.usedThemes in prefs.js in the profile folder and you can backup that pref to a file or copy that pref to user.js if you want to initialize a new profile. Don't leave it in user.js or you won't be able to add new personas because user.js is read on every start of Firefox and you lose personas added in the previous browser session.

Sources for themes

Unless otherwise noted, each site has themes for Firefox, Thunderbird, and the Mozilla Suite.

Installing themes

After you've installed a theme, as described below, you must exit and restart the application before it can be used.

Firefox

  • When you find a theme that you want to install, click on the "Install" or "Install Now" link.
  • Alternatively, save the theme to your computer and install using this extension or you can drag the saved .jar file in the left pane of the "Tools -> Add-ons -> Themes" window.

Thunderbird

  • After finding a theme that you want to install, first save it to your computer (right-click on the download link and choose "Save Link As...") in a convenient location. Then in Thunderbird go to the Thunderbird 'Tools' menu, select 'Add-ons' and then the 'Themes' button in the Add-ons window (in TB1.5 and earlier, just select 'Themes' straight from the Thunderbird 'Tools' Menu). Next press the 'Install' button in the Thunderbird Add-ons/Themes window and then browse to the theme that you just downloaded. Highlight it and click "OK".

Mozilla Suite

  • When you find a theme that you want to install, click on the "Install" link.

Switching themes

To switch among your installed themes, use the application's built-in interface. After selecting a new theme to use, you will need to restart the application to see it.

Firefox & Thunderbird

  • 'Go to "Tools -> Themes", select the theme you want to use, and click the "Use Theme" button.'

Firefox 2.0 and Thunderbird 2.0

  • Go to "Tools -> Add-ons", select the 'Theme' section and then select the theme you want to use, and click the "Use Theme" button.'

Mozilla Suite

  • Go to "Edit -> Preferences -> Appearance -> Themes", select the theme you want to use, and click the "OK" button.

Uninstalling themes

The best way to uninstall a theme is through the application's built-in interface.

Firefox & Thunderbird

  • Go to "Tools -> Themes", select the theme you want to uninstall, and click the "Uninstall" button.

Firefox 2.0 and Thunderbird 2.0

  • Go to "Tools -> Addons", select the 'Theme' section and then select the theme you want to uninstall, and click the "Uninstall" button.

Mozilla Suite

  • Go to "Edit -> Preferences -> Appearance -> Themes", select the theme you want to uninstall, and click the "OK" button. Note that you cannot uninstall the two pre-installed themes ("Classic" and "Modern") or the theme that you are currently using.

Troubleshooting

Other information