[concurrency-interest] More FJ/PA examples and documentation needed (Tim Peierls)

Tim Peierls tim at peierls.net
Tue Jan 22 17:08:55 EST 2008


On Jan 22, 2008 4:59 PM, Gregg Wonderly <gregg at cytetech.com> wrote:

> Is it possible to set widths on the left and right sides, and allow the
> middle to be unconstrained to "fit" into the available space so that it can
> be as wide as someone has screen space to use?
>

Probably, but not by me with my limited skills and even more limited time.

I've appended two files below, the HTML template and the CSS. The template
parameters are surrounded by $, e.g., $headline$. Anyone who knows how to
make fluid layouts, please feel free to tweak these and send me the
modifications.

Here's the HTML template:

<!--
Customize the layout of an entire Wiki by editing this template.
This basic template displays the article headline, a small timestamp, and
the article body.
-->

<div class="center"><div id="idContainer">

    <div class='wikiSearch'>
        <table cellspacing='0' cellpadding='0' border='0'><tr><td>
            <label for='wikiSearchFor'>Search this wiki</label><br />
        </td></tr><tr><td>$search$</td></tr></table>
    </div>

    <h1>$headline$</h1>

    <div id="idMeta">
        <table cellpadding="0" cellspacing="0" border="0"
width="100%"><tr><td>
            <span class="color32">
            <i>$lastmodified$<br/>$subscribelink$</i>
            </span>
        </td><td align="right">
            $rsslink$
        </td></tr></table>
    </div>

    $body$

    <div id="idFooter">
        <table cellpadding="0" cellspacing="0" border="0"
width="100%"><tr><td>
            <span class="color32">
            <i>Home: <a href="$homeurl$">$homeheadline$</a></i>
            </span>
        </td><td align="right">
            <span class="color32">
            <i>What's new: <a href="$recenturl$">Recently changed
articles</a></i>
            </span>
        </td></tr><tr><td>
                        <span class="color32">
                        <i>Admin: <a href="mailto:tim at peierls.net">Tim
Peierls</a></i>
                        </span>
        </td></tr></table>
    </div>

</div></div>

And here's the CSS:

/* Customize the styles of an entire Wiki by editing this stylesheet. */

/* Font Families */
    span.Arial { font-family: Arial, Helvetica, sans-serif }
    span.Helvetica { font-family: Helvetica, Arial, sans-serif }
    span.ArialBlack { font-family: Arial Black, Gadget, sans-serif }
    span.Comic { font-family: Comic Sans MS, cursive }
    span.Courier { font-family: Courier, Courier New, monospace }
    span.Georgia { font-family: Georgia, serif }
    span.Impact { font-family: Impact, Charcoal, sans-serif }
    span.Console { font-family: Lucida Console, Monaco, monospace }
    span.Palatino { font-family: Palatino Linotype, Book Antiqua, Palatino,
serif }
    span.Tahoma { font-family: Tahoma, Geneva, sans-serif }
    span.Times { font-family: Times New Roman, Times, serif }
    span.Verdana { font-family: Verdana, Geneva, sans-serif }

/* Font Sizes */
    span.LudicrousHuge { font-size: 128px }
    span.OutrageouslyHuge { font-size: 64px }
    span.VeryBig { font-size: 26px }
    span.Big { font-size: 20px }
    span.Small { font-size: 12px }
    span.VerySmall { font-size: 10px }
    span.Microscopic { font-size: 6px }

/* Paragraph Styles */
    /* Example: p.ExtraPadding { padding: 25px; } */

/* Heading Styles */
    /* Example: h1.HugeBlue { font-size:100px; color: blue; } */

/* Image Styles */
    img.FloatLeft { float: left; }
    img.FloatRight { float: right; }
    img.Outset {
        border-top: 1px solid #C7C7C7;
        border-left: 1px solid #C7C7C7;
        border-right: 1px solid #444444;
        border-bottom: 1px solid #444444;
    }

/* Table Styles */
    table.Basic { BORDER-COLLAPSE: collapse }
    table.Basic TR TD { border:1px solid black; }
    table.Basic TR TH { border:1px solid black; background-color: #B3EEEE; }

    table.LightBlue { BORDER-COLLAPSE: collapse; }

    table.LightBlue th {
        font: bold 12px Arial, Helvetica, Verdana, sans-serif;
        color: black;
        border: 1px solid black;
        background-color: #99C1E9;
        text-transform: uppercase;
        text-align: center;
        padding: 4px;
    }

    table.LightBlue td {
        color: black;
        border: 1px solid black;
        background-color: #D6E6F6;
        padding: 4px;
        text-align: left;
    }

    table.YellowHighlight { BORDER-COLLAPSE: collapse; }

    table.YellowHighlight th {
        font: bold 12px Arial, Helvetica, Verdana, sans-serif;
        color: black;
        border: 2px solid white;
        background-color: #E9FDD6;
        text-transform: uppercase;
        text-align: center;
        padding: 4px;
    }

    table.YellowHighlight td {
        color: black;
        border: 2px solid white;
        background-color: #FDFDD6;
        padding: 4px;
        text-align: left;
    }

    table.DarkBold { BORDER-COLLAPSE: collapse;    }

    table.DarkBold th {
        font: bold 14px Arial, Helvetica, Verdana, sans-serif;
        color: white;
        border: 1px solid black;
        background-color: black;
        text-transform: uppercase;
        text-align: center;
        padding: 4px;
    }

    table.DarkBold td {
        font-weight: bold;
        color: #9BADBA;
        border: 1px solid black;
        background-color: #053353;
        padding: 4px;
        text-align: left;
    }

    table td.Header { font-size: 20px; }
    table td.Highlight { background-color: yellow; }

    h1 { margin: 0; }

    .center { text-align: center; }

    #idContainer {
        width: 740px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    #idMeta, #idFooter {
        padding: 6px 0;
        font-size: 11px;
    }

    #idMeta {
        border-bottom: 2px solid #E9F0F6;
    }

    #idFooter {
        border-top: 2px solid #E9F0F6;
    }


/* Palette Colors */
    span.color10           { color:            rgb(255,255,255) }
    span.color10_highlight { background-color: rgb(255,255,255) }

    span.color11           { color:            rgb(0,0,0) }
    span.color11_highlight { background-color: rgb(0,0,0) }

    span.color12           { color:            rgb(250,243,232) }
    span.color12_highlight { background-color: rgb(250,243,232) }

    span.color13           { color:            rgb(31,73,125) }
    span.color13_highlight { background-color: rgb(31,73,125) }

    span.color14           { color:            rgb(92,131,180) }
    span.color14_highlight { background-color: rgb(92,131,180) }

    span.color15           { color:            rgb(192,80,77) }
    span.color15_highlight { background-color: rgb(192,80,77) }

    span.color16           { color:            rgb(157,187,97) }
    span.color16_highlight { background-color: rgb(157,187,97) }

    span.color17           { color:            rgb(128,102,160) }
    span.color17_highlight { background-color: rgb(128,102,160) }

    span.color18           { color:            rgb(75,172,198) }
    span.color18_highlight { background-color: rgb(75,172,198) }

    span.color19           { color:            rgb(245,157,86) }
    span.color19_highlight { background-color: rgb(245,157,86) }

    span.color20           { color:            rgb(216,216,216) }
    span.color20_highlight { background-color: rgb(216,216,216) }

    span.color21           { color:            rgb(127,127,127) }
    span.color21_highlight { background-color: rgb(127,127,127) }

    span.color22           { color:            rgb(187,182,174) }
    span.color22_highlight { background-color: rgb(187,182,174) }

    span.color23           { color:            rgb(199,209,222) }
    span.color23_highlight { background-color: rgb(199,209,222) }

    span.color24           { color:            rgb(214,224,236) }
    span.color24_highlight { background-color: rgb(214,224,236) }

    span.color25           { color:            rgb(239,211,210) }
    span.color25_highlight { background-color: rgb(239,211,210) }

    span.color26           { color:            rgb(230,238,215) }
    span.color26_highlight { background-color: rgb(230,238,215) }

    span.color27           { color:            rgb(223,216,231) }
    span.color27_highlight { background-color: rgb(223,216,231) }

    span.color28           { color:            rgb(210,234,240) }
    span.color28_highlight { background-color: rgb(210,234,240) }

    span.color29           { color:            rgb(252,230,212) }
    span.color29_highlight { background-color: rgb(252,230,212) }

    span.color30           { color:            rgb(191,191,191) }
    span.color30_highlight { background-color: rgb(191,191,191) }

    span.color31           { color:            rgb(114,114,114) }
    span.color31_highlight { background-color: rgb(114,114,114) }

    span.color32           { color:            rgb(162,157,150) }
    span.color32_highlight { background-color: rgb(162,157,150) }

    span.color33           { color:            rgb(143,164,190) }
    span.color33_highlight { background-color: rgb(143,164,190) }

    span.color34           { color:            rgb(173,193,217) }
    span.color34_highlight { background-color: rgb(173,193,217) }

    span.color35           { color:            rgb(223,167,166) }
    span.color35_highlight { background-color: rgb(223,167,166) }

    span.color36           { color:            rgb(206,221,176) }
    span.color36_highlight { background-color: rgb(206,221,176) }

    span.color37           { color:            rgb(191,178,207) }
    span.color37_highlight { background-color: rgb(191,178,207) }

    span.color38           { color:            rgb(165,213,226) }
    span.color38_highlight { background-color: rgb(165,213,226) }

    span.color39           { color:            rgb(250,206,170) }
    span.color39_highlight { background-color: rgb(250,206,170) }

    span.color40           { color:            rgb(165,165,165) }
    span.color40_highlight { background-color: rgb(165,165,165) }

    span.color41           { color:            rgb(89,89,89) }
    span.color41_highlight { background-color: rgb(89,89,89) }

    span.color42           { color:            rgb(125,121,116) }
    span.color42_highlight { background-color: rgb(125,121,116) }

    span.color43           { color:            rgb(87,118,157) }
    span.color43_highlight { background-color: rgb(87,118,157) }

    span.color44           { color:            rgb(132,162,198) }
    span.color44_highlight { background-color: rgb(132,162,198) }

    span.color45           { color:            rgb(207,123,121) }
    span.color45_highlight { background-color: rgb(207,123,121) }

    span.color46           { color:            rgb(181,204,136) }
    span.color46_highlight { background-color: rgb(181,204,136) }

    span.color47           { color:            rgb(159,140,183) }
    span.color47_highlight { background-color: rgb(159,140,183) }

    span.color48           { color:            rgb(120,192,212) }
    span.color48_highlight { background-color: rgb(120,192,212) }

    span.color49           { color:            rgb(247,181,128) }
    span.color49_highlight { background-color: rgb(247,181,128) }

    span.color50           { color:            rgb(140,140,140) }
    span.color50_highlight { background-color: rgb(140,140,140) }

    span.color51           { color:            rgb(63,63,63) }
    span.color51_highlight { background-color: rgb(63,63,63) }

    span.color52           { color:            rgb(87,85,81) }
    span.color52_highlight { background-color: rgb(87,85,81) }

    span.color53           { color:            rgb(23,54,93) }
    span.color53_highlight { background-color: rgb(23,54,93) }

    span.color54           { color:            rgb(69,98,135) }
    span.color54_highlight { background-color: rgb(69,98,135) }

    span.color55           { color:            rgb(144,60,57) }
    span.color55_highlight { background-color: rgb(144,60,57) }

    span.color56           { color:            rgb(117,140,72) }
    span.color56_highlight { background-color: rgb(117,140,72) }

    span.color57           { color:            rgb(96,76,120) }
    span.color57_highlight { background-color: rgb(96,76,120) }

    span.color58           { color:            rgb(56,129,148) }
    span.color58_highlight { background-color: rgb(56,129,148) }

    span.color59           { color:            rgb(183,117,64) }
    span.color59_highlight { background-color: rgb(183,117,64) }

    span.color60           { color:            rgb(127,127,127) }
    span.color60_highlight { background-color: rgb(127,127,127) }

    span.color61           { color:            rgb(38,38,38) }
    span.color61_highlight { background-color: rgb(38,38,38) }

    span.color62           { color:            rgb(62,60,58) }
    span.color62_highlight { background-color: rgb(62,60,58) }

    span.color63           { color:            rgb(15,36,62) }
    span.color63_highlight { background-color: rgb(15,36,62) }

    span.color64           { color:            rgb(46,65,90) }
    span.color64_highlight { background-color: rgb(46,65,90) }

    span.color65           { color:            rgb(96,40,38) }
    span.color65_highlight { background-color: rgb(96,40,38) }

    span.color66           { color:            rgb(78,93,48) }
    span.color66_highlight { background-color: rgb(78,93,48) }

    span.color67           { color:            rgb(64,51,80) }
    span.color67_highlight { background-color: rgb(64,51,80) }

    span.color68           { color:            rgb(37,86,99) }
    span.color68_highlight { background-color: rgb(37,86,99) }

    span.color69           { color:            rgb(122,78,43) }
    span.color69_highlight { background-color: rgb(122,78,43) }


    @media print {
        /* Customize the styles of your printed articles by adding styles
within this @media block. */
    }

--tim
-------------- next part --------------
An HTML attachment was scrubbed...
URL: /pipermail/attachments/20080122/9fee976b/attachment-0001.html 


More information about the Concurrency-interest mailing list