Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P4

Chapter 4. CSS in Mozilla Applications-P4

4.3.4.3. The communicator skin
Like global.css, the communicator.css file (Example 4-8
) is
another CSS file that does imports to build up the communicator skin. The
CSS style rules in the file itself are minimal, but if you look at the top, you
can see that many styles that the communicator component uses come from
the CSS files also located in the communicator subdirectory of the
current skin.
Example 4-8. CSS information from communicator.css
/* ==== communicator.css
===================================================
=
== Styles shared everywhere throughout the
Communicator suite.

===================================================
======================= */
@import url("chrome://global/skin/");
@import
url("chrome://communicator/content/communicator.css
");
@import
url("chrome://communicator/skin/brand.css");
@import
url("chrome://communicator/skin/button.css");
@import
url("chrome://communicator/skin/formatting.css");

@namespace

url(" />ere.is.only.xul");

/* ::::: online/offline icons ::::: */

#offline-status[offline="true"] {
list-style-image:
url("chrome://communicator/skin/icons/offline.gif")
;
}

#offline-status {
list-style-image:
url("chrome://communicator/skin/icons/online.gif");
}

/* ::::: directional button icons ::::: */

.up {
min-width: 0px;
list-style-image:
url("chrome://global/skin/arrow/arrow-up.gif");
}

.up[disabled="true"] {
list-style-image:
url("chrome://global/skin/arrow/arrow-up-dis.gif");
}

.down {
min-width: 0px;

list-style-image:
url("chrome://global/skin/arrow/arrow-dn.gif");
}

.down[disabled="true"] {
list-style-image:
url("chrome://global/skin/arrow/arrow-dn-dis.gif");
}

.up {
list-style-
image:url("chrome://global/skin/scroll-up.gif");
min-width: 0px;
}
.up[disabled="true"] {
list-style-
image:url("chrome://global/skin/scroll-up-
disabled.gif");
}
.down {
min-width: 0px;
list-style-
image:url("chrome://global/skin/scroll-down.gif");
}
.down[disabled="true"] {
list-style-
image:url("chrome://global/skin/scroll-down-
disabled.gif");
}
.sidebarTree {

border: none;
margin: 0px !important;
}
/* ::::: download manager ::::: */
#downloadView > treechildren:-moz-tree-image(Name)
{
margin-right: 2px;
}
Notes
[1]

There are just a couple of exceptions to this rule. The content
directory of a package (typically the place where just the XUL and JS
are stored) sometimes holds a file called xul.css. This file defines
style information that is so fundamental to the way widgets are rendered
-- more fundamental, even, then global.css and its siblings -- that it
is set apart from the regular skin and put in with the content, where it is
loaded automatically. It's not a good idea to edit this file.
4.4. Creating New Skins
You have already created the highest level of the directory structure you will
need to create a skin for the xFly application (See "Creating the Hello xFly
Package" in Chapter 2
). So far, you have created three subdirectories
corresponding to different parts of the package and you have added XUL to
the xfly/content subdirectory. In the xfly/skin subdirectory, you
will tell the xFly content where to expect to find its skin resources. As just
mentioned, Mozilla applications outside of the browser itself typically
restrict their skin to a single subdirectory and their skin manifest to a single
RDF/XML file.