Restyling the Document Assembly IFRAME
From PikaDocs
By Brian Lawlor & Mark Sawyer
Legal Services of Northern California (http://www.lsnc.net/)
The iframe element (http://www.w3.org/TR/REC-html40/present/frames.html#h-16.5) is a useful piece of structural markup that enables you to embed an inline frame document (http://www.cs.tut.fi/~jkorpela/html/iframe.html) into another HTML document. The iframe element is actually a subset (http://www.cs.tut.fi/~jkorpela/html/iframe.html#obj) of the object structural type, but arguably is easier and more reliably implemented.
In any event, overt (and some hidden) iframe elements are used at several locations with Pika, most notably at the Documents page tab within the case record. In Pika 3.05, the Document Assembly components of that page include an embedded "window" revealing a directory of available form documents:
Functional and serviceable, it is. But what if you want to spiff it up with a touch of CSS styling? The basic trick with iframe styling is to understand the structural relationship of the host document within which the iframe, i.e., "inline frame" structural tag, is itself embedded, and the other, second document object which the iframe element references. To understand the relationship of these two documents built into the Document Assembly display -- again, the host page document and the other, second document it refers to -- take a look at the two Pika subtemplates involved: case-docs.html and docgen_list.html.
The case-docs.html subtemplate provides the basic page elements for what you see as the Documents page tab. In the part of the page that contains the Document Assembly elements, if you strip out the markup to its essentials you'll see a form (http://www.htmldog.com/reference/htmltags/form/) element which contains a parapraph tag (http://www.htmldog.com/reference/htmltags/p/), which in turn is the container for the embedded iframe element:
<form action="%%[base_url]%%/ops/docgen.php" method="post" name="docgen">
<h2 class="hdt">Document Assembly</h2>
<p>
<iframe src="%%[base_url]%%/docgen_list.php" width="305" height="140"></iframe>
</p>
...
</form>
For purposes of this article, we won't go into details of the docgen.php file, other than to highlight that it is the mechanism for identifying and pulling into the host page the other, second document: docgen_list.html. The docgen_list.html subtemplate itself is, literally, the simplest of HTML documents:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="MSTHEMECOMPATIBLE" content="no">
<title>Pika: %%[title]%%</title>
<link href="%%[base_url]%%/css/danio.css" rel="stylesheet" type="text/css">
<style type="text/css">
blockquote {
margin-left: 1em;
margin-right: 0em;
margin-top: 0em;
}
body {
text-align: left;
background-color: white;
</style>
</head>
<body>
%%[content]%%
</body>
</html>
Essentially, what you have here is a basic HTML document with a header that conforms to the Pika design default, an embedded style tag (http://www.htmldog.com/reference/htmltags/style/) to provide basic margins and text-alignment for the body and blockquote (http://www.htmldog.com/reference/htmltags/blockquote/) tags, and in the "body," a simple field reference to the page "content." It doesn't get much simpler than that, folks.
To illustrate a few ideas for creating some solid hooks for changing the appearance of the embedded iframe, we'll show what we did for the Project Claire design (http://www.openpika.org/claire/).
First, we rebuilt the docgen_list.html by conforming the header to the one used in our default.html template (including a conditional comment (http://www.openpika.org/archives/2005/11/more_re_conditi.html) to reference our ie_hacks.css style sheet), removing all the embedded style elements, and adding a simple hook for styling the docgen_list.html page as a whole by giving the body tag (http://www.htmldog.com/reference/htmltags/body) an id attribute named, simply enough, "docgen-list". (Go figure.):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <meta http-equiv="MSTHEMECOMPATIBLE" content="no"/> <title>Pika: %%[page_title]%%</title> <link rel="stylesheet" type="text/css" href="%%[base_url]%%/css/danio.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="%%[base_url]%%/css/ie_hacks.css" /> <![endif]--> <link rel="stylesheet" type="text/css" media="print" href="%%[base_url]%%/css/print.css"/> </head> <body id="docgen-list"> %%[content]%% </body> </html>
With that key hook in place, we then invoke the power of CSS and the proverbial "cascade" to do the heavy lifting, by adding the following CSS code to the danio.css stylesheet:
iframe {
border: 1px solid silver;
height: 240px;
margin-top: -2px;
width: 99%;
}
body#docgen-list {
background: #F5F9F5;
color: #666666;
font-size: 0.70em;
font-weight: bold;
padding: 4px;
}
#docgen-list img {
margin-right: 2px;
vertical-align: middle;
}
#docgen-list blockquote {
margin: 0;
margin-left: 20px;
}
#docgen-list a {
font-weight: bold;
}
With this new styling in place, the Document Assembly embedded iframe window looks like this:
(You may notice a few design elements that look a touch different that are not CSS-related. For example, we substituted a different folder icon image to bring it up to date with the overall design.)
Here's a breakdown of the CSS design logic:
The iframe CSS is used to redefine the dimensions and position of the inline frame element in the case-docs.html subtemplate, i.e., the Documents page tab, and then gives the iframe a thin, 1px silver border.
The body#docgen-list CSS, which targets the body tag in the docgen_list.html subtemplate, is what gives the iframe display its general, overall appearance: background color, font size, and so on.
The #docgen-list img CSS is used to tweak the position of the folder icon displayed within the iframe window.
The #docgen-list blockquote CSS, similarly, is used to tweak the margins of the folder and file names embedded within the blockquote element. (The Pika default here is very old school and entirely non-semantic, but nonetheless it works. You can make changes to the docgen.php code to substitute a different structual element for the blockquote tags.)
The #docgen-list a CSS is just a switch to change the linked file names to bold.
Of course you can target any of these same elements with other CSS styles that better suit the Pika defaults or your own customizations. As we always like to say, de gustibus (http://www.bartleby.com/59/3/degustibusno.html), dude!
