Introduction
This command reference lists the commands you can use to style overLIB popups totally through CSS Styling rules. Because CSS support in Netscape 4.x is not complete, 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="overlib.js"></SCRIPT> <SCRIPT TYPE="text/javascript" SRC="overlib_cssw3c.js"> </SCRIPT>
This type of styling is very similar to CSSCLASS styling but probably offers much more flexibility because of where the custom class tags are placed in the table that makes up the popup. It recommended that you use the overlib_pagedefaults 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 individual calls to overLIB.
When you apply this type of styling to a popup, it uses a much simpler structure than a normal overLIB popup. 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 overDiv container itself. Although almost any type of style rule can be applied to the overDiv container, it will normally be 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. This approach taken here 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 the 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; } .ovDiv { border: 4px #CCCCCC dashed; background-color: #FFFFFF; line-height: normal; } .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: #B6A29B; font-style: italic; text-align: center; padding: 5px; } .closeText { font-family: Arial, Helvetica, sans-serif; background-color: #B6A29B; font-style: italic; text-align: right; font-size: 9px; vertical-align: top; color: #ffffff; 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 command values.
Download this module as a zip file.
Commands
- CSSW3C
- Style popups according to CSS Style rules contained in custom classes.
Default value is off (0). When used on the command line it sets the value
of o3_css to CSSW3C, except if the browser is Netscape 4.x in which case
it is set to CSSOFF.
Variable: ol_cssw3c - DIVCLASS example
- A string value which gives the name of the custom class that is to used
for styling the overDiv container. Default value is the null string
(''). If DIVCLASS is empty (i.e.,
a null string), then a styling is applied which gives it a similar look
of a normal overLIB popup. However, you'll may have to adjust your CAPTIONCLASS
and CLOSECLASS settings. See the USESTD parameter below.
Variable: ol_divclass - BODYCLASS example
- A string value which gives the name of the custom class that applies style
rules to the main overLIB body text. Default value is the null string ('').
Variable: ol_bodyclass - CAPTIONCLASS example
- A string value which is the name of a custom class that applies style
rules to the caption region of an overLIB popup. Default value is a null
string ('').
Variable: ol_captionclass - CLOSECLASS example
- A string value which is the name of a custom class that applies style
rules to any close text that the popup has. Default value is a null string
('').
Variable: ol_closeclass - USEDIVCLS example
- This parameter indicates that a normal popup should apply the style rules
given by DIVCLASS if it's not empty. When used on the command line,
it switches the current value of the associated default variable to its
opposite state. Default value is off (0).
Variable: ol_usedivcls - USESTD example
- A parameter which allows you to suppress the normal look of a popup if
you so desire. Default value is on (1). When used on the command line, it
switches the current state of this variable to its opposite state.
Variable: ol_usestd
