This command reference lists the
commands you can use to style coolTip totally through
CSS Styling rules. Because the support of Netscape 4.x
for CSS is incomplete this type of
styling is explicitly disabled if you're using
that browser. However, you still get a normal popup. To
make use of these commands, you need to insert the following
lines in your HEAD section.
<SCRIPT TYPE="text/javascript" SRC="cCore.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" SRC="cCssw3c.js"></SCRIPT>
This type of styling is very similar to CSSCLASS styling
but offers much more flexibility because
of where the custom class tags are placed in the table
that makes up the coolTip. To obtain popups
that look like regular popups you generally need to specify
all of the pertinent classes described below. It is recommended
that you use the ctPageDefaults routine
contained in the core module to configure these parameters
for the majority of the popups on your page which employ
this styling and then just over-ride those parameters that
you want to change on the individual calls to coolTip.
When you apply this type of styling to a coolTip, it
uses a much simpler structure than a normal coolTip.
A schematic of this structure is shown in the figure below.
Just a single table holds the popup's
content. This table contains one or two rows, depending
on whether there is a caption. If there is a caption and
some sort of close text, this first row is divided into
two cells. Each of the cells in the above table have custom
classes applied to them that are used to control the look
in that cell (including text placement and background color).
There isn't an outer table around this inner-most table
to provide the border around a popup because that is now
achieved by applying style rules directly to the ctDiv container
itself. Although almost any type of style rule can be applied
to the ctDiv container, I envision that it will
contain a background color and a border style of some sort
and not much else. If you don't apply any background color
to the inner-most table cells, the background color of
the DIV container will show through. I took this approach
because under CSS there are many more border styles than
just a plain solid border, such as dashed, dotted, double, groove, inset, outset,
and ridge, which newer CSS compliant browsers
should support and which could never be achieved with the
nested table structure of a normal popup.
Examples of this flexibility are demonstrated below when
describing the different CSSW3C commands and employ these
style rules in the HEAD section:
<STYLE TYPE="text/css">
<!--
.pictureframe {border: 4px inset #999999;}
.ctDiv {
border: 4px #CCCCCC dashed;
background-color: #FFFFCC;
}
.bodyText {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: black;
font-style: normal;
text-decoration: line-through;
text-align: center;
padding: 10px 20px 10px;
font-size: 11px;
}
.captionText {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFCC;
background-color: navy;
font-style: italic;
text-align: center;
padding: 5px;
}
.closeText {
font-family: Arial, Helvetica, sans-serif;
background-color: navy;
font-style: italic;
text-align: right;
font-size: 9px;
vertical-align: top;
padding: 5px;
}
.closeText A {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
font-style: normal;
}
.closeText A:hover {text-decoration: underline; }
-->
</STYLE>
Remember that commands are always in uppercase (case-sensitive)
and can have none or more parameter values.
Download this
module as a zip file.
|
