overLIB - Class-based CSS styling in overlib

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>overLIB - Class-based CSS styling in overlib</title> <script type="text/javascript" src="../plugins/overlib.js"></script> <script type="text/javascript" src="../plugins/overlib_centerpopup.js"></script> <script type="text/javascript">  </style></head> <body text="#000000" bgcolor="#ddeeff"> <div id="overDiv" style="position: absolute; z-index: 1000; visibility: hidden;"></div> <table width="80%" cellpadding="5" align="center"> <tbody><tr> <td align="center" valign="middle" class="text14"> <b><span class="purple18">overlib</span> examples of class-based CSS styling</b> </td> </tr> <tr> <td align="center" valign="middle" class="text14"> <b><font color="red">Here's a <a href="javascript:void(0);" onmouseover="return overlib(myText,CAPTION,'Spice Up Your Popups', STICKY,CENTERPOPUP,AUTOSTATUSCAP);" onmouseout="return nd();">styling</a> tip.</font></b> </td> </tr> <tr> <td class="text12"> The primary objective of this class-based CSS styling example is to have a 4px dashed green for the popup and a 4 px dashed green between the "caption and Close link" area and the "main text" area. Additional styling objectives are a purple background with bold white text for the "caption and Close link" area, and a yellow background with navy text in the "main text" area. Also, the Close link should change to purple letters with a white background on hover. <br><br> </td> </tr> </tbody></table> <table width="80%" align="center" cellspacing="0" cellpadding="0" border="0"> <tbody><tr> <td class="text12" align="center"> These examples use <a href="http://www.bosrup.com/web/overlib">overlib and the CSSW3C Plugin</a> and its commands <br><br> <em>The</em> markup <em>for these examples these examples are shown below.</em> <br><br><br> </td> </tr> </tbody></table>

Using overlib and CSSW3C Plugin

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>overLIB - Class-based CSS styling in overlib</title>
<script type="text/javascript" src="../plugins/overlib.js"></script>
<script type="text/javascript" src="../plugins/overlib_centerpopup.js"></script>
<script type="text/javascript" src="../plugins/overlib_cssw3c.js"></script>
<script type="text/javascript">
<!--
overlib_pagedefaults(
 BGCLASS,'olbgdash', BORDER, 1, CLOSETITLE,'Click to Close',
 CAPTIONFONTCLASS,'olcap', 
 CLOSEFONTCLASS,'olclo', CLOSECLICK,
 FGCLASS,'olfg', TEXTFONTCLASS,'oltxt',
 WRAP);

myText=
  'You might try to spice up your<br>'
 +'popups a wee bit by using<br>'
 +'class-based CSS.  See the<br>'
 +'Command Reference for<br>'
 +'the CSS styling commands.';
// -->
</script>
<style type="text/css">
<!--
.oltxt {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: .9em; 
	color: navy;
	background-color: #ffffaa;
	padding: .5em 1em .5em 1em; 
}
.olclo, .olcap {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: .8em; 
	font-weight: bold; 
	color: white;
	background-color: #c030c0; 
	border-bottom: 4px dashed #00dd00;
	padding: .3em .4em .3em 1em;
}
.oldiv {
	border: 4px dashed #00dd00;
	background-color: #c030c0;
}

.olbgdash {
 border: 4px dashed #00dd00;
}
.olclo a:link {color: white;}
.olclo a:hover {color: #c030c0; background-color: white;}
.olfg {background-color: #ffffaa;}


a {color:#338855;font-weight:bold;}
a:hover {color:#c030c0}
.text12 {font-family:Verdana,Arial,sans-serif; font-size:12px;}
.txtb12 {font-family:Verdana,Arial,sans-serif; font-size:12px;font-weight:bold;}
.text14 {font-family:Verdana,Arial,sans-serif; font-size:14px;}
.myText {font-family:Verdana,Arial,Helvetica,sans-serif;font-size:13px;color:#000000;}
.snip {font-family:Verdana,Arial,Helvetica;font-size:10px;}
.purple14 {font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;color:purple;
 font-weight:bold;}
.purple18 {font-family:Verdana,Arial,Helvetica,sans-serif;font-size:18px;color:purple;
 font-weight:bold;font-style:italic;}
.comic20 {font-family:'Comic Sans MS';font-size:20px;}
-->
</style>
</head>

<body text="#000000" bgcolor="#ddeeff">

<div id="overDiv" style="position: absolute; z-index: 1000; visibility: hidden;"></div> 

<table width="80%" cellpadding="5" align="center"> 
 <tbody><tr>
  <td align="center" valign="middle" class="text14">
   <b><span class="purple18">overlib</span>
   examples of class-based CSS styling</b>
  </td>
 </tr>
 <tr> 
  <td align="center" valign="middle" class="text14">
   <b><font color="red">Here's a <a href="javascript:void(0);" 
    onmouseover="return overlib(myText,CAPTION,'Spice Up Your Popups',
    STICKY,CENTERPOPUP,AUTOSTATUSCAP);" onmouseout="return nd();">styling</a>
    tip.</font><br><br><br><font color="red">this one uses the <a href="javascript:void(0);" 
    onmouseover="return overlib(myText,CSSW3C,DIVCLASS,'oldiv', BODYCLASS,'oltxt',
    CAPTIONCLASS,'olcap',CLOSECLASS,'olclo',CAPTION,'Spice Up Your Popups',
    STICKY,CENTERPOPUP,AUTOSTATUSCAP);" onmouseout="return nd();">CSSW3C Plugin</a></font></b>
  </td>
 </tr>
 <tr>
  <td class="text12">
   The primary objective of this class-based CSS styling example is to have a 4px dashed
   green for the popup and a 4 px dashed green between the "caption and Close link"
   area and the "main text" area.  Additional styling objectives are a purple
   background with bold white text for the "caption and Close link" area, and a yellow
   background with navy text in the "main text" area.  Also, the Close link should
   change to purple letters with a white background on hover.
   <br><br>
  </td>
 </tr>
</tbody></table>

<table width="80%" align="center" cellspacing="0" cellpadding="0" border="0"> 
 <tbody><tr>
  <td class="text12" align="center">
   These examples use <a href="http://www.bosrup.com/web/overlib">overlib and the 
  CSSW3C Plugin</a> and its commands
   <br><br>
   <em>The</em> markup <em>for these examples these examples are shown below.</em>
   <br><br><br>
  </td>
 </tr>
</tbody></table>
</body></html>