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

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

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("http://www.mozilla.org/keymaster/gatekeeper/th 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

Since the skin subdirectory in your xFly package is already registered, you can create a new CSS file called xfly.css, save it in the skins

subdirectory, and load it from your xfly.xul file by adding the following stylesheet loading instruction at the top:

<?xml-stylesheet href="chrome://xfly/skin"

type="text/css" ?>

You will recall that the chrome pointer in the href resolves to a file named xfly.css (named after the directory) in the following registered directory

in the chrome:

chrome/xfly/skin/

This CSS file will be the worksheet for all CSS for the xFly application Any style rules you add here and associated with XUL elements in the xFly XUL code will affect the layout and presentation of that code on restart

4.4.1 Importing the Global Skin

As you create a new skin for your application, the first step is to make sure that the application imports the global skin in which the most basic look and feel of the XUL widgets is defined Even if you create a skin that looks completely different than the skins installed with Mozilla, you should import the global skin to avoid having to recreate so much of the basic presentation and behavior of the XUL widgets

As much as possible, the global skin avoids providing theme-specific styles, and instead provides just enough information to make buttons, for example, look like buttons and menu items look like menu items Increasingly, basic styles are also being defined in the XBL bindings for widgets For instance, when you use a toolbar widget, you use a binding in which certain

intrinsic looks and behaviors are defined in a way that's transparent to you and to the user of the application The style for these bindings is located in the content subdirectories with the binding XML files In this way, they

"stay with" the widget and not with the selected skin You can easily extend

or overwrite any of the style information you pick up from the global skin, but loading the skin is a good place to start

To do this, verify that you have the following line at the top of the

xfly.xul file:

<?xml-stylesheet href="chrome://global/skin"

type="text/css" ?>

If you do not have this line, add it now to the xfly.xul file and restart Mozilla You ought to see a plain, UI-like collection of widgets in the XUL window In the screenshots in Figure 4-8, you can see how loading the global skin affects the XUL file

Figure 4-8 Stylesheet additions to a XUL file

The first screenshot in Figure 4-8 shows a XUL file loaded in Mozilla with

no skin information The second is the same XUL file with the global skin loading instruction at the top The third is a screenshot of that XUL file with

an instruction for loading your own stylesheet, which in turn imports the global skin:

<?xml-stylesheet

href="chrome://xfly/skin/sample.css"

type="text/css" ?>

The CSS information in the skin file sample.css loaded above looks like this:

@import url(chrome://global/skin/)

box#bbox { background-color: lightgrey; }

button#rd { background-color: red; color: white; } Taking advantage of the modularity of Mozilla skins, you can design a decent interface (if the last screenshot above can count as that) with just a few lines of code

Once you import the global skin and see what it buys you in terms of look and feel, you can begin to create your own skin for the xFly, overriding global styles where appropriate, extending them by "cascading" new, more specific style rules for your widgets, or adding new styles

Before you begin to add styles to the xfly.css file, import it (as a blank skin) into xfly.xul so you can see your progress as you go Add the following line to the top of the xfly.xul file to import the xFly skin from the proper subdirectory of the xFly package:

<?xml-stylesheet href="chrome://xfly/skin"

type="text/css" ?>

You won't see anything extra when you quit and restart the application, but you now have the skin structure in place so you can see your work progress

4.4.2 Getting Started with Custom Styles

When you make a new skin, it's a good idea to define the most general styles for your application first As we described above, more specific CSS rules tend to inherit from more general ones For the xFly application, the most general aspects of the style are the rules that apply to the xFly windows themselves You can create styles for all windows using the element name, window, or you can define different classes for windows if your application supports them In the xfly.xul file, for example, the root <window> element has the attribute class="main", so it will pick up style rules given for window.main, as shown in Example 4-9

The xFly application has both a main window and pop-up windows, so you might create style rules like the ones that follow to establish the basic look

of the xFly application

Example 4-9 CSS rules for xFly window

window.main {

background-color: #cccccc;

display: block;

overflow: hidden;

font: small

arial,helvetica,sans-serif,tahoma;

padding: 0px;

}

window.popup{

background-color: #cccccc;

display: block;

overflow: hidden;

font: small

arial,helvetica,sans-serif,tahoma;

padding: 2px;

width: auto;

height: auto;

}

Now, with the two stylesheets (global.css and the xfly.css)

referenced at the top, you already have a window that is starting to look like

an application