Mozile (xhtml editing in your browser)    


Welcome to Mozile, the WYSIWYG XHTML editor for Mozilla! This document describes the skin files for Mozile. This is one of the simple parts...


  1. Mozile Documentation - A General Introduction to Mozile
  2. Mozile Development - Notes on the Development of Mozile
  3. Mozile Content - Notes on the Code behind Mozile
  4. Mozile Locale - Notes on the Localization of Mozile
  5. Mozile Skin - Notes on the Styling of Mozile


  1. Mozile CSS
  2. Mozile Buttons

Mozile Skin

Mozile CSS

The mozile.css file is the Cascading Style Sheet (CSS) which styles the Mozile tool bar. There are two kinds of CSS selectors used, one for classes and one for insectionidual elements.


All Mozile tool bar buttons belong to one of two classes. Normal buttons belong to "mozile-toolbar-button", while menu buttons belong to "mozile-toolbar-menu". Normal buttons have two special attibutes which affect their style.

  • disabled is set "true" if the button should be greyed out. Right now only the Undo and Redo buttons makes use of this,
  • active is set to "true" when the cursor is within a selection to which a command has been applied. This only works for certain commands, but when a selection has the style "font-weight: bold;" the "bold" command is considered active, and so the button for "bold" will have the "active" attribute set to "true". Then CSS will change the style of the button to make it look like it has been pressed.

One other thing, the lines including ".toolbarbutton-text" and the "display: none;" CSS style are used to remove the text labels on the tool bar buttons. Under Firefox there is a "mode" setting for the <toolbar> element which can be set to show icons only. But under Mozilla there is no such option, and the Mozile tool bar won't fit more than a few buttons with their text labels on. So these styles remove the text labels from all buttons, which is the preferred behaviour. The method is not elegant, however.

Element by ID

Certain elements are singled out for special styling. These include "mozile-menu" and "mozile-command-menu". The default tool bar button style is overridden so that the text labels for these buttons are displayed.

There are several other CSS files which are used to style varous dialogs. These include:

Mozile Buttons

The buttons directory contains all of the buttons that Mozile uses in its default MES files. They are stored in PNG format for best compression and to allow transparency (alpha channel).

James A. Overton - - 2004-04-16

The mozile project can be contacted through the mailing list or the member list.
Copyright © 2000-2020. All rights reserved. Terms of Use & Privacy Policy.