8.4 - Sample Project Styles

Here are the project styles I'm using for this manual. If you look them over, you'll notice I redacted the path on my local server that points to my images; that's because it would reveal part of my internal server path structure, which no one needs to know. I created the redaction by generating the project styles into a variable named xlatedglobalstyles using the technique described here, then did this in the Page Content:

[replace privatestuff,{orange [i redacted]},[v xlatedglobalstyles]]

Here's the resulting redacted style content:

Canned HTML 4.01 page style configuration for gstyle "htmlpage"
[include html401.dsys]

Purple bar incorporating next, previous, toc, index, notes, and glossary
[include npbar.dsys]

Canned TOC, index, glossary, foot+end notes, and figures systems
[include tocmod1.dsys]
[include indexmod1.dsys]
[include glossmod1.dsys]
[include notesmod1.dsys]
[include figurmod1.dsys]
[include citesmod1.dsys]

[gstyle mailto [splitcount 1][split [co],[b]][a tab,mailto:fyngyrz@gmail.com?subject=[urlencode [parm 0]],[parm 1]]]

Set the index flags
[global fl_bysection true]
[global fl_redun true]

Mod the headings to automatically index
[gstyle H1 {ix [b]}{h1 [b]}]
[gstyle H2 {ix [b]}{h2 [b]}]
[gstyle H3 {ix [b]}{h3 [b]}]
[gstyle H4 {ix [b]}{h4 [b]}]
[gstyle H5 {ix [b]}{h5 [b]}]
[gstyle H6 {ix [b]}{h6 [b]}]

HTML Conveniences
[gstyle cent <center>[b]</center>]
[gstyle nobreak <span style="white-space:nowrap;">[b]</span>]
[gstyle p <p style="margin-left: 0">[b]</p>[lf]]
[gstyle pi <p style="margin-left: 2em">[b]</p>[lf]]
[gstyle name <a name="[b]"></a>]
[gstyle q &quot;[b]&quot;]
[gstyle tag {bu {pla}[b]{pra}}] HTML tags
[gstyle stag {bu {pls}[b {purple [b]}]{prs}}] defined styles
[gstyle atag {bu {plb}{green [b]}{prb}}] aa_macro built-ins
[gstyle qstring {bu {white &quot;}{darkred [b]}{white &quot;}}]
[gstyle entity {bu <span style="color:#5599FF;">&amp;[b];</span>}]
[gstyle tt <tt>[b]</tt>]
[gstyle md &mdash;]
[gstyle nb &nbsp;]
[gstyle db <br><br>]
[gstyle sb <br>]

How I style variables
[gstyle memz <span style="background:#FFFFcc;">&nbsp;[b {dgreen [b]}]&nbsp;</span>]

[gstyle cwrap [splitcount 1][split [co],[b]]<span style="color: #[parm 0];">[parm 1]</span>]
[gstyle bk <span style="background-color: #000088;">[b]</span>]
[gstyle red {cwrap ff0000,[b]}]
[gstyle bred [b {red [b]}]]
[gstyle darkred {cwrap 880000,[b]}]
[gstyle green {cwrap 00ff00,[b]}]
[gstyle grey {cwrap 888888,[b]}]
[gstyle gray {cwrap 888888,[b]}]
[gstyle yellow {cwrap ffff00,[b]}]
[gstyle orange {cwrap ff8844,[b]}]
[gstyle dgreen {cwrap 008800,[b]}]
[gstyle green {cwrap 00FF00,[b]}]
[gstyle blue {cwrap 0000ff,[b]}]
[gstyle purple {cwrap ff00ff,[b]}]
[gstyle white {cwrap FFFFFF,[b]}]
[gstyle aqua {cwrap 00FFFF,[b]}]
[gstyle daqua {cwrap 008888,[b]}]

A nice little keyboard key representation in CSS
[gstyle csskey <style type="text/css">
.ckey [ls]
display: inline-block;
white-space: nowrap;
border: .1em solid #000000;
border-radius: 5px;
min-width: 1em;
border-color: #AAAAAA;
background: #000000;
padding-left: 3px;
padding-right: 3px;
color: #ffffff;

[gstyle key <span class="ckey">[b]</span>]
[gstyle keyhints
<div style="
clear: both;
width: 75%;
border-style: solid;
background: #ffffff;
text-align: center;
padding: .5em;
margin: auto;
[i Keyboard Navigation]
<hr width="75%">
{key ,} Previous Page
{key .} Next Page
{key t} TOC
{key i} Index

[gstyle rawmode {nobreak {bu [b {plb}{green local} {grey ds_rawmode} 1{prb}]}}]

Warning, note, and tip blocks
[gstyle cblock
[split |||,[b]]
<div style="
width: 75%;
border-style: solid;
background: #[parm 0];
text-align: left;
padding: .5em;
margin: auto;
margin-top: 1em;
margin-bottom: 1em;
>[parm 1]</div>
[gstyle warning {cblock FFDDDD|||[b]}]
[gstyle caution {cblock FFFFDD|||[b]}]
[gstyle note {cblock DDDDFF|||[b]}]
[gstyle tip {cblock DDFFDD|||[b]}]

[gstyle sidenote [split |||,[b]] <table
margin-right: 20px;
background: #ffffff;
padding: 0;
float: [parm 0];
<tr><td><table style="padding: .25em;"
><tr><td>[parm 1]</td></tr></table></td></tr>
[gstyle leftnote {sidenote left|||[b]}]
[gstyle rightnote {sidenote right|||[b]}]

Pretty-printing setup for hlit, vlit and slit:
[global ppre_lb <span style="color:#FFFF00;"><big><b>] Opening square brace
[global ppos_lb </b></big></span><span style="color:#AAAAAA;">]

[global ppre_rb </span><span style="color:#FFFF00;"><big><b>] Closing square brace
[global ppos_rb </b></big></span>]

[global ppre_ls <span style="color:#FF0000;"><big><b>] Opening squiggly brace
[global ppos_ls </b></big></span><span style="color:#FF8844;">]

[global ppre_rs </span><span style="color:#FF0000;"><big><b>] Closing squiggly brace
[global ppos_rs </b></big></span>]

[global ppre_la <span style="color:#00FFFF;"><big><b>] Opening angle brace
[global ppos_la </b></big></span><span style="color:#5599FF;">]

[global ppre_ra </span><span style="color:#00FFFF;"><big><b>] Closing angle brace
[global ppos_ra </b></big></span>]

[global ppre_quo <span style="color:#FFFFFF;"><big><b>] Opening quote
[global ppos_quo </b></big></span><span style="color:#880000;">]

[global ppre_cqu </span><span style="color:#FFFFFF;"><big><b>] Closing quote
[global ppos_cqu </b></big></span>]

Here's a nice blue container for the pretty-printed content
[gstyle cpad 1em]
[gstyle codediv
<div style="
background: #000088;
color: #00ff00;
margin-bottom: {cpad};
padding: {cpad} {cpad} {cpad} {cpad};

These are just quick invocations of the various styled characters
[gstyle plb [v ppre_lb][lb][v ppos_lb]]
[gstyle prb [v ppre_rb][rb][v ppos_rb]]
[gstyle pls [v ppre_ls][ls][v ppos_ls]]
[gstyle prs [v ppre_rs][rs][v ppos_rs]]
[gstyle pla [v ppre_la]&lt;[v ppos_la]]
[gstyle pra [v ppre_ra]&gt;[v ppos_ra]]
[gstyle pquo [v ppre_quo][b &quot;][v ppos_quo]]
[gstyle pcqu [v ppre_cqu][b &quot;][v ppos_cqu]]

[global ppre_ak <span style="color:#008800; font-weight:bold;">]
[global ppre_sk <span style="color:#ff00ff; font-weight:bold;">]
[global ppos_ak </span>]
[global ppos_sk </span>]

Mouse paging
[gstyle keynav <script src="mousetrap.js" type="text/javascript"></script>
<script type="text/javascript">
Mousetrap.bind(",", onLeft_keyDown, "keydown");
Mousetrap.bind(".", onRight_keyDown, "keydown");
Mousetrap.bind("i", onIndex_keyDown, "keydown");
Mousetrap.bind("t", onToc_keyDown, "keydown");
function onLeft_keyDown() [ls] window.location.href = "[v prevpage]"; [rs]
function onRight_keyDown() [ls] window.location.href = "[v nextpage]"; [rs]
function onIndex_keyDown() [ls] window.location.href = "indexpage.html"; [rs]
function onToc_keyDown() [ls] window.location.href = "tocpage.html"; [rs]

Custom Stuff
[gstyle github [b [a tab,https://github.com/,GitHub]]]
[gstyle markdown [b [a tab,https://daringfireball.net/projects/markdown/,Markdown]]]
[gstyle bu {bk &nbsp;[b]&nbsp;}]
[gstyle aa_macro [b [a tab,http://ourtimelines.com/aamacrodoc/tocpage.html,aa_macro]]]
[gstyle sqi [b {yellow [ls]{red [b]}[rs]}]]
[gstyle squ [b {yellow [lb]{green [b]}[rb]}]]
[gstyle sqx [b {yellow [lb]{red [b]}[rb]}]]
[gstyle parm [b {white [b]}]]
[gstyle cont [b {aqua [b]}]]
[gstyle wv {white [vb]}]
[gstyle old [img oldguy.gif]]
[gstyle wftm {wtfm}]

This gives me a nice way to show hlit, vlit and slit:
[gstyle hlit {nobreak {bu {pls}hlit {cont content}{prs}}}]
[gstyle vlit {nobreak {bu {pls}vlit {cont variable name}{prs}}}]
[gstyle slit {nobreak {bu {pls}slit {cont style name}{prs}}}]

[lipath /redacted/pics/]
[wepath /wtfm/pics/]
[gstyle smile [locimg smile,stock_smiley_2.png]]

cpic imagename|||imagetitle
[gstyle cpic <div style="text-align: center;">[splitcount 1][split |||,[b]]{figure [parm 1]}{cent [locimg [parm 0]]}<br>[parm 1]</div>]

rpic imagename|||imagetitle
[gstyle rpic <div style="float: right; margin-left: 1em; text-align: center;">[splitcount 1][split |||,[b]]{figure [parm 1]}{cent [locimg [parm 0]]}<br>[parm 1]</div>]

lpic imagename|||imagetitle
[gstyle lpic <div style="float: left; margin-right: 1em; text-align: center;">[splitcount 1][split |||,[b]]{figure [parm 1]}{cent [locimg [parm 0]]}<br>[parm 1]</div>]

Alternating colors
tcolors color1,color2
[gstyle treset [local tcount 0]]
[gstyle colsp [split [co],[b]][local tc0 [parm 0]][local tc1 [parm 1]]]
[gstyle tcolors {treset}{colsp [b]}]
[gstyle cinc [local tcount [inc [v tcount]]]]
[gstyle tcolor [odd [v tcount] [v tc0]]]
[gstyle ntcolo [even [v tcount] [v tc1]]]
[gstyle rowcolor {cinc}{tcolor}{ntcolo}]

alt color table rows with two parms
[global aparms width="20%" valign="top" align="right"]
[global bparms valign="top"]
[gstyle trow2 [split |||,[b]][row bgcolor="{rowcolor}",
[cell [v aparms],[b [parm 0]]]
[cell [v bparms],[parm 1]]

Creates a centered div of the specified width in percentage: ctable LR-margin,LR-padding,content - this is use in the page style, next
[gstyle ctable [splitcount 2][split [co],[b]]<div style="color: #000000; margin: auto; padding-left: [parm 1]; padding-right: [parm 1]; padding-bottom: [parm 1]; width: [parm 0]; background-color: #FFEEDD;">[nl]<br>[nl][parm 2]</div>[nl]]

[gstyle goog [include googlmod1.dsys]][comment actual google ads]

[gstyle xgoog [table width="150"[comment height="600"],[row ,[cell align="center",[dup 16,<br>]150x600 Google Ad Placeholder[dup 16,<br>]]]]]

[gstyle sdgoog [table border="1" width="150"[comment height="600"],[row ,[cell align="center",[dup 16,<br>]150x600 Ad Placeholder<br><br> [b Ads off for slashdotters][dup 16,<br>]]]]]

[gstyle ads {goog}]

[gstyle adtable
[table width="100%",
[row ,[cell style="padding-right: 2em;" valign="top",[b]]
[cell valign="top" align="center" width="175",<div style=" padding-top: 2em; position:fixed; margin-left: 6px;">{ads}</div>]

Page style Body is in centered table, has html validator
[gstyle page
<div style="font-family: monospace;">[b]</div>

HTML Validator for HTML 4.01. You can use this to check your
pages; if they don't validate when actually published, you should
not include this. However, you should also try to make them validate!
[gstyle htmlval <p style="text-align: center;">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Loose" height="31" width="88"></a>[nl]<br>&nbsp;[nl]</p>

[gstyle aaugw [b <a target="_blank" style="color: {linkcolor};" href="http://ourtimelines.com/aamacrodoc/tocpage.html">{nobreak aa_macro User's Guide}</a>]]

[gstyle aaug [b [a tab,http://ourtimelines.com/aamacrodoc/tocpage.html,aa_macro User's Guide]]]

Kill the bar entities we don't want/have
[global GLOSSARY]

And set up the extra area
[global EXTRA {aaugw}]

A button representation in CSS
[gstyle cssbutton <style type="text/css">
.cbut [ls]
display: inline-block;
white-space: nowrap;
border: .1em solid #000000;
border-radius: 5px;
border-color: #000000;
background: #FFFFFF;
padding-left: 3px;
padding-right: 3px;
color: #000000;

[gstyle button {nobreak <span class="cbut">[b]</span>}]

A checkbox representation in CSS
[gstyle csscbox <style type="text/css">
.cchk [ls]
display: inline-block;
white-space: nowrap;
border: .1em solid #000000;
border-color: #000000;
background: #FFFFFF;
padding-left: 3px;
padding-right: 3px;
color: #000000;

[gstyle checked {nobreak [b [b]]&nbsp;<span class="cchk">x</span>}]
[gstyle unchecked {nobreak [b [b]]&nbsp;<span class="cchk">{white x}</span>}]

[global stylage [v stylage]
Keyboard Navigation
, Previous Page . Next Page t TOC i Index

Valid HTML 4.01 Loose

This manual was generated with wtfm